/* ============================================================
   BrightPath Education — Color & Type System
   A premium, trust-driven palette anchored by deep compass-blue.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,500;1,400;1,500&display=swap");

:root {
  /* ---------- Brand Color (Compass Navy) ---------- */
  --bp-navy-900: #0B2545;   /* deepest — hero backgrounds, footer */
  --bp-navy-800: #13315C;   /* primary brand — logo, headlines on light */
  --bp-navy-700: #1E4B82;   /* hovers, links */
  --bp-navy-600: #2E6BB0;   /* secondary brand */
  --bp-navy-500: #4A86C5;   /* compass-mid — illustrations, accents */
  --bp-navy-400: #7AA9D6;   /* soft accent */
  --bp-navy-300: #B6D0E8;   /* tints, badges */
  --bp-navy-200: #DCE8F4;   /* surface tint */
  --bp-navy-100: #EDF3FA;   /* subtle background */
  --bp-navy-50:  #F6F9FC;   /* page wash */

  /* ---------- Neutrals (warm-cool greys) ---------- */
  --bp-ink-900: #0E1620;    /* body strong */
  --bp-ink-800: #1F2937;
  --bp-ink-700: #374151;    /* body */
  --bp-ink-600: #4B5563;    /* secondary text */
  --bp-ink-500: #6B7280;    /* muted */
  --bp-ink-400: #9CA3AF;
  --bp-ink-300: #CBD5E1;    /* hairlines */
  --bp-ink-200: #E5E7EB;    /* borders */
  --bp-ink-100: #F1F4F8;    /* subtle surface */
  --bp-ink-50:  #F8FAFC;    /* page bg */
  --bp-white:   #FFFFFF;

  /* ---------- Semantic Accents (used sparingly) ---------- */
  --bp-gold-500: #C9A24C;   /* premium accent — prize/achievement */
  --bp-gold-100: #F6EFDC;
  --bp-success: #2E8B6B;
  --bp-success-bg: #E6F2EC;
  --bp-warning: #B7791F;
  --bp-error:   #B23A3A;

  /* ---------- Surfaces ---------- */
  --bp-surface:           var(--bp-white);
  --bp-surface-muted:     var(--bp-navy-50);
  --bp-surface-inverted:  var(--bp-navy-900);
  --bp-surface-tint:      var(--bp-navy-100);

  /* ---------- Text ---------- */
  --bp-fg:        var(--bp-ink-900);
  --bp-fg-body:   var(--bp-ink-700);
  --bp-fg-muted:  var(--bp-ink-500);
  --bp-fg-on-dark: #EAF1F9;
  --bp-fg-on-dark-muted: #A9BBD0;
  --bp-fg-brand:  var(--bp-navy-800);

  /* ---------- Border ---------- */
  --bp-border:        var(--bp-ink-200);
  --bp-border-strong: var(--bp-ink-300);
  --bp-border-brand:  var(--bp-navy-300);

  /* ---------- Type Families ---------- */
  --bp-font-sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bp-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --bp-font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type Scale (desktop-first; clamp for fluidity) ---------- */
  --bp-fs-display: clamp(48px, 5.6vw, 76px);  /* hero */
  --bp-fs-h1:      clamp(36px, 4vw, 56px);
  --bp-fs-h2:      clamp(28px, 2.8vw, 40px);
  --bp-fs-h3:      clamp(22px, 2vw, 28px);
  --bp-fs-h4:      20px;
  --bp-fs-lead:    clamp(18px, 1.4vw, 22px);
  --bp-fs-body:    17px;
  --bp-fs-sm:      15px;
  --bp-fs-xs:      13px;
  --bp-fs-eyebrow: 13px;

  /* ---------- Line heights ---------- */
  --bp-lh-tight:    1.05;
  --bp-lh-headline: 1.15;
  --bp-lh-snug:     1.35;
  --bp-lh-body:     1.6;
  --bp-lh-loose:    1.75;

  /* ---------- Tracking ---------- */
  --bp-tr-display: -0.02em;
  --bp-tr-headline: -0.015em;
  --bp-tr-body: 0;
  --bp-tr-eyebrow: 0.14em; /* uppercase eyebrows */

  /* ---------- Spacing (8pt base) ---------- */
  --bp-space-1: 4px;
  --bp-space-2: 8px;
  --bp-space-3: 12px;
  --bp-space-4: 16px;
  --bp-space-5: 24px;
  --bp-space-6: 32px;
  --bp-space-7: 48px;
  --bp-space-8: 64px;
  --bp-space-9: 96px;
  --bp-space-10: 128px;
  --bp-space-section: clamp(72px, 9vw, 128px); /* between page sections */

  /* ---------- Radii (soft, not too playful) ---------- */
  --bp-radius-xs: 4px;
  --bp-radius-sm: 8px;
  --bp-radius-md: 12px;
  --bp-radius-lg: 16px;
  --bp-radius-xl: 24px;
  --bp-radius-pill: 999px;

  /* ---------- Shadows (soft, premium — never harsh) ---------- */
  --bp-shadow-xs: 0 1px 2px rgba(11, 37, 69, 0.06);
  --bp-shadow-sm: 0 2px 6px rgba(11, 37, 69, 0.06), 0 1px 2px rgba(11, 37, 69, 0.04);
  --bp-shadow-md: 0 8px 24px rgba(11, 37, 69, 0.08), 0 2px 6px rgba(11, 37, 69, 0.04);
  --bp-shadow-lg: 0 18px 48px rgba(11, 37, 69, 0.12), 0 4px 12px rgba(11, 37, 69, 0.06);
  --bp-shadow-xl: 0 32px 80px rgba(11, 37, 69, 0.18);
  --bp-shadow-ring: 0 0 0 4px rgba(46, 107, 176, 0.18);

  /* ---------- Gradients (soft, restrained) ---------- */
  --bp-grad-hero: radial-gradient(120% 100% at 100% 0%, #1E4B82 0%, #0B2545 60%);
  --bp-grad-soft: linear-gradient(180deg, #F6F9FC 0%, #EDF3FA 100%);
  --bp-grad-card: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%);

  /* ---------- Motion ---------- */
  --bp-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --bp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --bp-dur-fast:    140ms;
  --bp-dur-base:    220ms;
  --bp-dur-slow:    420ms;

  /* ---------- Container widths ---------- */
  --bp-container:   1200px;
  --bp-container-narrow: 880px;
  --bp-container-wide:   1360px;
}

/* ============================================================
   Semantic role classes (use these directly in markup)
   ============================================================ */

.bp-display {
  font-family: var(--bp-font-sans);
  font-weight: 800;
  font-size: var(--bp-fs-display);
  line-height: var(--bp-lh-tight);
  letter-spacing: var(--bp-tr-display);
  color: var(--bp-fg);
  text-wrap: balance;
}

.bp-h1 {
  font-family: var(--bp-font-sans);
  font-weight: 700;
  font-size: var(--bp-fs-h1);
  line-height: var(--bp-lh-headline);
  letter-spacing: var(--bp-tr-headline);
  color: var(--bp-fg);
  text-wrap: balance;
}

.bp-h2 {
  font-family: var(--bp-font-sans);
  font-weight: 700;
  font-size: var(--bp-fs-h2);
  line-height: var(--bp-lh-headline);
  letter-spacing: var(--bp-tr-headline);
  color: var(--bp-fg);
  text-wrap: balance;
}

.bp-h3 {
  font-family: var(--bp-font-sans);
  font-weight: 600;
  font-size: var(--bp-fs-h3);
  line-height: var(--bp-lh-snug);
  color: var(--bp-fg);
  text-wrap: balance;
}

.bp-h4 {
  font-family: var(--bp-font-sans);
  font-weight: 600;
  font-size: var(--bp-fs-h4);
  line-height: var(--bp-lh-snug);
  color: var(--bp-fg);
}

.bp-lead {
  font-family: var(--bp-font-sans);
  font-weight: 400;
  font-size: var(--bp-fs-lead);
  line-height: var(--bp-lh-snug);
  color: var(--bp-fg-body);
  text-wrap: pretty;
}

.bp-body {
  font-family: var(--bp-font-sans);
  font-weight: 400;
  font-size: var(--bp-fs-body);
  line-height: var(--bp-lh-body);
  color: var(--bp-fg-body);
  text-wrap: pretty;
}

.bp-small {
  font-family: var(--bp-font-sans);
  font-weight: 400;
  font-size: var(--bp-fs-sm);
  line-height: var(--bp-lh-body);
  color: var(--bp-fg-muted);
}

.bp-eyebrow {
  font-family: var(--bp-font-sans);
  font-weight: 600;
  font-size: var(--bp-fs-eyebrow);
  letter-spacing: var(--bp-tr-eyebrow);
  text-transform: uppercase;
  color: var(--bp-navy-700);
}

.bp-quote {
  font-family: var(--bp-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: var(--bp-lh-snug);
  color: var(--bp-navy-800);
  text-wrap: balance;
}

/* Tagline — matches the brand mark’s italic serif treatment */
.bp-tagline {
  font-family: var(--bp-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--bp-navy-700);
  letter-spacing: 0.01em;
}