/*
 * Design tokens — the settled values from docs/architecture/09-visual-design.md
 * (ported from visual-specimen.html). A single source of truth for type, spacing,
 * color, shape, and motion, themed by overriding the role tokens on a
 * `[data-theme]` root. Components consume these tokens ONLY — never raw hexes.
 *
 * Inspired by the IBM Design Language / Carbon (structure borrowed, color free);
 * Carbon is not a dependency — the values are transcribed. See doc §2 for the
 * deliberate divergences (square chrome, open accent/theming).
 */
:root {
  /* Type — IBM Plex (self-hosted via @fontsource, wired in main.tsx) */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  --font-size-base: 14px;

  /* Spacing — 8px base unit (2/4 as sub-steps) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Iconography — Carbon icon scale (arch 09 §5.3). Icons are SVG drawn with
     fill: currentColor; 16px is the default, paired to 14px body text. */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* Shape — square chrome (icons keep their own rounded geometry) */
  --radius: 0px;
  --border-width: 1px;

  /* Layout */
  --header-height: 48px;

  /* Control scale (arch 09 §4) — every interactive control is one of exactly two
     heights. 32px is THE control height: buttons, inputs, selects, segmented
     controls, icon buttons — anything that sits in a toolbar or form row. 40px is
     reserved for standalone primary CTAs (e.g. the library's Build Chart) and
     modal footers. No other control heights exist; a third value is drift. */
  --control-height: 32px;
  --control-height-lg: 40px;

  /* Motion — productive only; neutralized under prefers-reduced-motion in base.css */
  --dur-fast: 70ms;
  --dur-fast-2: 110ms;
  --dur-moderate: 150ms;
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);

  /* Status — color carries meaning only (light defaults; overridden in dark) */
  --support-error: #da1e28;
  --support-success: #198038;
  --support-warning: #f1c21b;
  /* Warning foreground: the raw yellow fails contrast on light surfaces, so status
     glyphs/text use a darkened amber. Dark theme keeps the yellow (legible on dark). */
  --support-warning-fg: #8a6d00;
  --support-info: #0043ce;
  --on-status: #ffffff;

  /* Focus ring defaults to the accent. */
  --focus: var(--accent);

  /* Contextual field fill — elevated surfaces set `--field: var(--field-02)`
     (and `--field-hover: var(--field-hover-02)`) once on their container, the
     same mechanism as --control-hover-fill. */
  --field: var(--field-01);
  --field-hover: var(--field-hover-01);
}

/* --- Neutral roles: LIGHT theme (Carbon gray ramp) --- */
[data-theme='light'] {
  --bg: #ffffff;
  --layer-01: #f4f4f4;
  --layer-02: #e0e0e0;
  --border: #e0e0e0;
  /* Component boundaries need 3:1 against the surface (WCAG 1.4.11); gray-50 is
     3.32:1 on the canvas and 3.02:1 on --layer-01 (Carbon's $border-strong-01). */
  --border-strong: #8d8d8d;
  /* Field fills (arch 09 §4): a field is a fill one step off its surface plus a
     bottom border — --field-01 on the canvas, --field-02 on an elevated surface.
     Surfaces flip the contextual --field token; components consume --field only. */
  --field-01: #f4f4f4;
  --field-02: #ffffff;
  --field-hover-01: #e8e8e8;
  --field-hover-02: #e8e8e8;
  --text: #161616;
  --text-secondary: #525252;
  --text-placeholder: #a8a8a8;
}

/* --- Neutral roles: DARK theme --- */
[data-theme='dark'] {
  --bg: #161616;
  --layer-01: #262626;
  --layer-02: #393939;
  --border: #393939;
  /* 3.60:1 on the dark canvas (Carbon g100 $border-strong-01). */
  --border-strong: #6f6f6f;
  --field-01: #262626;
  --field-02: #393939;
  --field-hover-01: #333333;
  --field-hover-02: #474747;
  --text: #f4f4f4;
  --text-secondary: #a8a8a8;
  --text-placeholder: #6f6f6f;
  --support-error: #fa4d56;
  --support-success: #42be65;
  --support-warning: #f1c21b;
  --support-warning-fg: #f1c21b;
  --support-info: #78a9ff;
  --on-status: #161616;
}

/*
 * Accent — the FREE, swappable layer (doc §3.3). Deep teal is the default and is
 * defined on :root / [data-theme='dark'] so `--accent` always resolves even with
 * no `[data-accent]` attribute. The alternates below are opt-in; an accent
 * switcher arrives with Settings in M5. Brighter values on the dark canvas keep
 * accent-on-bg and text-on-accent contrast within AA (all values verified AA in
 * both themes — see the candidate showcase that picked teal).
 */
:root {
  --accent: #0e7490;
  --accent-hover: #0c5f77;
  --accent-contrast: #ffffff;
}

/*
 * Soft accent — a low-emphasis accent wash for a tinted-but-quiet surface (e.g.
 * the header's Donate button: noticeable without competing with a primary action).
 * Derived from the swappable accent + the theme background, so it follows any
 * accent/theme automatically rather than being a hardcoded per-accent value.
 */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --accent-soft-hover: color-mix(in srgb, var(--accent) 20%, var(--bg));
}
[data-theme='dark'] {
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-contrast: #161616;
}

[data-accent='blue'] {
  --accent: #0f62fe;
  --accent-hover: #0353e9;
  --accent-contrast: #ffffff;
}
[data-accent='indigo'] {
  --accent: #5b54e6;
  --accent-hover: #4a43d6;
  --accent-contrast: #ffffff;
}
[data-accent='amber'] {
  --accent: #b45309;
  --accent-hover: #92400e;
  --accent-contrast: #ffffff;
}
[data-accent='rose'] {
  --accent: #be123c;
  --accent-hover: #9f1239;
  --accent-contrast: #ffffff;
}
[data-theme='dark'][data-accent='blue'] {
  --accent: #78a9ff;
  --accent-hover: #a6c8ff;
  --accent-contrast: #161616;
}
[data-theme='dark'][data-accent='indigo'] {
  --accent: #8b85f0;
  --accent-hover: #a29bf5;
  --accent-contrast: #161616;
}
[data-theme='dark'][data-accent='amber'] {
  --accent: #fbbf24;
  --accent-hover: #fcd34d;
  --accent-contrast: #161616;
}
[data-theme='dark'][data-accent='rose'] {
  --accent: #fb7185;
  --accent-hover: #fda4af;
  --accent-contrast: #161616;
}
