/* tokens.css -- theme layer. Colours/fonts come from ../brand/scs-tokens.css
   (loaded before this file); this file adds the roles, radius and motion
   tokens the component CSS reads. No invented colours: every --role-* below
   resolves to one of the real SCS tokens. */
:root {
  /* ---- role aliases (component CSS should prefer these over raw tokens,
     so a future re-theme only touches this file) ---- */
  --role-bg: var(--bg);
  --role-bg-soft: var(--bg-soft);
  --role-surface-dark: var(--charcoal);
  --role-surface-darker: var(--ink);
  --role-surface-accent: var(--sage);
  --role-text: var(--ink);
  --role-text-muted: var(--ink-muted);
  --role-text-on-dark: var(--bg-soft);
  --role-label-on-dark: var(--sage);
  --role-accent: var(--charcoal-soft);
  --role-line: var(--line);

  --radius: 4px;

  /* ---- motion tokens ---- */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);   /* expressive out -- for entrances/reveals */
  --ease-ui: cubic-bezier(0.65, 0, 0.35, 1);       /* snappy in-out -- for interactive UI */
  --ease-press: cubic-bezier(0.4, 0, 1, 1);        /* quick in -- for press/active states */

  --dur-fast: 250ms;
  --dur-base: 400ms;
  --dur-slow: 650ms;

  --header-height: 76px;
  --header-height-mobile: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}