/* HAND-MAINTAINED — source of truth for design tokens across the platform.
   The DTCG-style JSON generator (design-system/scripts/tokens-from-json.mjs)
   was retired 2026-05-18; do not regenerate. Edit this file directly.

   Section order:
   1. @theme — reference tier (raw values; Tailwind v4 emits utilities for these)
   2. @theme inline — system-tier alias bindings (utilities re-resolve per theme)
   3. :root — dark-default system-tier primitives + bridge + component tier + content-max
   4. [data-theme="light"] — light-theme primitive overrides + bridge light
   5. [data-accent="<slug>"] — accent dark overrides (canonical + transitional aliases)
   6. [data-theme="light"][data-accent="<slug>"] — accent light overrides
   7. [data-density="<slug>"] — density control-height overrides (desktop only)
   8. body + scrollbar + named animations
   9. @media (prefers-reduced-motion: reduce)
   10. .prose-invert (markdown rendering)

   Aliases marked DEPRECATED in line comments are transitional: removed in a
   single greppable cleanup commit after every Wave A app has signed off.
   Bridge aliases (--brand, --fg, --r-*, --glass, --ease, --slate, etc.) are
   PERMANENT - they are the canonical alternate-naming surface the ported
   prototype CSS reads, alongside the prefixed semantic names.
   --font-sans / --font-display are Inter per the design source; G-04
   (font-bundling) swaps the CDN delivery for @fontsource-variable so the
   bundled WOFF2 ships in every app's JS chunk. */

/* ── 1. Reference tier — @theme ── */
@theme {
  /* Color reference primitives (raw values). Components MUST NOT read these
     directly; the system-tier semantic roles in :root / [data-theme] below
     are the consumption surface. */
  --color-ink-deep: #0e1117;
  --color-ink-raised: #161b22;
  --color-ink-overlay: #232a33;
  --color-border-quiet: rgb(255 255 255 / 0.1);
  --color-border-focus: #c1c7cf;
  --color-text-body: #e2e2e5;
  --color-text-muted: #8e9195;
  --color-text-bright: #f2f3f5;
  --color-signal-success: #9dc8af;
  --color-signal-warning: #d8b271;
  --color-signal-error: #ffb4ab;

  /* Font stacks — Inter for UI/display, JetBrains Mono for code. G-04
     swaps Inter delivery from per-app CDN links to @fontsource-variable
     bundling; the family names here are final. */
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --text-display: 31px;
  --text-display--line-height: 2.25rem;
  --text-display--font-weight: 600;
  --text-display--letter-spacing: -0.01em;
  --text-headline: 25px;
  --text-headline--line-height: 2rem;
  --text-headline--font-weight: 600;
  --text-title: 21px;
  --text-title--line-height: 1.75rem;
  --text-title--font-weight: 500;
  /* Renamed from --text-body* (2026-06-10): the runtime palettes define
     --text-body as the body text COLOR, which hijacked these @theme font-size
     vars and made the text-body/-dense/-mono size utilities silent no-ops.
     "prose" is the size namespace; --text-body stays color-only. */
  --text-prose: 17px;
  --text-prose--line-height: 1.5rem;
  --text-prose--font-weight: 400;
  --text-prose-dense: 14px;
  --text-prose-dense--line-height: 1.55;
  --text-prose-dense--font-weight: 400;
  --text-prose-mono: 15px;
  --text-prose-mono--line-height: 1.25rem;
  --text-prose-mono--font-weight: 400;
  --text-label: 13px;
  --text-label--line-height: 1rem;
  --text-label--font-weight: 400;
  --text-label--letter-spacing: 0.01em;
  --text-label-meta: 11px;
  --text-label-meta--line-height: 1rem;
  --text-label-meta--font-weight: 400;
  --text-label-meta--letter-spacing: 0.02em;

  /* Radius scale reconciled to sm-ui Aetheric design source
     (--r-md → 12px, --r-lg → 16px, NEW xl 24px). */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-2sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --ds-spacing-xs: 4px;
  --ds-spacing-sm: 8px;
  --ds-spacing-md: 12px;
  --ds-spacing-lg: 16px;
  --ds-spacing-xl: 24px;
  --ds-spacing-2xl: 32px;

  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  --ctrl-h-xs: 22px;
  --ctrl-h-sm: 26px;
  --ctrl-h-md: 32px;
  --ctrl-h-lg: 40px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med: 180ms;
  --dur-slow: 360ms;
}

/* ── 2. System-tier aliases — @theme inline (Tailwind utility re-resolution) ── */
@theme inline {
  /* Canonical canvas / text / border / accent / signal / surface / energy roles.
     Every Tailwind utility built on these flips per theme without re-emission. */
  --color-bg: var(--ink-deep);
  --color-bg-raised: var(--ink-raised);
  --color-bg-overlay: var(--ink-overlay);
  --color-surface: var(--ink-raised);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-recess: var(--recess);
  --color-border: var(--border-quiet);
  --color-border-accent: var(--border-focus);
  --color-text: var(--text-body);
  --color-text-body: var(--text-body);
  --color-text-muted: var(--text-muted);
  --color-text-bright: var(--text-bright);
  --color-on-brand: var(--on-brand);
  --color-on-energy: var(--on-energy);

  /* Canonical accent family — semantic roles consumed by primitives and
     refonted app CSS. */
  --color-accent: var(--color-accent-primary);
  --color-accent-dim: var(--color-accent-primary-dim);
  --color-accent-line: var(--color-accent-primary-line);
  --color-accent-soft: var(--color-accent-primary-soft);
  --color-accent-ring: var(--color-accent-primary-ring);

  /* Energy CTA family — first-class peer of accent; does NOT rotate per
     data-accent slug (the "go" signal stays sage across brand voices). */
  --color-energy: var(--energy);
  --color-energy-dim: var(--energy-dim);
  --color-energy-line: var(--energy-line);
  --color-energy-soft: var(--energy-soft);

  --color-success: var(--signal-success);
  --color-warning: var(--signal-warning);
  --color-error: var(--signal-error);

  /* Raw-name utilities (bg-ink-deep, border-border-quiet, text-signal-*).
     Without these the utilities freeze on the @theme dark hex and bleed
     into light mode. */
  --color-ink-deep: var(--ink-deep);
  --color-ink-raised: var(--ink-raised);
  --color-ink-overlay: var(--ink-overlay);
  --color-border-quiet: var(--border-quiet);
  --color-border-focus: var(--border-focus);
  --color-signal-success: var(--signal-success);
  --color-signal-warning: var(--signal-warning);
  --color-signal-error: var(--signal-error);

  /* DEPRECATED: remove at end of Wave A — Tailwind utility aliases that
     resolved to the legacy --indigo-* primitive family. Now redirect to
     the canonical --color-accent-* names so `bg-indigo`, `text-indigo`,
     `border-indigo-line` keep working without code change through the
     Wave A migration window. */
  --color-indigo: var(--color-accent-primary);
  --color-indigo-dim: var(--color-accent-primary-dim);
  --color-indigo-line: var(--color-accent-primary-line);
  --color-indigo-soft: var(--color-accent-primary-soft);
}

/* ── 3. Dark default — system-tier primitives + bridge + component tier ── */
:root {
  /* Canvas / ink tiers — deep navy base → cool mineral glass tiers
     (Aetheric Command, promoted from apps/skill-manager-ui/src/index.css). */
  --ink-deep: #0e1117;
  --ink-raised: #161b22;
  --ink-overlay: #232a33;

  /* Border tiers */
  --border-quiet: rgb(255 255 255 / 0.1);
  --border-2: rgb(255 255 255 / 0.16); /* one step brighter than --border: ghost buttons, kbd, dialogs, brand glyphs */
  --border-focus: #c1c7cf;

  /* Text tiers */
  --text-body: #e2e2e5;
  --text-muted: #8e9195;
  --text-bright: #f2f3f5;

  /* Canonical primary accent — Mineral Slate (cool grey, not a vivid hue).
     The five [data-accent="<slug>"] overrides below set the same five
     names per palette. */
  --color-accent-primary: #c1c7cf;
  --color-accent-primary-dim: #989da5;
  --color-accent-primary-line: rgb(193 199 207 / 0.26);
  --color-accent-primary-soft: rgb(193 199 207 / 0.13);
  --color-accent-primary-ring: rgb(193 199 207 / 0.5);

  /* DEPRECATED: remove at end of Wave A — transitional aliases for the
     legacy --indigo-* family. CSS reads of var(--indigo*) keep working
     for the migration window. */
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
  --indigo-ring: var(--color-accent-primary-ring);

  /* Energy CTA family — desaturated sage, the "go" signal. Does NOT rotate
     per accent slug. */
  --energy: #b5ccc1;
  --energy-dim: #9dbbad;
  --energy-line: rgb(181 204 193 / 0.3);
  --energy-soft: rgb(181 204 193 / 0.15);
  --energy-tint: rgb(181 204 193 / 0.22);
  --on-energy: #21342d;

  /* Signal family — desaturated, flat. Soft companions used as background
     fills behind chip-style status indicators. */
  --signal-success: #9dc8af;
  --signal-warning: #d8b271;
  --signal-error: #ffb4ab;
  --signal-success-soft: rgb(157 200 175 / 0.15);
  --signal-warning-soft: rgb(216 178 113 / 0.15);
  --signal-error-soft: rgb(255 180 171 / 0.13);

  /* Surface tier — primitives consumed by Card, Input, SegmentedControl. */
  --surface: var(--ink-raised);
  --surface-2: #1b212a;
  --surface-3: #232b35;
  --surface-4: #2d3742;
  --recess: #0b0e13;
  --on-brand: #2b3137;

  /* Glass token — first-class semantic, not an inline backdrop-filter value. */
  --glass-blur: blur(20px) saturate(1.15);
  --glass: var(--glass-blur);

  /* Shadow tier — dark uses pure-black stacks at higher alpha. */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.3);
  --shadow-pop: 0 30px 70px rgb(0 0 0 / 0.6), 0 10px 26px rgb(0 0 0 / 0.45);
  /* DEPRECATED: remove at end of Wave A — --shadow-3 was the pre-Aetheric
     name for floating elevation. Resolves to --shadow-pop. */
  --shadow-3: var(--shadow-pop);

  /* Motion bridge alias — sm-ui prototype CSS reads --ease. Canonical aliases
     --ease-out / --ease-in-out / --ease-spring live in @theme above. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Bridge alias layer — permanent alternate naming for ported prototype CSS
     (.page-head, .btn, .field, .seg, .ae-card, .panel, etc.). Resolves to
     canonical names; not deprecated. */
  --fg: var(--text-body);
  --fg-soft: #c5c6cb;
  --faint: #62656a;
  --muted: var(--text-muted);
  --brand: var(--color-accent-primary);
  --brand-strong: #dde3eb;
  --brand-dim: var(--color-accent-primary-dim);
  --brand-soft: var(--color-accent-primary-soft);
  --brand-tint: rgb(193 199 207 / 0.22);
  --slate: #2f353b;
  --border: var(--border-quiet);
  --hairline: rgb(255 255 255 / 0.07);
  --success: var(--signal-success);
  --success-soft: var(--signal-success-soft);
  --warn: var(--signal-warning);
  --warn-soft: var(--signal-warning-soft);
  --danger: var(--signal-error);
  --danger-soft: var(--signal-error-soft);

  /* Short radius bridge — sm-ui prototype CSS reads these names; they
     resolve to the canonical --radius-* family. */
  --r-sm: var(--radius-sm);
  --r: var(--radius-2sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --pill: var(--radius-full);

  /* Control squircle — the single radius for tactile keys (button, icon-button,
     search-input wells). Baked into the ds.* primitives so every app inherits
     one corner; replaces the former per-primitive [data-ds] radius patches in
     aetheric.css. */
  --r-control: 11px;

  /* Font bridge — sm-ui prototype CSS uses --font-app + --font-code names.
     These keep DM Sans + JetBrains Mono as the v1 default; G-04 flips the
     underlying --font-sans/--font-display to Inter when fontsource bundles. */
  --font-app: var(--font-sans);
  --font-code: var(--font-mono);

  /* Layout primitives used by ported prototype */
  --rail-w: 72px;
  --titlebar-h: 40px;

  /* Theme-flipping non-color token (kept from the pre-Aetheric shared baseline). */
  --toolkit-icon-filter: invert(1);

  /* DEPRECATED: remove at end of Wave A — legacy --t-* aliases mirroring
     the canonical semantic surface. */
  --t-bg: var(--ink-deep);
  --t-bg-raised: var(--ink-raised);
  --t-bg-overlay: var(--ink-overlay);
  --t-border: var(--border-quiet);
  --t-border-focus: var(--border-focus);
  --t-text: var(--text-body);
  --t-text-muted: var(--text-muted);
  --t-text-bright: var(--text-bright);
  --t-accent: var(--color-accent-primary);
  --t-accent-dim: var(--color-accent-primary-dim);
  --t-success: var(--signal-success);
  --t-warning: var(--signal-warning);
  --t-error: var(--signal-error);

  /* Page content max-width — every refonted view caps content at 1440px
     and centers it horizontally so wide monitors don't stretch chrome. */
  --content-max: 1440px;

  /* Categorical data-viz palette — distinct, theme-stable hues for
     multi-series charts (storage breakdown, etc.). Single source consumed
     via var(--chart-N); series 1 is conventionally the brand accent, so
     callers prepend var(--color-accent) and start categories at --chart-1.
     Kept theme-stable (defined once) so a series keeps its identity across
     light/dark — the standard convention for categorical chart colors. */
  --chart-1: #22c55e;
  --chart-2: #f59e0b;
  --chart-3: #ef4444;
  --chart-4: #06b6d4;
  --chart-5: #ec4899;
  --chart-6: #84cc16;
  --chart-7: #8b5cf6;
  --chart-8: #14b8a6;
  --chart-9: #f97316;
  --chart-10: #3b82f6;
  --chart-11: #a855f7;

  /* Agent/log event accent — the violet used to mark sub-agent spawns in the
     mission monitor stream. */
  --log-agent-event: #c084fc;
}

.page-pad {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ── 4. Light theme overrides ── [data-theme="light"] on <html> ── */
[data-theme="light"] {
  /* Luminous mineral-white: pure white cards on off-white base, crisp
     platinum borders, monochrome obsidian primary. */
  --ink-deep: #f9fafb;
  --ink-raised: #ffffff;
  --ink-overlay: #e8e8ed;

  --border-quiet: #d2d2d7;
  --border-2: #c7c7cf; /* light: one platinum step above --border-quiet */
  --border-focus: #6e6e73;

  --text-body: #1d1d1f;
  --text-muted: #6e6e73;
  --text-bright: #000000;

  /* Canonical accent — near-black obsidian (monochrome serious-utility identity). */
  --color-accent-primary: #1d1d1f;
  --color-accent-primary-dim: #6e6e73;
  --color-accent-primary-line: rgb(31 41 55 / 0.14);
  --color-accent-primary-soft: rgb(31 41 55 / 0.07);
  --color-accent-primary-ring: rgb(31 41 55 / 0.35);

  /* DEPRECATED: remove at end of Wave A — transitional aliases */
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
  --indigo-ring: var(--color-accent-primary-ring);

  /* Energy CTA family — sage deepened for AA contrast on white. */
  --energy: #2f7b57;
  --energy-dim: #266547;
  --energy-line: rgb(47 123 87 / 0.26);
  --energy-soft: rgb(47 123 87 / 0.12);
  --energy-tint: rgb(47 123 87 / 0.18);
  --on-energy: #ffffff;

  /* Signal family — saturation/darkness adjusted for light bg AA contrast. */
  --signal-success: #2f7b57;
  --signal-warning: #8a6a14;
  --signal-error: #c2362e;
  --signal-success-soft: rgb(47 123 87 / 0.12);
  --signal-warning-soft: rgb(138 106 20 / 0.13);
  --signal-error-soft: rgb(194 54 46 / 0.1);

  /* Surface tier — light uses Apple system grays. */
  --surface: var(--ink-raised);
  --surface-2: #f3f4f6;
  --surface-3: #edeff2;
  --surface-4: #e2e5ea;
  --recess: #f3f4f6;
  --on-brand: #ffffff;

  /* Glass token unchanged (component-level opt-out: .ae-card / .panel in
     sm-ui's app CSS drop backdrop-filter under light theme). */
  --glass: var(--glass-blur);

  /* Light-theme elevation — near-black ink at lower alpha to avoid halation. */
  --shadow-1: 0 1px 2px rgb(17 24 39 / 0.05);
  --shadow-2: 0 8px 24px rgb(17 24 39 / 0.08), 0 1px 3px rgb(17 24 39 / 0.05);
  --shadow-pop: 0 24px 60px rgb(17 24 39 / 0.14), 0 8px 22px rgb(17 24 39 / 0.08);
  --shadow-3: var(--shadow-pop);

  /* Bridge layer (light overrides where the values differ from dark) */
  --fg-soft: #424245;
  --faint: #aeaeb2;
  --brand: var(--color-accent-primary);
  --brand-strong: #000000;
  --brand-dim: var(--color-accent-primary-dim);
  --brand-soft: var(--color-accent-primary-soft);
  --brand-tint: rgb(29 29 31 / 0.14);
  --slate: #e8e8ed;
  --hairline: #e8e8ed;
  --border: var(--border-quiet);
  --success: var(--signal-success);
  --success-soft: var(--signal-success-soft);
  --warn: var(--signal-warning);
  --warn-soft: var(--signal-warning-soft);
  --danger: var(--signal-error);
  --danger-soft: var(--signal-error-soft);

  --toolkit-icon-filter: none;

  /* DEPRECATED: remove at end of Wave A — legacy --t-* aliases */
  --t-bg: var(--ink-deep);
  --t-bg-raised: var(--ink-raised);
  --t-bg-overlay: var(--ink-overlay);
  --t-border: var(--border-quiet);
  --t-border-focus: var(--border-focus);
  --t-text: var(--text-body);
  --t-text-muted: var(--text-muted);
  --t-text-bright: var(--text-bright);
  --t-accent: var(--color-accent-primary);
  --t-accent-dim: var(--color-accent-primary-dim);
  --t-success: var(--signal-success);
  --t-warning: var(--signal-warning);
  --t-error: var(--signal-error);
}

/* ── 5. Accent palettes — data-accent="<slug>" on <html> ──
   Each slug sets BOTH canonical (--color-accent-primary-*) AND deprecated
   (--indigo-*) names so in-flight consumers keep resolving during Wave A. */
[data-accent="plum"] {
  --color-accent-primary: #c283c6;
  --color-accent-primary-dim: #9c5fa0;
  --color-accent-primary-line: rgb(194 131 198 / 0.25);
  --color-accent-primary-soft: rgb(194 131 198 / 0.1);
  /* DEPRECATED: remove at end of Wave A */
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}
[data-theme="light"][data-accent="plum"] {
  --color-accent-primary: #8a3a8b;
  --color-accent-primary-dim: #6e2f6e;
  --color-accent-primary-line: rgb(138 58 139 / 0.25);
  --color-accent-primary-soft: rgb(138 58 139 / 0.08);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}

[data-accent="sapphire"] {
  --color-accent-primary: #6f97ea;
  --color-accent-primary-dim: #5078c8;
  --color-accent-primary-line: rgb(111 151 234 / 0.25);
  --color-accent-primary-soft: rgb(111 151 234 / 0.1);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}
[data-theme="light"][data-accent="sapphire"] {
  --color-accent-primary: #2d5cc5;
  --color-accent-primary-dim: #244aa1;
  --color-accent-primary-line: rgb(45 92 197 / 0.25);
  --color-accent-primary-soft: rgb(45 92 197 / 0.08);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}

[data-accent="moss"] {
  --color-accent-primary: #6dba89;
  --color-accent-primary-dim: #54a06e;
  --color-accent-primary-line: rgb(109 186 137 / 0.25);
  --color-accent-primary-soft: rgb(109 186 137 / 0.1);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}
[data-theme="light"][data-accent="moss"] {
  --color-accent-primary: #2c8056;
  --color-accent-primary-dim: #226844;
  --color-accent-primary-line: rgb(44 128 86 / 0.25);
  --color-accent-primary-soft: rgb(44 128 86 / 0.08);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}

[data-accent="terracotta"] {
  --color-accent-primary: #d68869;
  --color-accent-primary-dim: #b46e51;
  --color-accent-primary-line: rgb(214 136 105 / 0.25);
  --color-accent-primary-soft: rgb(214 136 105 / 0.1);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}
[data-theme="light"][data-accent="terracotta"] {
  --color-accent-primary: #a8512c;
  --color-accent-primary-dim: #8a4124;
  --color-accent-primary-line: rgb(168 81 44 / 0.25);
  --color-accent-primary-soft: rgb(168 81 44 / 0.08);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}

[data-accent="saffron"] {
  --color-accent-primary: #d6a447;
  --color-accent-primary-dim: #b58835;
  --color-accent-primary-line: rgb(214 164 71 / 0.25);
  --color-accent-primary-soft: rgb(214 164 71 / 0.1);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}
[data-theme="light"][data-accent="saffron"] {
  --color-accent-primary: #8a6a1f;
  --color-accent-primary-dim: #6e5519;
  --color-accent-primary-line: rgb(138 106 31 / 0.25);
  --color-accent-primary-soft: rgb(138 106 31 / 0.08);
  --indigo: var(--color-accent-primary);
  --indigo-dim: var(--color-accent-primary-dim);
  --indigo-line: var(--color-accent-primary-line);
  --indigo-soft: var(--color-accent-primary-soft);
}

/* ── 7. Density modes — desktop only per a11y comment ──
   NOT dead: consumed by the Ladle component-preview harness density toggle
   (packages/ui/.ladle/components.tsx setDensity → data-density). No shipping app
   wires it yet — it's a component-playground control, not a product feature. Keep
   it scoped here; wiring a per-app density UI would be net-new product scope. */
[data-density="compact"] {
  /* Tighter chrome for power-user dense surfaces. Type sizes stay.
     a11y: --ctrl-h-md (28px) > WCAG 2.5.8 floor (24px) but < 44px touch
     target — do NOT apply to mobile or primary CTA surfaces. */
  --ctrl-h-xs: 20px;
  --ctrl-h-sm: 24px;
  --ctrl-h-md: 28px;
  --ctrl-h-lg: 36px;
}
[data-density="cozy"] {
  --ctrl-h-xs: 24px;
  --ctrl-h-sm: 28px;
  --ctrl-h-md: 36px;
  --ctrl-h-lg: 44px;
}

/* ── 8. Body + scrollbar + selection ── */
body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

#root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-quiet);
  border-radius: 3px;
}
::selection {
  background: var(--color-accent-primary);
  color: var(--text-bright);
}

/* ── 9. Animations — heartbeat, pulse, fade-in, slide-in ── */
@keyframes heartbeat {
  0%,
  30%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  15% {
    transform: scale(1.08);
  }
  45% {
    transform: scale(1.04);
  }
}
.pulse-beat {
  animation: heartbeat 0.6s ease-out;
}
.pulse-glow-accent {
  animation: heartbeat 0.6s ease-out;
  text-shadow: 0 0 8px var(--color-accent-primary);
}
.pulse-glow-warning {
  animation: heartbeat 0.6s ease-out;
  text-shadow: 0 0 8px var(--signal-warning);
}
.pulse-glow-error {
  animation: heartbeat 0.6s ease-out;
  text-shadow: 0 0 8px var(--signal-error);
}
.pulse-glow-success {
  animation: heartbeat 0.6s ease-out;
  text-shadow: 0 0 8px var(--signal-success);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}
.animate-slide-in {
  animation: slide-in-right 0.2s ease-out;
}

@keyframes ds-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.ds-anim-pulse {
  animation: ds-pulse 1.5s ease-in-out infinite;
}

/* gen-bar: indeterminate progress strip for generating skill cards */
@keyframes ds-gen-bar {
  0% {
    width: 0%;
    left: 0;
  }
  50% {
    width: 40%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
.ds-gen-bar {
  background: var(--signal-warning);
  animation: ds-gen-bar 1.6s ease-in-out infinite;
}

@keyframes drawer-slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes drawer-slide-in-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.ds-drawer-anchor-right {
  animation: drawer-slide-in-right var(--dur-med) ease-out forwards;
}
.ds-drawer-anchor-bottom {
  animation: drawer-slide-in-bottom var(--dur-med) ease-out forwards;
}

.ds-chip-dismiss {
  opacity: 0.6;
  transition: opacity var(--dur-fast);
}
.ds-chip-dismiss:hover,
.ds-chip-dismiss:focus-visible {
  opacity: 1;
}
.ds-chip-dismiss:focus-visible {
  outline: 1px solid var(--color-accent-primary-ring);
  outline-offset: 2px;
}

.ds-chip-body {
  transition: none;
}
.ds-chip-body:focus-visible {
  outline: 1px solid var(--color-accent-primary-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.ds-search-clear {
  color: var(--text-muted);
  transition: color var(--dur-fast);
}
.ds-search-clear:hover,
.ds-search-clear:focus-visible {
  color: var(--text-bright);
}
.ds-search-clear:focus-visible {
  outline: 1px solid var(--color-accent-primary-ring);
  outline-offset: 2px;
}

/* ── 10. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ds-anim-pulse,
  .pulse-beat,
  .pulse-glow-accent,
  .pulse-glow-warning,
  .pulse-glow-error,
  .pulse-glow-success,
  .animate-fade-in,
  .animate-slide-in,
  .ds-drawer-anchor-right,
  .ds-drawer-anchor-bottom,
  .ds-gen-bar {
    animation: none;
  }
  .pulse-glow-accent,
  .pulse-glow-warning,
  .pulse-glow-error,
  .pulse-glow-success {
    text-shadow: none;
  }
}

/* ── 11. Prose overrides for markdown rendering (Régime A reading surfaces) ── */
.prose-invert {
  --tw-prose-body: var(--text-body);
  --tw-prose-headings: var(--text-bright);
  --tw-prose-links: var(--color-accent-primary);
  --tw-prose-bold: var(--text-bright);
  --tw-prose-code: var(--color-accent-primary);
  --tw-prose-pre-bg: var(--ink-raised);
  --tw-prose-th-borders: var(--border-quiet);
  --tw-prose-td-borders: var(--border-quiet);
}
[data-theme="light"] .prose-invert {
  --tw-prose-pre-bg: var(--ink-overlay);
}