/* =========================================================
   IELTS 1984 — Color & Type tokens
   Derived from: https://ielts1984.vn (Apr 2026 captures)
   Font: Montserrat (self-hosted, full weight range)
   ========================================================= */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* --- BRAND CORE ------------------------------------------------ */
  --brand-navy:       #104070;  /* primary dark navy — logo & headlines */
  --brand-navy-800:   #164675;  /* navy used in running CSS */
  --brand-navy-700:   #205078;
  --brand-navy-600:   #35628B;
  --brand-red:        #C12525;  /* accent red — "9" + underline brush */
  --brand-red-dark:   #A01E1E;

  /* --- SURFACES (soft blues from the site) ---------------------- */
  --surface-0:        #FFFFFF;  /* page */
  --surface-1:        #F6F9FD;  /* very light fill */
  --surface-blue:     #DFEDFD;  /* hero + section bg */
  --surface-blue-alt: #EEF2F9;  /* alt section bg / syllabus */
  --surface-blue-mid: #BED8F1;  /* decorative mid blue */
  --surface-cream:    #FFF6F6;  /* soft pink-cream — careers page background */
  --surface-navy:     #104070;  /* inverted dark sections / footer */

  /* --- FOREGROUND --------------------------------------------- */
  --fg-1:             #0E2E54;  /* primary text — deep navy */
  --fg-2:             #3B5775;  /* secondary text */
  --fg-3:             #6E829B;  /* tertiary / helper */
  --fg-muted:         #96A5BA;
  --fg-on-navy:       #FFFFFF;  /* text on navy surface */
  --fg-on-navy-muted: #C6D6E8;

  /* --- BORDERS --------------------------------------------- */
  --border-1:         #D6E2F0;  /* primary hairline */
  --border-2:         #E8EEF6;  /* soft */
  --border-strong:    #104070;

  /* --- SEMANTIC STATES --------------------------------------- */
  --success:          #1E7F4F;
  --warning:          #D18A1F;
  --danger:           #C12525;
  --info:             #1F5FB8;

  /* --- RADII ------------------------------------------------- */
  --radius-xs:        4px;
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-pill:      9999px;

  /* --- SHADOWS ----------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(16, 64, 112, 0.06);
  --shadow-md:  0 4px 14px rgba(16, 64, 112, 0.08), 0 1px 2px rgba(16, 64, 112, 0.05);
  --shadow-lg:  0 12px 32px rgba(16, 64, 112, 0.12), 0 2px 6px rgba(16, 64, 112, 0.06);
  --shadow-focus: 0 0 0 4px rgba(16, 64, 112, 0.18);

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

  /* --- TYPE: families --------------------------------------- */
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;         /* same family for display & body */
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* --- TYPE: scale ------------------------------------------ */
  --fs-display-xl: clamp(44px, 6vw, 72px);
  --fs-display-lg: clamp(36px, 5vw, 56px);
  --fs-display-md: clamp(28px, 4vw, 44px);
  --fs-h1:         32px;
  --fs-h2:         26px;
  --fs-h3:         20px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;

  /* --- TYPE: tracking/leading ------------------------------- */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-eyebrow: 0.14em;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Use these as-is or copy into component scoped CSS.
   ========================================================= */
html { font-family: var(--font-sans); color: var(--fg-1); }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--surface-0); -webkit-font-smoothing: antialiased; }

h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--brand-navy); margin: 0 0 var(--s-5); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-md); line-height: var(--lh-tight); color: var(--brand-navy); margin: 0 0 var(--s-5); }
h3, .h3 { font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); color: var(--brand-navy); margin: 0 0 var(--s-4); }
h4, .h4 { font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--brand-navy); margin: 0 0 var(--s-3); }
h5, .h5 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--brand-navy); margin: 0 0 var(--s-3); }

p  { margin: 0 0 var(--s-4); color: var(--fg-2); line-height: var(--lh-relaxed); }
a  { color: var(--brand-red); text-decoration: none; }
a:hover { color: var(--brand-red-dark); text-decoration: underline; }

.eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 600; font-size: var(--fs-body-sm); color: var(--brand-red); }
.lead    { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* Brand flourish: hand-drawn red underline, reminiscent of the logo's brush arrow */
.accent-underline {
  background-image: linear-gradient(transparent 65%, rgba(193, 37, 37, 0.85) 65%, rgba(193, 37, 37, 0.85) 95%, transparent 95%);
  background-repeat: no-repeat;
  background-size: 100% 0.9em;
  background-position: 0 0.8em;
  padding: 0 2px;
}

/* Tree-course pill */
.course-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-body-sm);
  background: var(--surface-blue); color: var(--brand-navy);
}