/*
 * Design tokens.
 *
 * The workspace design system (root DESIGN_SYSTEM.md) is a warm light theme —
 * "Cafe Heritage". This dashboard's brief specifies a premium dark interface
 * with a blue/cyan body and restrained teal highlights, which the light theme
 * cannot express. The token *architecture* is kept identical (same categories,
 * same 8pt spacing rhythm, same semantic roles, one shadow, generous radii) so
 * this reads as the dark room in the same building rather than a different
 * building. See DASHBOARD.md § Relationship to the workspace design system.
 *
 * Status colours (--status-*) are written at runtime from src/body/palette.js so
 * the 3D materials and the CSS swatches can never drift apart.
 */

:root {
  color-scheme: dark;

  /* Surfaces — deep navy, not black, so blue light has something to sit in. */
  --void: #070a10;
  --canvas: #0a0f17;
  --surface: #0e1520;
  --surface-raised: #131c29;
  --inset: #0b111a;

  --hairline: rgba(148, 184, 224, 0.11);
  --hairline-strong: rgba(148, 184, 224, 0.2);

  /* Body illumination */
  --blue: #3e8fd6;
  --blue-bright: #7cc4f5;
  --blue-deep: #1c4c7a;
  --teal: #35c6a8;

  /* Text */
  --text: #e9eff7;
  --text-dim: #9aabc0;
  --text-faint: #64758a;

  /* Semantic (mirrors src/body/palette.js — that file is the source) */
  --status-neutral: #3e8fd6;
  --status-progressing: #35c6a8;
  --status-monitor: #d9a23a;
  --status-plateau: #e07a3c;
  --status-imbalance: #d6544e;
  --status-no-data: #5a6675;

  /* Type. System stacks only — no external font requests, so the page is
     self-contained and works offline. The mono face carries every measured
     number and provenance label; the sans carries language. That split is the
     typographic signal for "instrument reading" versus "interpretation". */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
    system-ui, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --step--1: 0.75rem;
  --step-0: 0.875rem;
  --step-1: 1rem;
  --step-2: 1.25rem;
  --step-3: 1.625rem;
  --step-4: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem);

  /* 8pt rhythm */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* One shadow, used everywhere. */
  --shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.85);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 240ms;
}

:root[data-reduced-motion='true'] {
  --duration: 1ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(46, 108, 170, 0.16), transparent 60%),
    radial-gradient(80% 60% at 50% 105%, rgba(31, 96, 118, 0.1), transparent 65%),
    var(--void);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -3rem;
  z-index: 20;
  padding: var(--s2) var(--s4);
  background: var(--surface-raised);
  color: var(--text);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  text-decoration: none;
  transition: top var(--duration) var(--ease);
}

.skip-link:focus {
  top: var(--s4);
}