/* ── Design tokens — The Oven Cleaner design system ─────────────────────────
   Imported verbatim from the Claude Design project's token files.
   Do not hand-edit values here; change them in the design system and re-sync. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* Typography */
  --font-display:'Baloo 2',ui-rounded,system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:20px;
  --text-2xl:24px;--text-3xl:32px;--text-4xl:40px;--text-5xl:56px;
  --weight-body:400;--weight-semibold:600;--weight-bold:700;
  --weight-display:700;--weight-display-heavy:800;
  --leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.6;
  --tracking-caps:0.08em;

  /* Core palette — from brand direction doc (Option One) */
  --purple-700:#653A9F;   /* Rebecca Purple — primary brand */
  --lilac-300:#C0ABD6;    /* Lilac — soft framing */
  --lavender-100:#F1EBF0; /* Lavender Mist — tinted surfaces */
  --snow-50:#F9F8F9;      /* Bright Snow — page background */
  --lemon-400:#FDE509;    /* Bright Lemon — sparkle accent */

  /* Derived shades (oklch-harmonised with #653A9F) */
  --purple-900:#43266E;
  --purple-800:#54308A;
  --purple-500:#8B5FC7;
  --purple-200:#E2D6F0;
  --lemon-500:#E5CF06;
  --white:#FFFFFF;

  /* Semantic aliases */
  --brand:var(--purple-700);
  --brand-hover:var(--purple-800);
  --brand-active:var(--purple-900);
  --accent:var(--lemon-400);
  --accent-hover:var(--lemon-500);
  --surface-page:var(--snow-50);
  --surface-card:var(--white);
  --surface-tint:var(--lavender-100);
  --surface-inverse:var(--purple-700);
  --text-heading:var(--purple-900);
  --text-body:#4A3A63;
  --text-muted:#7A6C91;
  --text-on-brand:var(--white);
  --text-on-accent:var(--purple-900);
  --border:#E7DFF0;
  --border-strong:var(--lilac-300);
  --focus-ring:0 0 0 3px rgba(101,58,159,.25);
  --success:#2E9E5B;
  --danger:#D64545;

  /* Spacing, radii, elevation */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(67,38,110,.08);
  --shadow-md:0 4px 14px rgba(67,38,110,.10);
  --shadow-lg:0 14px 36px rgba(67,38,110,.14);
  --section-pad:96px;
  --content-max:1120px;
}