/*
 * Clear Exchange design tokens: the one place for colour, type, spacing, rules and
 * radius. The shared primitives (base.css), the marketing site (site.css) and the app
 * (styles.css) use only these variables, so a rebrand means changing this file (and the
 * mark in favicon.svg), not hunting through components.
 *
 * Direction (Oct 2026): editorial. Warm paper and ink neutrals, one accent (an oxblood
 * red used sparingly for links, the live marker and figures we want read first),
 * hairline rules instead of shadows, near-square corners. Headlines are set in
 * Newsreader, a serif drawn for news reading (SIL OFL 1.1, self-hosted from /ui/fonts so
 * the CSP needs no third-party origin); UI and body text use the system sans; data uses
 * the system mono. Every text/background pair below meets WCAG 2.1 AA (4.5:1 for text,
 * 3:1 for UI parts); test/ui.test.ts checks the main pairs.
 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/ui/fonts/newsreader-500.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/ui/fonts/newsreader-400-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- brand: change these to rebrand ---- */
  --brand: #9a2a1c;              /* oxblood accent */
  --brand-hover: #7a1f14;
  --brand-foreground: #ffffff;   /* text on --brand */
  --brand-soft: #f5ebe6;         /* tinted backgrounds, used rarely */
  --brand-border: #d9b3a8;
  --brand-ink: #7a1f14;          /* accent text on --brand-soft */

  /* ---- neutrals: paper and ink ---- */
  --background: #fbfaf7;         /* paper */
  --foreground: #191917;         /* ink */
  --page: #fbfaf7;
  --card: #ffffff;
  --card-foreground: #191917;
  --muted: #f1efe9;
  --muted-foreground: #57554f;
  --subtle-foreground: #66635d;  /* non-essential text only */
  --border: #e2ded4;             /* hairline rules */
  --border-strong: #c9c4b8;
  --rule-strong: #191917;        /* the heavy rule above sections and table heads */
  --input: #8a867d;              /* input borders: >= 3:1 on paper (WCAG 1.4.11) */
  --secondary: #f1efe9;
  --secondary-foreground: #191917;
  --secondary-hover: #e6e2d9;
  --accent: #f1efe9;
  --accent-foreground: #191917;
  --header: #fbfaf7;
  --code-bg: #f1efe9;
  --code-fg: #191917;
  --code-muted: #5f5c56;
  --code-key: #191917;
  --code-string: #7a1f14;
  --inverse-bg: #191917;
  --inverse-fg: #fbfaf7;
  --inverse-muted: #b9b5ab;
  --inverse-hover: #33322e;

  /* Primary actions are ink; the accent is kept for links and markers. */
  --primary: #191917;
  --primary-hover: #33322e;
  --primary-foreground: #fbfaf7;

  /* ---- status: muted, print-like ---- */
  --success: #2f6b3a;
  --success-soft: #edf3ec;
  --success-border: #b8cfb9;
  --warning: #7d540c;
  --warning-soft: #f7f0e1;
  --warning-border: #dcc69a;
  --destructive: #9a2a1c;
  --destructive-soft: #f5ebe6;
  --destructive-border: #d9b3a8;

  /* ---- focus: a visible 2px ring, offset from the element ---- */
  --ring: #191917;
  --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);

  /* ---- type ---- */
  --font-serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-serif);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.375rem;   /* 38px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.5rem;     /* 56px */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --tracking-tight: -0.01em;
  --tracking-tighter: -0.02em;
  --tracking-wide: 0.08em;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- spacing (4px grid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- layout ---- */
  --container: 1180px;
  --container-app: 1360px;
  --measure: 36rem;       /* comfortable line length for running text */
  --header-height: 56px;

  /* ---- shape: near-square corners, no shadows (rules do the separating) ---- */
  --radius: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 3px;
  --radius-2xl: 3px;
  --radius-full: 999px;   /* only for small status dots */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --duration: 0.12s;

  /* ---- icons drawn in CSS (data: URLs are allowed by the CSP) ---- */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357554f' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfaf7' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand: #e0806f;
    --brand-hover: #eba293;
    --brand-foreground: #1a1210;
    --brand-soft: #2a1d1a;
    --brand-border: #6b3a30;
    --brand-ink: #eba293;

    --background: #161614;
    --foreground: #ecebe6;
    --page: #161614;
    --card: #1c1c1a;
    --card-foreground: #ecebe6;
    --muted: #22221f;
    --muted-foreground: #aeaba2;
    --subtle-foreground: #9c998f;
    --border: #2f2e2a;
    --border-strong: #45433d;
    --rule-strong: #ecebe6;
    --input: #75726a;
    --secondary: #26261f;
    --secondary-foreground: #ecebe6;
    --secondary-hover: #33322c;
    --accent: #26261f;
    --accent-foreground: #ecebe6;
    --header: #161614;
    --code-bg: #1f1f1c;
    --code-fg: #ecebe6;
    --code-muted: #9c998f;
    --code-key: #ecebe6;
    --code-string: #eba293;
    --inverse-bg: #ecebe6;
    --inverse-fg: #161614;
    --inverse-hover: #d6d4cc;

    --primary: #ecebe6;
    --primary-hover: #d6d4cc;
    --primary-foreground: #161614;

    --success: #8fc49a;
    --success-soft: #1a251c;
    --success-border: #3b5a40;
    --warning: #d9b46a;
    --warning-soft: #282316;
    --warning-border: #5c4b25;
    --destructive: #e0806f;
    --destructive-soft: #2a1d1a;
    --destructive-border: #6b3a30;

    --ring: #ecebe6;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeaba2' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161614' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
}