/* Design tokens: the ONE place colors, type, spacing, and motion are
   defined. Direction D "dispatch board" palette, light and dark pairs
   via light-dark(). Components reference these and never hardcode. */

:root {
  color-scheme: light dark;

  --font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;

  /* type scale: pick a step, never a number */
  --fs-xs: 0.75rem;   /* fine print */
  --fs-sm: 0.8125rem; /* labels, table text */
  --fs-md: 0.9375rem; /* body */
  --fs-lg: 1.15rem;   /* section headings */
  --fs-xl: 1.45rem;   /* page headings */

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius: 8px;
  --radius-lg: 12px;
  --tap: 44px;        /* comfortable touch target; floor is 24px */

  /* palette: light / dark pairs (D board) */
  --bg:        light-dark(#eef1f4, #0f1216);
  --surface:   light-dark(#ffffff, #181d24);
  --surface-2: light-dark(#f4f6f8, #1e242c);
  --board-col: light-dark(#e3e8ee, #101720);
  --ink:       light-dark(#16202e, #e8eef5);
  --muted:     light-dark(#66707c, #97a3b1);
  --line:      light-dark(#e2e7ed, #2a313b);

  /* stop cards sit ON a column ON the page: three distinct steps so the
     tiles pop instead of merging with the background */
  --card:      light-dark(#ffffff, #232c37);
  --card-line: light-dark(#d5dce4, #3a4552);

  /* the Schedule board canvas: white behind the cards in light, unchanged
     dark ground in dark. Lanes are separated by rules, not panels. */
  --board-canvas: light-dark(#ffffff, #0f1216);

  --brand:      light-dark(#1467c2, #4b9fe8);
  --brand-ink:  light-dark(#ffffff, #08131c);
  --brand-soft: light-dark(#e3effb, #12303f);

  --ok:      light-dark(#1a9a52, #3fdd8d);
  --ok-soft: light-dark(#e7f5ec, #12291c);
  --warn:      light-dark(#8a5b00, #ffb454);
  --warn-soft: light-dark(#fdeecd, #2a2410);
  --err:      light-dark(#b3362b, #ff7b72);
  --err-soft: light-dark(#fbe9e7, #2c1416);

  /* exam families: strong + soft chip pairs */
  --ex-ven:       light-dark(#0d7a74, #4fd0c3);
  --ex-ven-soft:  light-dark(#dcf4f2, #0e2f2c);
  --ex-art:       light-dark(#5b43d6, #b9a5ff);
  --ex-art-soft:  light-dark(#ece7ff, #221a3d);
  --ex-echo:      light-dark(#96660a, #ffc555);
  --ex-echo-soft: light-dark(#fcf0d7, #2e2410);
  --ex-us:        light-dark(#2a6cb0, #8fb8dd);
  --ex-us-soft:   light-dark(#e2eefa, #142838);

  --shadow: 0 10px 30px light-dark(rgba(30,40,60,.10), rgba(0,0,0,.5));
  --card-shadow: 0 1px 3px light-dark(rgba(20,30,50,.12), rgba(0,0,0,.55)),
                 0 1px 1px light-dark(rgba(20,30,50,.08), rgba(0,0,0,.4));

  /* motion tokens: strong curves, one source of truth, never inline */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* enter/exit, default */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --dur-press: 140ms;
  --dur-fast: 180ms;
  --dur-med: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  /* gentler, not zero: keep opacity/color transitions, drop movement */
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-fast);
    transition-property: opacity, color, background-color, border-color;
  }
}