/* GovGreed — Canonical Design Tokens
 * Single source of truth for all CSS custom properties.
 * Include BEFORE any page-specific styles.
 * All app pages should load this file.
 * DO NOT redefine these variables in individual HTML files.
 */

:root {
  /* ── Fonts ── */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Backgrounds ── */
  --bg:       #060a0f;
  --surface:  #0d1520;
  --surface2: #121e2d;

  /* ── Borders ── */
  --border: #1e3352;

  /* ── Brand Colors ── */
  --green:        #00d672;
  --green-dim:    rgba(0, 214, 114, 0.08);
  --green-border: rgba(0, 214, 114, 0.20);
  --red:    #ff3366;
  --blue:   #00aaff;
  --amber:  #fbbf24;
  --orange: #ff8c00;
  --purple: #a855f7;

  /* ── Text ── */
  --text:       #c8d8e8;
  --text-dim:   #8ba0b0;   /* WCAG AA: ~4.6:1 on --bg. Was #6a8499 (3.8:1, non-compliant). */
  --text-bright:#eef4fa;

  /* ── Aliases (single source) ── */
  /* Use --surface / --surface2, not --card / --card2 */
  /* Use --green, not --gold */
  /* Use --blue, not --accent */
  /* Use --text-dim, not --dim */
  /* Use --text-bright, not --bright */
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  min-height: 100vh;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── Skip-to-content ── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  background: var(--green);
  color: #000;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
}
.skip-to-content:focus {
  top: 8px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a4060; }