/* Design Profile 4.2, proposed: tokens.
   Version 4.1 (November 9, 2026) with its color cut back to how restrained
   design-led companies use it. We measured eleven of their homepages
   (Stripe, Mercury, Ramp, Carta, Linear, Vercel, Arc, Figma, Raycast,
   Teenage Engineering, Apple): most render one accent, and color covers
   under 3% of eight of the eleven pages. So:

   - One accent per theme: Axlund blue on white, aurora on dark. It is the
     action, links, eyebrows and the one panel a page turns on.
   - Meaning colors (signal, amber, red) are small marks only: proof labels,
     fit lights, errors. Never a fill larger than a label.
   - Axlund purple, nebula and the spectrum belong to the logo. They are
     brand-* tokens, never used for interface.
   - Nothing glows. Menus and sheets keep their shadow.

   Dark is the first theme: deep space sits on :root and data-theme="light"
   switches to white. The design spec page uses these tokens directly; apps
   such as the intake form use them through ../tokens.css. */

:root,
[data-theme="dark"] {
  /* Brand colors, the same in both themes. Purple, nebula and the spectrum
     are for the logo only. */
  --brand-void: #05060f;
  --brand-space: #0a0f24;
  --brand-midnight: #141c3f;
  --brand-ink: #070b1a;
  --brand-blue: #3a66ed;
  --brand-purple: #7550eb;
  --brand-aurora: #22d3ee;
  --brand-nebula: #e546b5;
  --brand-solar: #ffb547;
  --brand-signal: #2ee59d;
  --paper: #ffffff;
  --ax-spectrum: linear-gradient(100deg, #22d3ee, #3a66ed 36%, #7550eb 68%, #e546b5);

  /* The mark */
  --mark: #ffffff;
  --mark-dot: var(--brand-aurora);

  /* Grounds */
  --bg: #05060f;
  --surface: #0a0f24;
  --surface-raised: #141c3f;
  --tint: #1c2654;
  --night: #141c3f;

  /* Lines */
  --line: #2a3468;
  --outline: var(--line-strong);
  --line-strong: #6f7aae;
  --night-line: #2a3468;

  /* Text */
  --ink: #f3f5ff;
  --ink-2: #b3bbdf;
  --ink-muted: #8e98c4;
  --ink-faint: #4a5480;
  --on-night: #f3f5ff;
  --on-night-muted: #b3bbdf;

  /* Action and accent */
  --action: var(--brand-aurora);
  --action-strong: #67e3f5;
  --on-action: #05060f;
  --link: var(--accent);
  --accent: var(--brand-aurora);

  /* Meaning: small marks only. Documented proof is neutral, not a fourth
     hue; its meter shows the level. */
  --signal: var(--brand-signal);
  --signal-soft: #0a2a24;
  --on-signal: #05060f;
  --amber: var(--brand-solar);
  --amber-soft: #2a1f0e;
  --slate: var(--ink-2);
  --slate-soft: var(--surface);
  --red: #ff5c7a;
  --red-soft: #2a0e18;

  /* Fit lights: the meaning colors, not new ones */
  --light-green: var(--signal);
  --light-yellow: var(--brand-solar);
  --light-yellow-edge: var(--amber);
  --light-red: var(--red);

  /* Tables and frames */
  --table-head: var(--brand-midnight);
  --on-table-head: #b3bbdf;
  --frame: var(--line-strong);

  /* Charts */
  --series-subject: var(--brand-aurora);
  --series-reference: #c2821c;
  --series-1: #0ea0bc;
  --series-2: #c2821c;
  --series-3: #8e6cf5;
  --series-4: #e546b5;
  --series-other: #4f5a8a;
  --chart-grid: #1f2850;
  --chart-axis: #5b669e;

  /* Depth: only menus and sheets float. Nothing glows. */
  --shadow-pop: 0 0 0 1px #2a3468, 0 24px 56px #000000b3;
  --focus-ring: 0 0 0 2px #05060f, 0 0 0 4px #22d3ee;

  color-scheme: dark;
}

[data-theme="light"] {
  --mark: var(--brand-ink);
  --mark-dot: var(--brand-blue);

  --bg: #ffffff;
  --surface: #f3f5fa;
  --surface-raised: #ffffff;
  --tint: #e9eeff;
  --night: #05060f;

  --line: #d3d8ea;
  --outline: var(--line-strong);
  --line-strong: #6b7494;
  --night-line: #2a3468;

  --ink: var(--brand-ink);
  --ink-2: #2a3150;
  --ink-muted: #565f82;
  --ink-faint: #a3aac4;
  --on-night: #f3f5ff;
  --on-night-muted: #b3bbdf;

  --action: var(--brand-blue);
  --action-strong: #2a52d8;
  --on-action: #ffffff;
  --link: var(--action-strong);
  --accent: var(--brand-blue);

  --signal: #047857;
  --signal-soft: #ddfbee;
  --on-signal: #ffffff;
  --amber: #9a4a00;
  --amber-soft: #fff1da;
  --slate: var(--ink-2);
  --slate-soft: var(--surface);
  --red: #b42343;
  --red-soft: #ffe6eb;

  --light-green: var(--signal);
  --light-yellow: var(--brand-solar);
  --light-yellow-edge: var(--amber);
  --light-red: var(--red);

  --table-head: var(--brand-ink);
  --on-table-head: #ffffff;
  --frame: var(--line-strong);

  --series-subject: var(--brand-blue);
  --series-reference: #d97706;
  --series-1: var(--brand-blue);
  --series-2: #d97706;
  --series-3: #c2389a;
  --series-4: var(--brand-purple);
  --series-other: #8a93b0;
  --chart-grid: #e2e6f2;
  --chart-axis: var(--brand-ink);

  --shadow-pop: 0 2px 6px #070b1a1f, 0 20px 48px #070b1a2e;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #3a66ed;

  color-scheme: light;
}

:root {
  /* Type: Manrope sets everything but labels, Geist Mono sets labels */
  --font: "Manrope", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Space, in 4px steps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Sharp where you read, soft where you touch */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  --border-hair: 1px;
  --border-strong: 1.5px;
  --border-double: 3px;

  --control-sm: 34px;
  --control-md: 44px;
  --control-lg: 52px;
  --frame-corner: 11px;

  --measure: 68ch;
  --page-max: 1200px;
  --gutter: 24px;
  --grid-pitch: 48px;

  /* Motion explains a change, nothing more */
  --motion: 180ms ease-out;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}