/* ==========================================================================
   Design tokens — single source of truth.

   Rebuilt on Dsquares' own colours (2026-10-15): the navy and blue of the
   wordmark in img/Dsq-logo.svg, where the page used to borrow the
   segmentation UI's blue and its purple "Generate" gradient. Nura adds one
   colour of its own, its light (--nura-light), used only in its mark and its
   motion — never for text.

   Two themes, light and dark: the system's setting until the operator picks
   one with the switch in the bar (js/theme.js, main.js). Every
   text token is at least 4.5:1 on every surface token of its theme, and the
   input border 3:1 (WCAG 1.4.3, 1.4.11) — checked when the values were
   chosen; recheck with axe when one changes.

   The names from before the rebuild are kept as aliases at the end, so a
   component that still says --border-card or --select-border draws in the
   new palette without being touched.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand --- */
  --ds-navy: #062f87;            /* the wordmark */
  --ds-blue: #0971ce;            /* the squares */
  --nura-light: #5ccbff;         /* Nura's light: the lit square, the glow */
  --brand-grad: linear-gradient(135deg, var(--ds-navy), var(--ds-blue));

  /* --- Surfaces --- */
  --page-bg: #f4f6fa;
  --surface: #ffffff;
  --surface-raised: #f8fafd;     /* hover, a card's footer */
  --surface-sunken: #eef2f8;     /* table heads, code, the history's current row */
  --accent-soft: #eaf2fc;        /* the operator's own turn, selected things */
  --warn-soft: #fff6e8;
  --danger-soft: #fdf0f3;
  --success-soft: #eaf6f1;

  /* --- Borders --- */
  --border: #e3e8f0;
  --border-strong: #cfd7e3;
  --border-input: #7f8ba0;       /* 3.18 on the page, 3.44 on a surface */
  --warn-border: #f0c98e;
  --danger-border: #eeb3c1;

  /* --- Text --- */
  --text-strong: #0d1b2e;
  --text: #24364d;
  --text-body: #33465e;
  --text-muted: #4f5e73;
  --text-faint: #5a687d;
  --text-on-accent: #ffffff;

  /* --- Accent, state --- */
  --accent: #0a62be;             /* links, icons, focus — text on any surface */
  --accent-fill: #0a62be;        /* a filled button, under white text */
  --accent-fill-hover: #08529f;
  --pos: #0a7350;
  --neg: #be2448;
  --warn: #8a4700;
  --danger-fill: #be2448;        /* a filled Delete or high-risk Confirm, under white text */

  /* --- Type ---
     One family for everything the page writes, Plus Jakarta Sans, with IBM
     Plex Sans Arabic behind it: Arabic glyphs fall through to it, so an
     Arabic answer is set as carefully as an English one — and only then is
     it downloaded (Google serves it by Unicode range). Mono, for codes and
     the clock, is the system's own: a web font for a few digits was a
     download every first visit paid (2026-10-15). */
  --font-ui: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* --- Radius --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(13, 27, 46, .06);
  --shadow-md: 0 1px 2px rgba(13, 27, 46, .05), 0 4px 14px rgba(13, 27, 46, .06);
  --shadow-lg: 0 2px 6px rgba(13, 27, 46, .05), 0 16px 40px rgba(13, 27, 46, .10);
  --scrim: rgba(8, 15, 30, .42);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* --- Layout ---
     The conversation's reading column. Prose past ~100 characters a line is
     hard to follow, and 1150px (2026-10-05) was set so the turn diagram fit
     on one line; it wraps now (2026-10-06), so the column can be one people
     read comfortably. */
  --column: 800px;
  --sidebar-w: 280px;
}

/* Dark: chosen by js/theme.js before the page draws — the operator's switch
   in the bar, or else their system's setting. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --page-bg: #0a111e;
  --surface: #101a2c;
  --surface-raised: #142036;
  --surface-sunken: #0c1424;
  --accent-soft: #13294a;
  --warn-soft: #2a2012;
  --danger-soft: #2c1520;
  --success-soft: #0f2a23;

  --border: #1f2b42;
  --border-strong: #2c3a56;
  --border-input: #6a7a97;
  --warn-border: #6b4d1f;
  --danger-border: #6e2a3d;

  --text-strong: #f2f6fc;
  --text: #dce4f0;
  --text-body: #c6d1e2;
  --text-muted: #a3b1c7;
  --text-faint: #97a6bd;

  --accent: #6db3f8;
  --accent-fill: #1c6cc9;
  --accent-fill-hover: #2a7ad6;
  --pos: #4ccb9a;
  --neg: #ff8098;
  --warn: #f2b35e;
  --danger-fill: #c42b4e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45);
  --scrim: rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   The names before the rebuild, pointing at the new palette.
   -------------------------------------------------------------------------- */

:root {
  --surface-panel: var(--accent-soft);
  --surface-hover: var(--surface-raised);
  --surface-disabled: var(--surface-sunken);
  --border-page: var(--border);
  --border-soft: var(--border);
  --border-card: var(--border);
  --border-panel: var(--border-strong);
  --border-quiet: var(--border-strong);
  --text-soft: var(--text-muted);
  --text-nav: var(--text);
  --accent-nav: var(--accent-fill-hover);
  --select-bg: var(--accent-soft);
  --select-border: var(--accent);
  --select-nav: var(--accent-soft);
  --grad-from: var(--ds-navy);
  --grad-to: var(--ds-blue);
  --chip-bg: var(--surface-sunken);
  --shadow-card: var(--shadow-sm);
  --shadow-hover: var(--shadow-md);
}