/* The Prediction Machine — semantic design tokens.
   Light and dark are independently chosen palettes (not inversions).
   Every pairing tested for WCAG 2.2 AA. Meaning never by colour alone. */

:root {
  /* Typography */
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Arial, sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --leading: 1.6;
  --measure: 68ch;

  /* Shape & spacing */
  --radius: 10px;
  --radius-lg: 16px;
  --gap: 0.75rem;
  --target: 44px;

  /* Motion */
  --dur-fast: 160ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* ---- Light theme (default) ---- */
  --bg: #FAF6EF;
  --surface: #FFFFFF;
  --surface-raised: #F1EBDE;
  --text: #23252B;
  --text-2: #52565F;
  --border: #C6BFAE;
  --focus: #1D4ED8;
  --interactive: #0B6664;
  --visited: #6B4487;
  --success: #22633A;
  --caution: #7A5000;
  --error: #A4201B;

  /* Series semantic categories */
  --c-input: #0E7C7B;       /* learner input — rounded rectangle */
  --c-process: #3D5A80;     /* model processing — hexagon */
  --c-output: #8A5A00;      /* model output text-safe — right-notched rect */
  --c-output-fill: #EE9B00; /* output fills, large areas only */
  --c-knowledge: #3A5A40;   /* stored knowledge — shelf/cylinder */
  --c-tool: #495057;        /* tools — gear-cornered square */
  --c-warn: #AE2012;        /* uncertainty — dashed + hatch */
  --c-human: #7D4F9A;       /* human decision — circle with tick */
  --c-input-soft: #DFF0EF;
  --c-process-soft: #E3EAF3;
  --c-output-soft: #FBEED3;
  --c-warn-soft: #F7E3E0;
  --c-human-soft: #EFE6F6;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg: #16181D;
  --surface: #1E2127;
  --surface-raised: #272B33;
  --text: #E8E6E1;           /* softened, not pure white */
  --text-2: #B3B7BF;
  --border: #4A505B;
  --focus: #93C5FD;
  --interactive: #56C4C1;
  --visited: #CBA8E8;
  --success: #85CC94;
  --caution: #E6BB63;
  --error: #F49A90;

  --c-input: #56C4C1;
  --c-process: #92B4DE;
  --c-output: #EFBD53;
  --c-output-fill: #C98F1E;
  --c-knowledge: #8FC29B;
  --c-tool: #A9B0BA;
  --c-warn: #F49A90;
  --c-human: #CBA8E8;
  --c-input-soft: #123B3A;
  --c-process-soft: #1F2E42;
  --c-output-soft: #3D3010;
  --c-warn-soft: #43201D;
  --c-human-soft: #34263F;
}

/* System preference when no explicit choice stored */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #16181D; --surface: #1E2127; --surface-raised: #272B33;
    --text: #E8E6E1; --text-2: #B3B7BF; --border: #4A505B;
    --focus: #93C5FD; --interactive: #56C4C1; --visited: #CBA8E8;
    --success: #85CC94; --caution: #E6BB63; --error: #F49A90;
    --c-input: #56C4C1; --c-process: #92B4DE; --c-output: #EFBD53;
    --c-output-fill: #C98F1E; --c-knowledge: #8FC29B; --c-tool: #A9B0BA;
    --c-warn: #F49A90; --c-human: #CBA8E8;
    --c-input-soft: #123B3A; --c-process-soft: #1F2E42;
    --c-output-soft: #3D3010; --c-warn-soft: #43201D; --c-human-soft: #34263F;
  }
}

/* ---- High contrast overlay (works over light or dark) ---- */
[data-contrast="high"] {
  --text: #000000; --text-2: #1F2227; --border: #000000;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-raised: #F2F2F2;
  --focus: #0000CC;
}
[data-theme="dark"][data-contrast="high"] {
  --text: #FFFFFF; --text-2: #E6E6E6; --border: #FFFFFF;
  --bg: #000000; --surface: #0A0A0A; --surface-raised: #1A1A1A;
  --focus: #99CCFF;
}

/* ---- Text size (base 18px = 112.5%; XL ≈ 200% of standard) ---- */
html { font-size: 112.5%; }
html[data-textsize="s"]  { font-size: 100%; }
html[data-textsize="l"]  { font-size: 140%; }
html[data-textsize="xl"] { font-size: 225%; }

/* ---- Reduced motion: system preference or manual override ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-slow: 0ms; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
[data-motion="reduce"] { --dur-fast: 0ms; --dur-slow: 0ms; }
[data-motion="reduce"] * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }