/*
 * 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;

  /* 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);
}

/* --- Neutral roles: LIGHT theme (Carbon gray ramp) --- */
[data-theme='light'] {
  --bg: #ffffff;
  --layer-01: #f4f4f4;
  --layer-02: #e0e0e0;
  --border: #e0e0e0;
  --border-strong: #c6c6c6;
  --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;
  --border-strong: #525252;
  --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;
}
[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;
}