/* 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) */
  --bg: var(--cream);
  --surface: #fffdfa;
  --surface-2: #ede6dd;
  --text: #1b1e29;
  --text-muted: #585b69;
  --border: #e0d6ca;
  --brand: var(--lilac-700);        /* buttons, strong brand use (passes contrast on white text) */
  --brand-text: var(--lilac-700);   /* brand-coloured text and links */
  --brand-soft: var(--lilac-100);
  --accent: var(--coral-500);
  --accent-text: var(--coral-700);
  --on-brand: #ffffff;
  --shadow: 0 1px 2px rgb(27 30 41 / .06), 0 8px 24px -12px rgb(27 30 41 / .18);
  --focus: var(--lilac-600);

  /* Type */
  --font-display: "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: 14px; --radius-l: 22px; --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: var(--navy);
    --surface: #161d2b;
    --surface-2: #1e2637;
    --text: #eef0f6;
    --text-muted: #a4aabb;
    --border: #283148;
    --brand: #6d5ce2;          /* a touch deeper than lilac-600 so white button text passes contrast (4.9:1) */
    --brand-text: var(--lilac-300);
    --brand-soft: #231f45;
    --accent-text: var(--coral-300);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
    --focus: var(--lilac-300);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--navy);
  --surface: #161d2b;
  --surface-2: #1e2637;
  --text: #eef0f6;
  --text-muted: #a4aabb;
  --border: #283148;
  --brand: #6d5ce2;          /* a touch deeper than lilac-600 so white button text passes contrast (4.9:1) */
  --brand-text: var(--lilac-300);
  --brand-soft: #231f45;
  --accent-text: var(--coral-300);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
  --focus: var(--lilac-300);
  color-scheme: dark;
}