/* ============================================================
   DC State Board of Education — Visual Identity 2026
   Colors & Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --capitol-slate:   #1E3048;  /* Headers, navigation, official documents */
  --ward-blue:       #3D6B8A;  /* Secondary elements, links, buttons */
  --dc-coral:        #D4736C;  /* CTAs, highlights, heritage accents */
  --rising-teal:     #7CC5D9;  /* Student content, success, energy */

  /* ---------- SUPPORTING PALETTE ---------- */
  --potomac:         #2A4A6B;  /* Gradient midpoints, depth */
  --anacostia:       #5A8BA8;  /* Interactive states, transitions */
  --cherry-blossom:  #E8A49E;  /* Soft accents, celebrations */
  --horizon:         #A8DBE8;  /* Light accents, tags, badges */

  /* ---------- BACKGROUND TINTS ---------- */
  --ward-tint:       #EEF4F7;  /* Policy sections */
  --coral-tint:      #FAF0EF;  /* Community sections */
  --rising-tint:     #EEF8FA;  /* Student sections */

  /* ---------- NEUTRALS ---------- */
  --ink:             #0F172A;
  --body-text:       #475569;
  --muted:           #64748B;
  --border:          #E2E8F0;
  --light-bg:        #F8FAFC;
  --white:           #FFFFFF;

  /* ---------- SEMANTIC FOREGROUNDS ---------- */
  --fg1: var(--capitol-slate);   /* Primary heading text */
  --fg2: var(--body-text);       /* Body text */
  --fg3: var(--muted);           /* Secondary / meta text */
  --fg-accent: var(--dc-coral);  /* Accent / inline emphasis */
  --fg-link: var(--ward-blue);

  /* ---------- SEMANTIC BACKGROUNDS ---------- */
  --bg-page:    var(--light-bg);
  --bg-surface: #FFFFFF;
  --bg-policy:  var(--ward-tint);
  --bg-comm:    var(--coral-tint);
  --bg-student: var(--rising-tint);

  /* ---------- SIGNATURE GRADIENTS ---------- */
  --gradient-authority: linear-gradient(135deg, #1E3048 0%, #3D6B8A 100%);
  --gradient-heritage:  linear-gradient(135deg, #1E3048 0%, #2A4A6B 40%, #D4736C 100%);
  --gradient-ocean:     linear-gradient(135deg, #1E3048 0%, #3D6B8A 50%, #7CC5D9 100%);
  --gradient-bridge:    linear-gradient(90deg,  #3D6B8A 0%, #5A8BA8 50%, #D4736C 100%);
  --gradient-civic:     linear-gradient(135deg, #3D6B8A 0%, #7CC5D9 100%);
  --gradient-coral:     linear-gradient(135deg, #D4736C 0%, #E8A49E 100%);
  --gradient-sunrise:   linear-gradient(135deg, #7CC5D9 0%, #A8DBE8 50%, #D4736C 100%);
  --gradient-spectrum:  linear-gradient(90deg,  #1E3048 0%, #3D6B8A 25%, #7CC5D9 50%, #D4736C 75%, #E8A49E 100%);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(30, 48, 72, 0.8);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(30, 48, 72, 0.10);
  --glass-blur: blur(12px);

  /* Mesh background overlay (used over light bg) */
  --gradient-mesh:
    radial-gradient(at 40% 20%, rgba(124, 197, 217, 0.15) 0px, transparent 50%),
    radial-gradient(at 80%  0%, rgba(212, 115, 108, 0.10) 0px, transparent 50%),
    radial-gradient(at  0% 50%, rgba(61,  107, 138, 0.10) 0px, transparent 50%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:    'SF Mono', Monaco, Consolas, monospace;

  /* Type scale (rem) */
  --t-display: 3rem;       /* 48 — hero h1 */
  --t-h1:      2.5rem;     /* 40 — section title */
  --t-h2:      1.875rem;   /* 30 */
  --t-h3:      1.375rem;   /* 22 */
  --t-h4:      1.125rem;   /* 18 */
  --t-body:    1rem;       /* 16 */
  --t-small:   0.875rem;   /* 14 */
  --t-meta:    0.75rem;    /* 12 — overline / labels */
  --t-eyebrow: 0.6875rem;  /* 11 — eyebrow uppercase */

  /* Spacing & radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 100px;

  --shadow-sm: 0 4px 24px rgba(30, 48, 72, 0.06);
  --shadow-md: 0 10px 40px rgba(30, 48, 72, 0.08);
  --shadow-lg: 0 20px 60px rgba(30, 48, 72, 0.15);
  --shadow-xl: 0 25px 80px rgba(0, 0, 0, 0.30);

  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.h-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--capitol-slate);
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--capitol-slate);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--capitol-slate);
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--capitol-slate);
}

.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--capitol-slate);
}

.p, p, body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--body-text);
}

.lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--body-text);
}

.small  { font-size: var(--t-small); }
.meta   { font-size: var(--t-meta); color: var(--muted); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--dc-coral);
}

.code, code, .mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink);
}

a, .link {
  color: var(--fg-link);
  text-decoration: none;
  transition: color 0.2s var(--ease-soft);
}
a:hover { color: var(--capitol-slate); }