/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HORIZON4 AI — DESIGN TOKENS (locked)
   White institutional. Sans-serif only. 4px radius globally.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ─── FONT FAMILIES ─────────────────────────────── */
  --font-sans: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ─── COLOR PALETTE (LOCKED) ────────────────────── */
  --bg-base:          #F0F2F5;
  --bg-surface:       #FFFFFF;
  --bg-deep:          #0A1F44;

  --ink-primary:      #0A1F44;
  --ink-body:         #353E50;
  --ink-muted:        #6B7280;
  --ink-on-dark:      #FFFFFF;
  --ink-on-dark-2:    #B0BBC9;

  --accent-primary:   #0075C9;
  --accent-primary-h: #005A9C;
  --accent-secondary: #0D9B84;

  --border-hairline:  #D6DDE8;
  --border-strong:    #B0BBC9;

  /* Pathway accents (used exactly once each, in horizon cards) */
  --gov-accent:   var(--accent-primary);
  --edu-accent:   var(--accent-secondary);
  --biz-accent:   #2640A0;
  --strat-accent: #6E59A5;

  /* Scorecard status colors (used only in the scorecard) */
  --status-good: #2F7A4D;
  --status-warn: #B97A0A;
  --status-bad:  #B33A3A;

  /* ─── SHADOWS ───────────────────────────────────── */
  --shadow-card:     0 8px 24px rgba(10, 31, 68, 0.08);
  --shadow-card-hov: 0 16px 40px rgba(10, 31, 68, 0.12);
  --shadow-menu:     0 16px 40px rgba(10, 31, 68, 0.12);

  /* ─── RADII (LOCKED) ────────────────────────────── */
  --radius:       4px;
  --radius-pill:  999px;

  /* ─── TYPE ──────────────────────────────────────── */
  --type-h1: 72px;
  --type-h1-mobile: 48px;
  --type-h2: 48px;
  --type-h2-mobile: 36px;
  --type-h3: 32px;
  --type-h3-mobile: 28px;
  --type-h4: 22px;
  --type-h4-mobile: 20px;
  --type-body-xl: 20px;
  --type-body-xl-mobile: 18px;
  --type-body: 17px;
  --type-body-mobile: 16px;
  --type-small: 14px;
  --type-eyebrow: 13px;
  --type-mono: 13px;

  /* ─── SPACING (8px base) ─────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  /* ─── LAYOUT ────────────────────────────────────── */
  --max-content: 1240px;
  --gutter: 24px;
  --section-y: 128px;
  --section-y-mobile: 80px;

  /* ─── MOTION ────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 380ms;

  /* ─── PREMIUM POLISH — Batch 1A ─────────────────── */
  /* Soft institutional gold — decorative accent, used sparingly */
  --accent-gold:      #A8842E;
  --accent-gold-soft: rgba(168, 132, 46, 0.12);

  /* Layered shadow scale */
  --shadow-xs:   0 1px 2px rgba(10, 31, 68, 0.05);
  --shadow-sm:   0 2px 10px rgba(10, 31, 68, 0.06);
  --shadow-lg:   0 24px 56px rgba(10, 31, 68, 0.14);
  --shadow-glow: 0 10px 30px rgba(0, 117, 201, 0.16);

  /* Soft gradient backgrounds — very low contrast */
  --gradient-page:    linear-gradient(180deg, #F4F6F9 0%, #F0F2F5 100%);
  --gradient-mesh:    radial-gradient(58% 48% at 12% 0%, rgba(0,117,201,0.06), transparent 70%),
                      radial-gradient(48% 44% at 100% 8%, rgba(13,155,132,0.05), transparent 72%);
  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);

  /* Refined borders */
  --border-accent: rgba(0, 117, 201, 0.35);

  /* Extra type + spacing steps */
  --type-display: 84px;
  --s-20: 80px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--ink-body);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

::selection { background: rgba(0,117,201,0.18); color: var(--ink-primary); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink-primary);
  font-weight: 700;
}

a { color: var(--accent-primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-primary-h); }

/* ─── Global focus states (keyboard-visible) ─────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

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