/* FontDex design tokens: "Ink wash" palette. Single source of truth for colour, type, space.
   Rules live in BRAND_RULES.md. Not linked into pages yet (Task 2 links it before store.css).
   No inline styles anywhere (strict CSP): pages use classes that read these variables. */
:root{
  /* Palette: the four Ink wash colours. Nothing else is a brand colour. */
  --ivory:#FFFFE3;      /* page background, card fill */
  --charcoal:#4A4A4A;   /* text, 2px rules, borders */
  --gray:#CBCBCB;       /* hairlines, tray panels, placeholders */
  --slate:#6D8196;      /* accent: graphics, large text, badges, focus ring (3.95:1 on ivory) */

  /* Derived from slate only so small text and buttons pass WCAG AA (verified, see BRAND_RULES.md) */
  --slate-ink:#4F6275;  /* link text, button fill: 6.19:1 on ivory, ivory on it 6.19:1 */
  --slate-deep:#475A6C; /* hover/pressed state of --slate-ink: 7.01:1 on ivory */

  /* Status colours: functional only (form errors, order states), never decoration */
  --ok:#3F6B4F; --warn:#8A5A00; --bad:#A33A3A;

  /* Semantic roles: components use these, not the raw colours */
  --bg:var(--ivory);
  --surface:#FFFFFF;           /* neutral white card on ivory, used sparingly */
  --tray:rgba(74,74,74,.06);   /* charcoal at 6%: recessed panels */
  --text:var(--charcoal);
  --text-soft:rgba(74,74,74,.78);   /* secondary text, 4.76:1 on ivory */
  --rule:2px solid var(--charcoal);
  --hairline:1.5px solid var(--gray);
  --accent:var(--slate);
  --accent-ink:var(--slate-ink);
  --accent-ink-hover:var(--slate-deep);
  --on-accent:var(--ivory);
  --focus:3px solid var(--slate-ink);

  /* Type: self-hosted Sora (display) + Inter (body) already ship with the store; mono is system */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --step--1:clamp(.82rem,.8rem + .1vw,.9rem);
  --step-0:clamp(.95rem,.92rem + .15vw,1.05rem);
  --step-1:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.25rem + 1.2vw,2.1rem);
  --step-3:clamp(2rem,1.4rem + 3vw,3.6rem);

  /* Space and layout */
  --space-1:.375rem; --space-2:.75rem; --space-3:1.125rem; --space-4:1.75rem; --space-5:2.75rem; --space-6:4.5rem;
  --page:76rem;     /* max page width */
  --measure:62ch;   /* max line length for reading text */
  --radius:6px;     /* small, deliberate; pills only for badges */

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --beat:.32s;
}

@media (prefers-reduced-motion:reduce){
  :root{--beat:0s}
}