/* ==========================================================
   tokens.css — Dynanca design tokens (presentation layer only)
   ----------------------------------------------------------
   Semantic CSS custom properties for light + dark themes.
   Theme is selected via [data-theme="light" | "dark"] on <html>,
   set by js/theme.js (persisted to localStorage, with a
   prefers-color-scheme fallback and a graceful no-storage path).

   This file governs COLOR + SHAPE + MOTION tokens only. It does
   not know about scenarios, assessment, or any engine behavior —
   see docs/ENGINE-CONTRACT.md. Changing values here can never
   change what a Check passes/fails or how Python code executes.

   Palette philosophy: Dynanca is a calm, warm, paper-like
   reading environment in light mode (not a cold white SaaS grid),
   and a genuinely-designed dark mode in dark mode — warm charcoal,
   not an inverted/blue-black theme — so the identity carries over
   in both.
   ========================================================== */

:root {
  /* ---------- typography ---------- */
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---------- spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- shape ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius: var(--radius-md);

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.18s;
}

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

/* ================= LIGHT (default) ================= */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f1ea;
  --surface: #fffdf9;
  --surface-elevated: #ffffff;

  --text: #2b2a27;
  --text-soft: #5a5650;
  /* NOTE: the original inline stylesheet used --ink-faint: #8a857d here,
     which measures 3.26–3.61:1 against --bg/--surface — below WCAG AA's
     4.5:1 for normal text (confirmed via axe-core: 307 color-contrast
     violations on the original home page alone, all from this one token
     powering .muted/.tag/.catalog-group-title/.sv-label). Darkened to
     meet 4.5:1+ against both --bg and --surface as part of this pass's
     accessibility improvements — same warm-gray hue, just deep enough. */
  --text-muted: #6b665d;

  --border: #e8e1d6;
  --border-strong: #d6cdbf;

  --accent: #b8654a;
  --accent-strong: #a35138; /* solid-fill buttons / small text on accent — meets 4.5:1 with white */
  --accent-soft: #e8d5cb;
  --accent-ink: #ffffff; /* text color placed on top of --accent-strong */

  --success: #4f7141;
  --success-soft: #dce6d4;
  --success-ink: #3d5232;

  --error: #a8433f;
  --error-soft: #ecd9d7;
  --error-ink: #6b2e2b;

  --attention: #8a6a2f;
  --attention-soft: #fdf6ec;
  --attention-ink: #6b5532;

  --code-bg: #fbf8f2;
  --code-text: #2b2a27;

  --shadow-sm: 0 1px 2px rgba(60, 50, 30, 0.04);
  --shadow-md: 0 1px 2px rgba(60, 50, 30, 0.04), 0 8px 24px rgba(60, 50, 30, 0.06);
  --scrim: rgba(60, 50, 30, 0.35);
}

/* ================= DARK ================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1a1815;
  --surface: #221f1c;
  --surface-elevated: #2a2621;

  --text: #ece6dc;
  --text-soft: #c2bbae;
  --text-muted: #b0a89b;

  --border: #38332c;
  --border-strong: #8d8375;

  --accent: #e08a68;
  --accent-strong: #e08a68; /* already >=4.5:1 with --accent-ink on dark bg */
  --accent-soft: #4a3226;
  --accent-ink: #201209;

  --success: #93c17f;
  --success-soft: #2a3524;
  --success-ink: #dcefd2;

  --error: #e2938d;
  --error-soft: #3c2725;
  --error-ink: #f6dcda;

  --attention: #e0c079;
  --attention-soft: #3a331f;
  --attention-ink: #f3e6c8;

  --code-bg: #171512;
  --code-text: #ece6dc;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.35);
  --scrim: rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:root, :root[data-theme="light"] {
 --plot-1: #a35138; --plot-2: #3f6f8f; --plot-3: #4f7141;
 --plot-4: #8065a8; --plot-5: #8a601c; --plot-6: #397d78;
}
:root[data-theme="dark"] {
 --plot-1: #f09c7d; --plot-2: #8ec2e0; --plot-3: #a9ce91;
 --plot-4: #c4a6ee; --plot-5: #e5bc70; --plot-6: #8bd4c5;
}

/* ==========================================================
   FILSAFAT - 1 additions (additive; nothing above is removed)
   ----------------------------------------------------------
   - Source Serif 4 (SIL OFL 1.1, bundled locally in assets/fonts)
     for long-form reading; UI chrome stays on the system sans.
   - Role tokens for the eight argumentative functions. Colour is
     never the only signal: every role also has a text chip and a
     distinct border pattern (see css/content.css).
   ========================================================== */
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  --reading: "Source Serif 4", var(--serif);
  --measure: 70ch;
  --header-h: 60px;
  --tap: 44px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}

:root, :root[data-theme="light"] {
  --role-position: #954a33;     --role-position-soft: #f3e3db;
  --role-definition: #2f5f84;   --role-definition-soft: #dfe9f1;
  --role-premises: #2f6b66;     --role-premises-soft: #dcecea;
  --role-argumentation: #5d5a1f;--role-argumentation-soft: #ecebd6;
  --role-counter: #9a3a36;      --role-counter-soft: #f2dddb;
  --role-rebuttal: #674f97;     --role-rebuttal-soft: #e7e0f2;
  --role-synthesis: #3d6a32;    --role-synthesis-soft: #e0ebd9;
  --role-limitations: #7c5a14;  --role-limitations-soft: #f2e8d3;
  --mark-bg: #f5df9a;           --mark-text: #2b2a27;
  --panel-bg: var(--surface);
  --rule: #e3dbcf;
}
:root[data-theme="dark"] {
  --role-position: #f09c7d;     --role-position-soft: #3b2a22;
  --role-definition: #8ec2e0;   --role-definition-soft: #1f2d37;
  --role-premises: #8bd4c5;     --role-premises-soft: #1c302d;
  --role-argumentation: #d8d38a;--role-argumentation-soft: #2f2e1c;
  --role-counter: #f0a29c;      --role-counter-soft: #3a2422;
  --role-rebuttal: #c4a6ee;     --role-rebuttal-soft: #2c2538;
  --role-synthesis: #a9ce91;    --role-synthesis-soft: #23301f;
  --role-limitations: #e5bc70;  --role-limitations-soft: #352b18;
  --mark-bg: #6b5420;           --mark-text: #fff6df;
  --panel-bg: var(--surface);
  --rule: #3a342d;
}