/* hwthinking Design System: tokens.
   Copied verbatim from the design-system export (tokens/fonts.css, colors.css,
   typography.css, shape.css). Do not edit here: change the design system and
   replace this file. The site maps its own names onto these in /ds/site.css. */
/* Site ships 'Segoe UI', system-ui (unshippable to Android). Noto Sans is the cross-platform substitute — same humanist proportions, Google Fonts / Android-native. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root{
/* Brand — lifted verbatim from index.html / book.html */
--hw-violet-500:#6c63ff;   /* --accent */
--hw-violet-600:#5b52e0;   /* --accent2 */
--hw-violet-300:#a78bfa;   /* gradient end */
--hw-indigo-600:#4f46e5;   /* nav-cta, sub-btn */
--hw-indigo-700:#6d28d9;   /* btn-primary gradient end */
--hw-violet-a06:rgba(108,99,255,.06);
--hw-violet-a12:rgba(108,99,255,.12);
--hw-violet-a18:rgba(108,99,255,.18);
--hw-violet-a30:rgba(108,99,255,.3);
--hw-gradient-brand:linear-gradient(135deg,#6c63ff,#a78bfa); /* @kind color */
--hw-gradient-cta:linear-gradient(135deg,#4f46e5,#6d28d9); /* @kind color */
--hw-gradient-hero:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(108,99,255,.15) 0%,transparent 60%); /* @kind color */

/* Neutrals — light */
--hw-white:#ffffff;
--hw-grey-50:#f4f4f8;      /* --bg2 / --card2 */
--hw-grey-200:#e4e4f0;     /* --border */
--hw-grey-600:#5f5f7a;     /* --muted */
--hw-grey-900:#111118;     /* --text */

/* Neutrals — dark (admin) */
--hw-ink-950:#0a0a0f;      /* admin --bg */
--hw-ink-900:#111118;      /* admin --bg2 */
--hw-ink-850:#13131c;      /* admin --card */
--hw-ink-800:#1a1a24;      /* admin --bg3 */
--hw-ink-700:#2a2a3a;      /* admin --border */
--hw-ink-400:#6b6b82;      /* admin --muted */
--hw-ink-100:#e8e8f0;      /* admin --text */
--hw-admin-accent:#7c3aed;
--hw-admin-accent2:#a78bfa;

/* Semantic */
--hw-gold:#d97706;         /* badges */
--hw-amber:#f59e0b;        /* ratings, stars */
--hw-ok:#1f8a5a;
--hw-ok-dark:#34d399;
--hw-err:#dc2626;
--hw-err-dark:#ef4444;
--hw-booked:#b45309;
--hw-student:#0f766e;      /* student guide track */
--hw-cause:#2f7a52;        /* Tranquil Light Foundation */
--hw-linkedin:#0a66c2;
--hw-info:#38bdf8;

/* MUI palette mapping — light */
--mui-primary-main:var(--hw-violet-500);
--mui-primary-dark:var(--hw-violet-600);
--mui-primary-light:var(--hw-violet-300);
--mui-primary-contrast:#fff;
--mui-secondary-main:var(--hw-student);
--mui-success-main:var(--hw-ok);
--mui-warning-main:var(--hw-gold);
--mui-error-main:var(--hw-err);
--mui-info-main:var(--hw-info);
--mui-text-primary:var(--hw-grey-900);
--mui-text-secondary:var(--hw-grey-600);
--mui-text-disabled:rgba(17,17,24,.38);
--mui-divider:var(--hw-grey-200);
--mui-bg-default:var(--hw-white);
--mui-bg-paper:var(--hw-white);
--mui-bg-level1:var(--hw-grey-50);
--mui-action-hover:var(--hw-violet-a06);
--mui-action-selected:var(--hw-violet-a12);
--mui-action-disabled-opacity:.5; /* @kind other */

/* Semantic aliases used by components */
--surface-page:var(--mui-bg-default);
--surface-card:var(--mui-bg-paper);
--surface-sunken:var(--mui-bg-level1);
--text-body:var(--mui-text-primary);
--text-muted:var(--mui-text-secondary);
--border-default:var(--mui-divider);
--link:var(--hw-violet-600);
}
[data-theme="dark"]{
--mui-primary-main:var(--hw-admin-accent);
--mui-primary-dark:#6d28d9;
--mui-primary-light:var(--hw-admin-accent2);
--mui-success-main:var(--hw-ok-dark);
--mui-error-main:var(--hw-err-dark);
--mui-warning-main:var(--hw-amber);
--mui-text-primary:var(--hw-ink-100);
--mui-text-secondary:var(--hw-ink-400);
--mui-text-disabled:rgba(232,232,240,.38);
--mui-divider:var(--hw-ink-700);
--mui-bg-default:var(--hw-ink-950);
--mui-bg-paper:var(--hw-ink-850);
--mui-bg-level1:var(--hw-ink-800);
--mui-action-hover:var(--hw-ink-800);
--mui-action-selected:rgba(124,58,237,.12);
--link:var(--hw-admin-accent2);
--hw-gradient-hero:none; /* @kind color */
}

:root{
--font-sans:'Noto Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
--font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
/* Scale — values lifted from the site (rem at 16px) */
--text-h1:clamp(2.2rem,5vw,3.4rem);   /* hero, 800, lh 1.15, ls -.5px */
--text-h2:clamp(1.6rem,3vw,2rem);     /* section, 800, ls -.3px */
--text-h3:1.1rem;                     /* card title, 700 */
--text-lead:1.05rem;                  /* hero-sub, lh 1.75 */
--text-body:1rem;                     /* lh 1.6 */
--text-body-sm:.9rem;
--text-caption:.8rem;
--text-eyebrow:.75rem;                /* 700, uppercase, ls 2.5px */
--text-label:.72rem;                  /* form label, 700, uppercase, ls .4px */
--text-badge:.6rem;                   /* 700, uppercase, ls .5px */
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:800;
--lh-tight:1.15; /* @kind other */
--lh-heading:1.2; /* @kind other */
--lh-body:1.6; /* @kind other */
--lh-relaxed:1.75; /* @kind other */
--ls-heading:-.5px; /* @kind other */
--ls-eyebrow:2.5px; /* @kind other */
--ls-label:.4px; /* @kind other */
}

:root{
/* Radii — site values */
--radius-xs:6px;      /* admin nav-link */
--radius-sm:8px;      /* inputs, nav buttons, slots, days */
--radius-md:10px;     /* primary buttons, notices, photos */
--radius-lg:14px;     /* testimonial cards, admin cards, tiles */
--radius-xl:16px;     /* page cards, service cards, confirm card */
--radius-2xl:18px;    /* modal, login card */
--radius-pill:100px;
/* Spacing — 4px base, site uses rem multiples */
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;
--container-max:1100px;
--container-narrow:900px;
--container-form:640px;
/* Shadows — site is border-led; shadows only on primary CTA + modal */
--shadow-cta:0 4px 24px rgba(108,99,255,.35);
--shadow-cta-hover:0 8px 32px rgba(108,99,255,.45);
--shadow-glow:0 0 60px rgba(108,99,255,.3);
--shadow-modal:0 24px 64px rgba(0,0,0,.6);
/* Borders */
--border-w:1px; /* @kind other */
--border-w-input:1.5px; /* @kind other */
/* Motion */
--dur-fast:.15s; /* @kind other */
--dur-base:.2s; /* @kind other */
--ease:ease; /* @kind other */
/* Blur */
--blur-nav:16px; /* @kind other */
--blur-modal:8px; /* @kind other */
/* Opacity states */
--hover-opacity:.85; /* @kind other */
--disabled-opacity:.5; /* @kind other */
}
