/* Design tokens (E14-1, ADR-025). Every color pair used for text is
 * contrast-checked in CI (tokens_test.go, WCAG AA): text tokens against
 * both backgrounds at >= 4.5:1, status fg on status-subtle bg at
 * >= 4.5:1, on-emphasis against emphasis at >= 3:1 (UI components), and
 * the ANSI terminal set against the log pane. The section markers below
 * are load-bearing — the test parses them.
 *
 * Theme selection: OS preference by default; an explicit choice sets
 * data-theme on <html> (the nonce'd boot script applies it pre-paint)
 * and wins in both directions.
 *
 * Identity: near-monochrome chrome over warm tinted neutrals
 * (color is reserved for status and code) — dev-tool bones,
 * first-party face. Nothing outside this file may name a color.
 */

/* tokens:shared */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale: 12/14/16/20/24/32. */
  --text-1: 0.75rem;
  --text-2: 0.875rem;
  --text-3: 1rem;
  --text-4: 1.25rem;
  --text-5: 1.5rem;
  --text-6: 2rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-code: 1.45;
  --weight-normal: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  --radius-1: 6px;
  --radius-2: 12px;

  --measure: 72rem; /* page content max width */

  /* Motion: hover/focus/expand only, always through these two
   * durations so reduced-motion is a single override below. */
  --ease-1: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;

  --shadow-1: 0 1px 3px rgba(22, 20, 17, 0.12);
  --shadow-2: 0 8px 32px rgba(22, 20, 17, 0.35);
  --overlay: rgba(15, 14, 12, 0.45);

  /* The CI job log is a terminal: one dark pane in BOTH themes, so its
   * palette is shared, not per-theme. Warm neutral black to match. */
  --color-log-bg: #171512;
  --color-log-fg: #cfcbc2;
  --color-ansi-black: #8f8a80;
  --color-ansi-red: #f28195;
  --color-ansi-green: #5fc476;
  --color-ansi-yellow: #d5a439;
  --color-ansi-blue: #82b4f5;
  --color-ansi-magenta: #cba6f7;
  --color-ansi-cyan: #6fd3dc;
  --color-ansi-white: #f2f0ea;
}

/* tokens:light */
:root {
  color-scheme: light;
  --color-bg: #fdfcfa;
  --color-bg-subtle: #f5f3ee;
  --color-fg: #24211c;
  --color-fg-muted: #5b564c;
  --color-link: #24211c;
  --color-border: #d8d2c8;
  --color-border-muted: #e7e3dc;
  --color-emphasis: #24211c;
  --color-on-emphasis: #ffffff;
  --color-accent-subtle: #ece9e3;
  --color-accent-muted: #cfcac1;
  --color-danger: #a31226;
  --color-danger-subtle: #f9dde0;
  --color-danger-muted: #f0b6bd;
  --color-success: #1b6b39;
  --color-success-subtle: #dff0e3;
  --color-success-muted: #a8dcb5;
  --color-warning: #7d5300;
  --color-warning-subtle: #f6e8c3;
  --color-attention: #9c440c;
  --color-attention-subtle: #f7e0cd;
  --color-neutral: #5b564c;
  --color-neutral-subtle: #eae6df;
  --color-dot-blue: #4a6d9c;
  --color-dot-purple: #7d6a9e;
  --color-heat-1: #e6e2db;
  --color-heat-2: #c0bab0;
  --color-heat-3: #8d8478;
  --color-heat-4: #3a3730;
  --color-hl-k: #8626c9;  /* keywords, builtins, preproc, tags */
  --color-hl-f: #a81d7e;  /* functions, classes, decorators */
  --color-hl-s: #22577e;  /* strings */
  --color-hl-n: #0f699e;  /* numbers */
  --color-hl-c: #6e6960;  /* comments */
  --color-hl-a: #4f46c4;  /* attributes */
  --color-hl-o: #5f5a51;  /* operators */
  --color-hl-ins: #1b6b39;
  --color-hl-del: #a31226;
}

/* tokens:dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #151413;
  --color-bg-subtle: #1e1c1a;
  --color-fg: #f0eeea;
  --color-fg-muted: #aaa59c;
  --color-link: #f0eeea;
  --color-border: #3b3833;
  --color-border-muted: #2b2926;
  --color-emphasis: #f0eeea;
  --color-on-emphasis: #151413;
  --color-accent-subtle: #262420;
  --color-accent-muted: #4a463f;
  --color-danger: #f28195;
  --color-danger-subtle: #46202b;
  --color-danger-muted: #6b3540;
  --color-success: #5fc476;
  --color-success-subtle: #1d3f28;
  --color-success-muted: #326043;
  --color-warning: #d5a439;
  --color-warning-subtle: #3b3115;
  --color-attention: #e88a58;
  --color-attention-subtle: #432a18;
  --color-neutral: #aaa59c;
  --color-neutral-subtle: #2c2a26;
  --color-dot-blue: #82b4f5;
  --color-dot-purple: #a99bc7;
  --color-heat-1: #2a2825;
  --color-heat-2: #45423c;
  --color-heat-3: #7d786e;
  --color-heat-4: #cfcabf;
  --color-hl-k: #c79bf2;
  --color-hl-f: #ef83c8;
  --color-hl-s: #9ecbf0;
  --color-hl-n: #7db8f0;
  --color-hl-c: #918c82;
  --color-hl-a: #a3a6f5;
  --color-hl-o: #b5b0a6;
  --color-hl-ins: #5fc476;
  --color-hl-del: #f28195;
}

/* tokens:end */

/* OS dark preference applies the dark palette unless the user explicitly
 * chose light. Values mirror the tokens:dark block exactly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #151413;
    --color-bg-subtle: #1e1c1a;
    --color-fg: #f0eeea;
    --color-fg-muted: #aaa59c;
    --color-link: #f0eeea;
    --color-border: #3b3833;
    --color-border-muted: #2b2926;
    --color-emphasis: #f0eeea;
    --color-on-emphasis: #151413;
    --color-accent-subtle: #262420;
    --color-accent-muted: #4a463f;
    --color-danger: #f28195;
    --color-danger-subtle: #46202b;
    --color-danger-muted: #6b3540;
    --color-success: #5fc476;
    --color-success-subtle: #1d3f28;
    --color-success-muted: #326043;
    --color-warning: #d5a439;
    --color-warning-subtle: #3b3115;
    --color-attention: #e88a58;
    --color-attention-subtle: #432a18;
    --color-neutral: #aaa59c;
    --color-neutral-subtle: #2c2a26;
    --color-dot-blue: #82b4f5;
    --color-dot-purple: #a99bc7;
    --color-heat-1: #2a2825;
    --color-heat-2: #45423c;
    --color-heat-3: #7d786e;
    --color-heat-4: #cfcabf;
    --color-hl-k: #c79bf2;
    --color-hl-f: #ef83c8;
    --color-hl-s: #9ecbf0;
    --color-hl-n: #7db8f0;
    --color-hl-c: #918c82;
    --color-hl-a: #a3a6f5;
    --color-hl-o: #b5b0a6;
    --color-hl-ins: #5fc476;
    --color-hl-del: #f28195;
  }
}

/* Reduced motion: every transition in app.css runs through --dur-*, so
 * honoring the preference is this one override. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
  }
}