/* Design tokens: every colour, font, size and motion value lives here.
   To try a new palette, change the brand colours at the top. Everything else follows. */
:root {
  /* Brand colours */
  --lilac-50: #f4f2fe;
  --lilac-100: #e7e2fd;
  --lilac-300: #bcb1f9;
  --lilac-500: #8f7ef4;   /* lead brand colour */
  --lilac-600: #7766e8;
  --lilac-700: #5c4bc7;
  --coral-300: #f3a98e;
  --coral-500: #E8734A;   /* accent */
  --coral-700: #a3461f;
  --cream: #F4EFE9;       /* light background */
  --navy: #0f1520;        /* dark background */
  --gradient: linear-gradient(135deg, var(--coral-500), var(--lilac-500)); /* signature */

  /* Light mode (default): bright and crisp. Every text colour passes WCAG AA (checked 2026-09-30). */
  --bg: #f5f2ff;                    /* soft lilac tint (was #fbfaff, too close to white) */
  --surface: #ffffff;
  --surface-2: #ece7ff;
  --text: #15121f;
  --text-muted: #5b5770;
  --logo-a: #e8734a;                 /* the SM mark: coral → lilac (deeper lilac on light so it reads) */
  --logo-b: #6d5ce2;
  --logo-spark: #e8734a;
  --border: #e6e1f7;
  --border-strong: #d9d3f0;
  --brand: #6d5ce2;                 /* buttons: white text 4.9:1 */
  --brand-text: #5543d4;            /* brand-coloured text and links */
  --brand-soft: #eeeafe;
  --accent: var(--coral-500);
  --accent-text: #b3461d;
  --on-brand: #ffffff;
  --shadow: 0 1px 2px rgb(21 18 31 / .05), 0 14px 34px -18px rgb(83 63 196 / .28);
  --shadow-lg: 0 2px 6px rgb(21 18 31 / .06), 0 30px 60px -28px rgb(83 63 196 / .4);
  --focus: var(--lilac-600);

  /* Type: a crisp geometric sans for headings, Inter for reading, Fraunces only for the logo wordmark */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);

  /* Space, shape */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
  --radius-s: 8px; --radius: 12px; --radius-l: 18px; --radius-pill: 999px;
  --wrap: 1120px;
  --gutter: 16px;

  /* Motion: one easing curve, short durations */
  --ease: cubic-bezier(.22, .7, .2, 1);
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* Dark mode: follows the device unless the visitor picked light with the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e1d;             /* inky violet night (richer than plain navy) */
    --surface: #161a30;
    --surface-2: #1c2140;
    --text: #eef0f6;
    --text-muted: #a9aec4;
    --logo-a: #ff8f63;
    --logo-b: #a99cf7;
    --logo-spark: #ff9a6b;
    --border: #313860;
    --border-strong: #3d4574;
    --shadow-lg: 0 2px 6px rgb(0 0 0 / .35), 0 30px 60px -28px rgb(0 0 0 / .7);
    --brand: #6d5ce2;          /* a touch deeper than lilac-600 so white button text passes contrast (4.9:1) */
    --brand-text: var(--lilac-300);
    --brand-soft: #262057;
    --accent-text: var(--coral-300);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 34px -16px rgb(109 92 226 / .35);
    --focus: var(--lilac-300);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0e1d;             /* inky violet night (richer than plain navy) */
  --surface: #161a30;
  --surface-2: #1c2140;
  --text: #eef0f6;
  --text-muted: #a9aec4;
  --logo-a: #ff8f63;
  --logo-b: #a99cf7;
  --logo-spark: #ff9a6b;
  --border: #313860;
  --border-strong: #3d4574;
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .35), 0 30px 60px -28px rgb(0 0 0 / .7);
  --brand: #6d5ce2;          /* a touch deeper than lilac-600 so white button text passes contrast (4.9:1) */
  --brand-text: var(--lilac-300);
  --brand-soft: #262057;
  --accent-text: var(--coral-300);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 34px -16px rgb(109 92 226 / .35);
  --focus: var(--lilac-300);
  color-scheme: dark;
}