/* ============================================================
   UNIVISOR — Colors & Type Foundation
   Free UK university advisory service.
   Vibe: Duolingo meets Monzo — friendly, bold, youth-facing.
   Font: Poppins (Google Fonts). Brought in via @import below.
   ============================================================ */

/* Self-hosted Poppins (brand font files in fonts/). */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Poppins-Regular.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Poppins-Medium.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Poppins-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Poppins-Bold.ttf') format('truetype');}
/* Note: 800 (Extrabold) reuses the Bold file; upload Poppins-ExtraBold.ttf to add true 800. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/Poppins-Bold.ttf') format('truetype');}

:root {
  /* ---------- BRAND CORE ---------- */
  --uv-blue:        #1A56C4;   /* Primary brand blue */
  --uv-teal:        #2DBFAA;   /* Secondary / accent teal */
  --uv-navy:        #0D1B3E;   /* Dark navy — text + deep surfaces */
  --uv-gold:        #F6B23C;   /* Owl-beak gold — sparing accent / streaks */

  /* ---------- PRIMARY BLUE SCALE ---------- */
  --blue-50:   #EBF3FD;   /* brand tint (matches styleguide token) */
  --blue-100:  #D8E4FA;
  --blue-200:  #B0C8F3;
  --blue-300:  #82A6EB;
  --blue-400:  #4F7FDD;
  --blue-500:  #1A56C4;   /* = --uv-blue */
  --blue-600:  #1546A6;
  --blue-700:  #113983;
  --blue-800:  #0E2D66;
  --blue-900:  #0D1B3E;   /* = --uv-navy */

  /* ---------- TEAL SCALE ---------- */
  --teal-50:   #E8F8F5;   /* brand tint (matches styleguide token) */
  --teal-100:  #C6F2E9;
  --teal-200:  #93E6D5;
  --teal-300:  #5FD7C0;
  --teal-400:  #2DBFAA;   /* = --uv-teal */
  --teal-500:  #21A691;
  --teal-600:  #198976;
  --teal-700:  #146B5D;
  --teal-800:  #0F4F45;

  /* ---------- NEUTRALS (cool, faint blue cast) ---------- */
  --ink-900:   #0D1B3E;   /* primary text (navy) */
  --ink-800:   #1F2A4A;
  --ink-700:   #36426A;   /* secondary text */
  --ink-500:   #697490;   /* muted / captions */
  --ink-400:   #97A0B8;   /* placeholder */
  --line-300:  #DDE3EE;   /* borders / dividers */
  --line-200:  #E9EDF5;   /* hairlines / track */
  --mist-100:  #EEF1F7;   /* tinted surface */
  --mist-50:   #F5F7FA;   /* page background (matches styleguide token) */
  --text-body: #333333;   /* body copy (matches styleguide token) */
  --white:     #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --success:       #18A957;
  --success-bg:    #E4F7EC;
  --warning:       #F6A609;
  --warning-bg:    #FEF3DC;
  --error:         #E5484D;
  --error-bg:      #FCE7E8;
  --info:          var(--uv-blue);
  --info-bg:       var(--blue-50);

  /* ---------- SURFACE / SEMANTIC ROLES ---------- */
  --bg-page:       var(--mist-50);
  --bg-surface:    var(--white);
  --bg-sunken:     var(--mist-100);
  --bg-brand:      var(--uv-blue);
  --bg-brand-deep: var(--uv-navy);
  --fg-1:          var(--ink-900);   /* primary text / headings (navy) */
  --fg-2:          var(--text-body); /* body copy (#333) */
  --fg-3:          var(--ink-500);   /* muted text */
  --fg-on-brand:   #FFFFFF;
  --border:        var(--line-300);

  /* ---------- TYPE SYSTEM ---------- */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* Type scale — calibrated to the Univisor styleguide.
     Semantic h1/h2/h3/body/caption match the reference exactly;
     display sizes are added on top for marketing heroes. */
  --t-display:  3.25rem;  /* 52 — hero only */
  --t-hero:     2.5rem;   /* 40 — large hero/section */
  --t-h1:       2rem;     /* 32 / 700 / 1.2 */
  --t-h2:       1.5rem;   /* 24 / 600 / 1.3 */
  --t-h3:       1.125rem; /* 18 / 600 */
  --t-lg:       1.0625rem;/* 17 — lead */
  --t-base:     0.9375rem;/* 15 / 400 / 1.6 — body */
  --t-sm:       0.875rem; /* 14 */
  --t-xs:       0.75rem;  /* 12 / 500 — caption/label */

  --lh-tight:   1.2;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.02em;  /* headings */
  --ls-normal:  0;
  --ls-wide:    0.04em;   /* eyebrow / overline */

  /* ---------- RADII (generous, rounded) ---------- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;   /* default card/control */
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- SHADOWS (soft, blue-tinted) ---------- */
  --shadow-xs:  0 1px 2px rgba(13,27,62,0.06);
  --shadow-sm:  0 2px 8px rgba(13,27,62,0.06);
  --shadow-md:  0 8px 24px rgba(13,27,62,0.08);
  --shadow-lg:  0 16px 40px rgba(13,27,62,0.10);
  --shadow-brand: 0 10px 24px rgba(26,86,196,0.28);  /* on primary CTAs */
  --shadow-teal:  0 10px 24px rgba(45,191,170,0.28);

  /* ---------- MOTION ---------- */
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);  /* playful overshoot */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  margin: 0;
}
.h-display { font-size: var(--t-display); font-weight: var(--fw-extra); line-height: 1.05; }
.h1 { font-size: var(--t-h1); font-weight: var(--fw-bold);     line-height: var(--lh-tight); }
.h2 { font-size: var(--t-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.h3 { font-size: var(--t-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }
.h4 { font-size: var(--t-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }

.lead { font-size: var(--t-lg); line-height: var(--lh-relaxed); color: var(--text-body); }
.body { font-size: var(--t-base); line-height: var(--lh-normal); color: var(--text-body); }
.small { font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--fg-3); }

.eyebrow {
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--uv-teal);
}
.caption { font-size: var(--t-xs); color: var(--fg-3); }