/* Design tokens. Brand layer from the shadcn Claude DESIGN.md (canvas, coral, type ladder, radii,
   spacing); product layer from the CDS tokens measured on academy.claude.com (controls, chart
   palette, motion, focus). docs/cost-intelligence-activity-ux.md section 13 is the source. */
:root {
  /* brand surfaces and text */
  --canvas: #f7f4ec;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-strong: #e8e0d2;
  --surface-dark: #181715;
  --surface-dark-elevated: #252320;
  --surface-dark-soft: #1f1e1b;
  /* The code block is a box in both themes: in light it is the dark surface; in dark, where
     the canvas is that same dark, it drops below the canvas and takes a hairline. */
  --code-bg: #181715;
  --code-border: #181715;
  --ink: #141413;
  --body: #3d3d3a;
  --body-strong: #252523;
  --muted: #4f4d48;
  --muted-soft: #6c6a64;
  --on-dark: #faf9f5;
  --on-dark-soft: #b8b5ad;
  --primary: #cc785c;
  --primary-active: #a9583e;
  --primary-disabled: #e6dfd8;
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;
  --success: #5db872;
  --warning: #d4a017;
  --error: #c64545;

  /* product layer (CDS), light */
  --fill-accent: #2a78d6;
  --fill-accent-hover: #3987e5;
  --text-accent: #184f95;
  --text-danger: #8e2626;
  --text-success: #006300;
  --text-warning: #734500;
  --bg-accent: #cde2fb;
  --bg-danger: #fad6d6;
  --bg-success: #caeac7;
  --bg-warning: #f9dca4;
  --bg-neutral: rgba(20, 20, 19, 0.05);
  --border: rgba(20, 20, 19, 0.10);
  /* Outlines are warm, not gray: the ink alpha read as a black control on the cream canvas.
     rgb(193,188,178) on the canvas, 1.8:1, above the 1.5:1 the ink alpha gave. */
  --border-strong: rgba(60, 45, 20, 0.30);
  /* 0.42 is rgb(153,153,150) on the canvas, 3.1:1: an off switch is visible before touch. */
  --switch-track: rgba(20, 20, 19, 0.42);
  --switch-track-on: var(--fill-accent);
  /* Knob, thumb and scrollbar sit on the warm ladder: no pure white surface in light mode. */
  --switch-knob: var(--canvas);
  --segment-track: rgba(20, 20, 19, 0.05);
  --segment-thumb: var(--surface-strong);
  --scrollbar-thumb: #c9c2b6;
  --control-bg: var(--surface-soft);
  --tooltip-bg: #141413;
  --tooltip-fg: #faf9f5;
  --shadow-sm: 0 1px 2px 0 rgba(11, 11, 11, 0.06), 0 2px 8px 0 rgba(11, 11, 11, 0.08);
  --shadow-md: 0 2px 4px 0 rgba(11, 11, 11, 0.07), 0 6px 16px 0 rgba(11, 11, 11, 0.08);
  --shadow-lg: 0 4px 8px 0 rgba(11, 11, 11, 0.08), 0 12px 28px -2px rgba(11, 11, 11, 0.08);
  --focus: inset 0 0 0 1px var(--canvas), 0 0 0 2px var(--fill-accent), 0 0 6px 1px var(--bg-accent);

  /* chart palette (CDS categorical), light, each paired with a pattern in app.css */
  --band-uncached: #2a78d6;
  --band-write5m: #eb6834;
  --band-write1h: #eda100;
  --band-read: #a0e1c9;
  --band-output: #862a4c;
  --band-system: #85837b;
  --band-prior: #6b5bd2;
  /* line variants: a stroke or a point needs 3:1 on the card, which the pale area fills do not give */
  --band-uncached-line: #2a78d6;
  --band-write5m-line: #c24b1c;
  --band-write1h-line: #9a6a00;
  --band-read-line: #2f8f6e;
  --band-output-line: #862a4c;
  /* the before line: 3.4:1 on the card, so the number a person is asked to compare is visible */
  --ghost: #7f7d75;
  --chart-reference: #898781;
  --chart-grid: rgba(20, 20, 19, 0.10);
  --chart-axis: #c3c2b7;
  --outcome-solved: #0ca30c;
  --outcome-failed: #d03b3b;
  --outcome-capped: #ec835a;
  --outcome-waiting: #a5a49a;
  --point: var(--primary);

  /* type */
  --font-display: "Copernicus", "Tiempos Headline", "Cormorant Garamond", Georgia, serif;
  --font-sans: "StyreneB", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* radii and spacing */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* motion (CDS easings; durations from the UX spec) */
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --ease-snap: cubic-bezier(.32, .72, 0, 1);
  --ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);
  --dur-fast: 60ms; --dur-snap: 120ms; --dur-base: 200ms; --dur-morph: 400ms; --dur-flow: 600ms;
}

:root[data-mode="dark"] {
  --canvas: #181715;
  --surface-soft: #1f1e1b;
  --surface-card: #252320;
  --surface-strong: #2c2c2a;
  --ink: #faf9f5;
  --body: #e1e0d9;
  --body-strong: #f3f3f0;
  --muted: #c3c0b8;
  --muted-soft: #a09d96;
  --hairline: #383835;
  --hairline-soft: #2c2c2a;
  --code-bg: #0f0e0d;
  --code-border: #383835;
  --primary-disabled: #454442;
  --fill-accent: #3987e5;
  --text-accent: #6da7ec;
  --text-danger: #ec7e7e;
  --text-success: #55bf50;
  --text-warning: #f9c868;
  --bg-accent: #032042;
  --bg-danger: #3c0e0e;
  --bg-success: #11260f;
  --bg-warning: #311a00;
  --bg-neutral: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --switch-track: rgba(255, 255, 255, 0.40);
  --switch-knob: #f3f3f0;
  --segment-track: rgba(255, 255, 255, 0.06);
  --segment-thumb: #3b3b38;
  --scrollbar-thumb: #4a4844;
  --control-bg: var(--surface-soft);
  --tooltip-bg: #383835;
  --tooltip-fg: #faf9f5;
  --focus: inset 0 0 0 1px var(--canvas), 0 0 0 2px var(--fill-accent), 0 0 6px 1px rgba(24, 79, 149, 0.6);
  --band-uncached: #3987e5;
  --band-write5m: #d95926;
  --band-write1h: #c98500;
  --band-read: #7ad7b4;
  --band-output: #e87ba4;
  --band-system: #75736c;
  --band-prior: #9d8fff;
  --band-uncached-line: #3987e5;
  --band-write5m-line: #d95926;
  --band-write1h-line: #c98500;
  --band-read-line: #7ad7b4;
  --band-output-line: #e87ba4;
  --ghost: #7a7871; /* 3.5:1 on the dark card */
  --chart-reference: #97958d;
  --chart-grid: rgba(255, 255, 255, 0.10);
  --chart-axis: #383835;
  --outcome-waiting: #5f5e5a;
}