/* Design tokens — locked dark palette matching the legacy goals
 * dashboard. Major Third typography scale, 4px spacing grid, WCAG AA
 * on dark surfaces. The dashboard is intentionally always-dark; we
 * don't honour prefers-color-scheme.
 */

:root {
  /* Typography — Major Third ratio 1.25 */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --font-size-xs:   0.64rem;
  --font-size-sm:   0.8rem;
  --font-size-base: 1rem;
  --font-size-md:   1.25rem;
  --font-size-lg:   1.563rem;
  --font-size-xl:   1.953rem;
  --font-size-2xl:  2.441rem;
  --font-size-3xl:  3.052rem;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;

  --line-height-tight: 1.2;
  --line-height-body:  1.55;
  --line-height-loose: 1.8;

  /* Spacing — 4px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Surfaces — locked dark */
  --surface-bg:     #121a2e;
  --surface-card:   #1a2540;
  --surface-muted:  #22304d;
  --surface-elev:   #2a3a5a;
  --surface-border: #304568;
  --surface-border-light: #3d5580;

  /* Text */
  --text-primary:   #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted:     #7b8ba8;

  /* Accent + semantic palette */
  --color-accent:        #3b82f6;
  --color-accent-light:  #60a5fa;
  --color-accent-dim:    #2563eb;
  --color-accent-bg:     rgba(59,130,246,0.10);
  --color-accent-border: rgba(59,130,246,0.30);

  --color-blue:        #38bdf8;
  --color-blue-bg:     rgba(56,189,248,0.12);
  --color-blue-border: rgba(56,189,248,0.30);

  --color-green:        #34d399;
  --color-green-bg:     rgba(52,211,153,0.12);
  --color-green-border: rgba(52,211,153,0.30);

  --color-amber:        #fbbf24;
  --color-amber-bg:     rgba(251,191,36,0.12);
  --color-amber-border: rgba(251,191,36,0.30);

  --color-red:        #f87171;
  --color-red-bg:     rgba(248,113,113,0.12);
  --color-red-border: rgba(248,113,113,0.30);

  --color-pink:        #f472b6;
  --color-pink-bg:     rgba(244,114,182,0.12);
  --color-pink-border: rgba(244,114,182,0.30);

  --color-purple:      #a78bfa;
  --color-purple-bg:   rgba(167,139,250,0.12);
  --color-purple-border: rgba(167,139,250,0.30);

  --color-gold:        #fbbf24;
  --color-gold-bg:     rgba(251,191,36,0.15);
  --color-gold-border: rgba(251,191,36,0.40);

  /* Platform-level aliases mapped to the locked palette. */
  --color-success:        var(--color-green);
  --color-success-bg:     var(--color-green-bg);
  --color-success-border: var(--color-green-border);

  --color-warn:        var(--color-amber);
  --color-warn-bg:     var(--color-amber-bg);
  --color-warn-border: var(--color-amber-border);

  --color-danger:        var(--color-red);
  --color-danger-bg:     var(--color-red-bg);
  --color-danger-border: var(--color-red-border);

  --color-info:        var(--color-blue);
  --color-info-bg:     var(--color-blue-bg);
  --color-info-border: var(--color-blue-border);

  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.50);

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.30);

  --motion-fast:   120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base:   200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-slow:   320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  --touch-target: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

html {
  font-family: var(--font-family-sans);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface-bg);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { margin: 0; background: var(--surface-bg); color: var(--text-primary); }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }