/* Speak & Sparkle Portal design tokens. Names align with the marketing site :root where they overlap. */
:root{
  /* Palette: core */
  --ss-ink:#0a1733;  --ss-navy:#0c1f45; --ss-navy-2:#16336e; --ss-navy-3:#1f4690;
  --ss-gold:#ffc83d; --ss-gold-2:#ffde85; --ss-gold-deep:#8a6400;
  --ss-coral:#ff7a6b; --ss-orange:#ff9d5c;
  --ss-sky:#5cb8ff;  --ss-sky-soft:#e6f3ff;
  --ss-cream:#fff7e8; --ss-paper:#fffdf8; --ss-muted:#4a5672; --ss-white:#fff;
  --ss-line:rgba(12,31,69,.12);
  /* Tints (card backgrounds) */
  --ss-mint:#e5f8ee; --ss-lilac:#f1e8ff; --ss-blush:#ffe8e4; --ss-butter:#fff3d1;
  /* Semantic */
  --ss-bg:var(--ss-paper); --ss-surface:#fff; --ss-text:var(--ss-ink); --ss-text-muted:var(--ss-muted);
  --ss-focus:var(--ss-gold); --ss-focus-ring:0 0 0 3px var(--ss-paper),0 0 0 6px var(--ss-navy-3);
  --ss-success:#167a50; --ss-success-bg:var(--ss-mint);
  --ss-warn-text:var(--ss-gold-deep);  /* gold is never used as text on light bg; deep gold is (5.6:1 on #fff) */
  --ss-danger:#b8392c;

  /* Type */
  --ss-font-display:"Fredoka Variable","Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  --ss-font-head:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;   /* v1.15: buttons, nav, labels use Inter */
  --ss-font-body:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Fluid scale (≈1.25 ratio; min at 360px, max at 1240px) */
  --ss-fs-xs:.8125rem;                               /* 13px meta, captions */
  --ss-fs-sm:.9375rem;                               /* 15px secondary */
  --ss-fs-base:1rem;                                 /* 16px body */
  --ss-fs-md:clamp(1.0625rem,1rem + .3vw,1.1875rem); /* 17-19 card body large */
  --ss-fs-lg:clamp(1.25rem,1.1rem + .6vw,1.5rem);    /* 20-24 card titles (head) */
  --ss-fs-xl:clamp(1.5rem,1.25rem + 1.1vw,2rem);     /* 24-32 section titles (display) */
  --ss-fs-2xl:clamp(2rem,1.5rem + 2.2vw,3.25rem);    /* 32-52 greeting (display) */
  --ss-fs-count:clamp(2.25rem,1.8rem + 2vw,3.5rem);  /* countdown digits */
  --ss-lh-tight:1.1; --ss-lh-snug:1.3; --ss-lh-body:1.6;
  --ss-fw-body:400; --ss-fw-medium:500; --ss-fw-semi:600; --ss-fw-bold:700;
  --ss-tracking-head:-.01em; --ss-tracking-display:-.015em;

  /* Spacing (4px base) */
  --ss-sp-1:4px; --ss-sp-2:8px; --ss-sp-3:12px; --ss-sp-4:16px; --ss-sp-5:20px; --ss-sp-6:24px;
  --ss-sp-8:32px; --ss-sp-10:40px; --ss-sp-12:48px; --ss-sp-16:64px; --ss-sp-20:80px;
  --ss-gutter:clamp(16px,3vw,32px); --ss-max:1240px;

  /* Radii */
  --ss-r-xs:8px; --ss-r-sm:12px; --ss-r-md:16px; --ss-r-lg:20px; --ss-r-card:28px; --ss-r-pill:999px;

  /* Shadows (navy-tinted, never pure black) */
  --ss-shadow-sm:0 2px 6px -2px rgba(12,31,69,.10);
  --ss-shadow-md:0 10px 30px -14px rgba(12,31,69,.22);
  --ss-shadow-lg:0 24px 60px -24px rgba(12,31,69,.32);
  --ss-shadow-gold:0 14px 34px -12px rgba(255,200,61,.75),inset 0 -3px rgba(0,0,0,.08); /* = site .btn-gold */
  --ss-shadow-coral:0 18px 40px -14px rgba(255,122,107,.7),inset 0 -4px rgba(0,0,0,.12);

  /* Motion */
  --ss-ease:cubic-bezier(.22,1,.36,1); --ss-dur-fast:.2s; --ss-dur:.35s; --ss-dur-slow:.6s;

  /* Breakpoints (reference only; CSS vars can't be used in @media) */
  /* mobile <=640px · tablet 641-1020px (matches site menu breakpoint) · desktop >=1021px */
}
@media (prefers-reduced-motion:reduce){:root{--ss-dur-fast:0s;--ss-dur:0s;--ss-dur-slow:0s}}
/* v1.1: AA-visible focus on light surfaces */
/* v1.11: one focus ring everywhere, the gold #ffc83d ring from assets-v2/tokens.css (navy inner ring keeps it visible on cream) */
:root{--ss-focus-ring-color:var(--ss-gold);--ss-focus-ring-width:3px;--ss-focus-ring-offset:3px;
  --ss-focus-ring:0 0 0 var(--ss-focus-ring-offset) var(--ss-navy),0 0 0 calc(var(--ss-focus-ring-offset) + var(--ss-focus-ring-width)) var(--ss-gold)}
:focus-visible{outline:var(--ss-focus-ring-width) solid var(--ss-focus-ring-color);outline-offset:var(--ss-focus-ring-offset)}