/* ============================================================
   Smile Simulator — design tokens
   Ported from design-system/tokens/. Brand values live HERE;
   never hardcode a hex in styles.css or a page.
   ============================================================ */

:root {
  color-scheme: light;
  /* --- Brand palette --- */
  --ss-deep-indigo: #34278B;
  --ss-lavender-white: #F3F3F9;
  --ss-bright-orchid: #E884F3;
  --ss-vivid-blue: #2A78DD;
  --ss-deep-blue: #03234E;
  --ss-white: #FFFFFF;

  /* Channel-only copies of the brand palette, for rgba() tints. Same values
     as above; split out because rgba() cannot take a hex variable. Keep in
     sync with the palette. */
  --ss-deep-indigo-rgb: 52, 39, 139;
  --ss-bright-orchid-rgb: 232, 132, 243;
  --ss-vivid-blue-rgb: 42, 120, 221;

  /* Derived tints / shades for states & surfaces */
  --ss-indigo-700: #2A1F73;
  --ss-indigo-100: #E5E1F4;
  --ss-blue-700: #1F5EB3;
  --ss-blue-100: #DCE9FB;
  --ss-orchid-100: #FBE7FD;
  --ss-orchid-600: #D45FE0;

  /* --- Signature gradient --- */
  --ss-gradient: linear-gradient(90deg, var(--ss-vivid-blue) 0%, var(--ss-deep-indigo) 50%, var(--ss-bright-orchid) 100%);
  --ss-gradient-diagonal: linear-gradient(135deg, var(--ss-vivid-blue) 0%, var(--ss-deep-indigo) 55%, var(--ss-bright-orchid) 100%);

  /* Button gradient. Same brand endpoints as --ss-gradient, but:
     - slanted (118deg) instead of a flat 90deg sweep
     - indigo sits off-centre at 40%, giving one long ramp out to orchid
       rather than two symmetrical halves meeting in a dark band
     - the two mid stops are blend control points, not brand colours. A
       straight sRGB blend from deep indigo to orchid dips through a muddy
       grey-purple that reads as a seam; these bend the ramp toward violet
       and keep the blend smooth. */
  --ss-gradient-btn: linear-gradient(
    118deg,
    var(--ss-vivid-blue) 0%,
    var(--ss-deep-indigo) 40%,
    #6F49BE 64%,
    #B06ADD 84%,
    var(--ss-bright-orchid) 100%
  );

  /* --- Semantic aliases --- */
  --surface-page: var(--ss-white);
  --surface-soft: var(--ss-lavender-white);
  --surface-card: var(--ss-white);
  --surface-dark: var(--ss-deep-indigo);
  --surface-darker: var(--ss-deep-blue);
  --surface-tech: #F7F8FC;
  --surface-accent: #EDF4FD;
  --nav-surface: var(--ss-deep-indigo);
  --grid-dot: rgba(var(--ss-deep-indigo-rgb), 0.14);
  --theme-toggle-track: #F3F3F9;
  --theme-toggle-track-hover: #EAECF6;
  --theme-toggle-border: #D9DAE7;
  --theme-toggle-icon: var(--ss-vivid-blue);
  --theme-toggle-knob: var(--ss-white);
  --theme-toggle-knob-ring: transparent;

  --text-heading: var(--ss-deep-indigo);

  /* ALL body copy on light surfaces is Deep Blue #03234E. That includes
     supporting text: ledes, card copy, captions, section intros. Do not
     use --text-muted for body copy. */
  --text-body: var(--ss-deep-blue);

  /* Reserved for genuinely de-emphasized UI only (form hints, disabled
     states, timestamps). Not currently used on the marketing site. */
  --text-muted: #5B5F73;

  --text-on-dark: var(--ss-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);

  --brand: var(--ss-deep-indigo);
  --accent: var(--ss-vivid-blue);
  --accent-hover: var(--ss-blue-700);
  --accent-on-dark: var(--ss-bright-orchid);
  --highlight: var(--ss-bright-orchid);
  --link: var(--ss-vivid-blue);
  --link-hover: var(--ss-deep-indigo);

  --border-soft: #E3E2ED;
  --border-strong: #C9C7DB;
  --ring: rgba(42, 120, 221, 0.35);

  --success: #1E9E6A;
  --warning: #E0A21A;
  --danger: #D64545;

  /* --- Typography --- */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: 64px;
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.18em;

  /* --- Spacing scale (fixed steps, nothing in between) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* --- Radius (brand uses generous rounding) --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  /* Buttons: 10px. Note this intentionally overrides the brand guideline's
     18px button radius, per the approved CTA design. */
  --radius-btn: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* --- Shadows (soft, indigo-tinted) --- */
  --shadow-sm: 0 1px 2px rgba(3, 35, 78, 0.06), 0 1px 3px rgba(3, 35, 78, 0.08);
  --shadow-md: 0 4px 12px rgba(52, 39, 139, 0.10), 0 2px 4px rgba(3, 35, 78, 0.06);
  --shadow-lg: 0 12px 32px rgba(52, 39, 139, 0.14), 0 4px 10px rgba(3, 35, 78, 0.08);
  --shadow-xl: 0 24px 60px rgba(52, 39, 139, 0.18), 0 8px 20px rgba(3, 35, 78, 0.10);
  --shadow-glow: 0 10px 30px rgba(232, 132, 243, 0.30);
  /* Deliberately unused. Focus is drawn with `outline`, not box-shadow: a
     box-shadow focus ring is silently overridden by any component that sets
     its own shadow. Do not reintroduce this for focus states. */
  --shadow-focus: 0 0 0 3px var(--ring);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;

  /* Scroll-reveal timing, referenced by --transition-reveal below. */
  --dur-reveal: 700ms;
  --ease-reveal: cubic-bezier(0.4, 0, 0.2, 1);

  /* Distance every hovering card lifts. Changing it here changes it
     everywhere. */
  --card-lift: -8px;

  /* `transition` is a shorthand, so two rules that both declare it on the same
     element do not merge — the winning one silently discards the other. Every
     lifting card is also a .reveal, so a card that declares only its hover
     transition loses that entire declaration to .reveal (equal specificity,
     declared later) and its lift then snaps with no transition at all.

     These two lists exist so such an element can state both in one
     declaration. A card that lifts uses `transition: var(--transition-lift),
     var(--transition-reveal)` from a selector specific enough to beat .reveal.
     Keep both halves — dropping the reveal half breaks the scroll fade, and
     dropping the lift half is the bug described above. */
  --transition-reveal: opacity var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms),
                       transform var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms);
  --transition-lift: translate var(--dur-slow) var(--ease-out),
                     border-color var(--dur-med) var(--ease-out),
                     box-shadow var(--dur-slow) var(--ease-out);

  /* --- Layout --- */
  --container-max: 1350px;
  --container-pad-desktop: 32px;
  --container-pad-mobile: 20px;
  --nav-height: 96px;
  --nav-height-mobile: 80px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ss-lavender-white: #18181F;
  --ss-indigo-100: #2B2939;
  --ss-blue-100: #152A47;
  --ss-orchid-100: #34223B;

  --surface-page: #121217;
  --surface-soft: #18181F;
  --surface-card: #1B1B23;
  --surface-dark: #1B1B23;
  --surface-darker: #0D0D12;
  --surface-tech: #141419;
  --surface-accent: #14243C;
  --nav-surface: #0D0D12;
  --grid-dot: rgba(143, 124, 255, 0.14);
  --theme-toggle-track: linear-gradient(90deg, #4D8DFF 0%, #9E5CF4 100%);
  --theme-toggle-track-hover: linear-gradient(90deg, #5B98FF 0%, #AA6AF7 100%);
  --theme-toggle-border: transparent;
  --theme-toggle-icon: #BF83FF;
  --theme-toggle-knob: #17171D;
  --theme-toggle-knob-ring: rgba(191, 131, 255, 0.72);

  --text-heading: #F5F4FA;
  --text-body: #CBC9D3;
  --text-muted: #92909D;
  --text-on-dark: #F5F4FA;
  --text-on-dark-muted: rgba(245, 244, 250, 0.68);

  --accent: #58A0FF;
  --accent-hover: #7AB4FF;
  --accent-on-dark: #B98AFF;
  --link: #58A0FF;
  --link-hover: #8BBEFF;

  --border-soft: #30303A;
  --border-strong: #41414D;
  --ring: rgba(88, 160, 255, 0.42);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 10px 30px rgba(88, 160, 255, 0.16);
}