/* iColleges design tokens — single source of truth.
   Linked from every page (guideline + 4 prototypes). */

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

:root {
  /* ── Brand & action ───────────────────────────────────────── */
  --teal:        #1D9E75;
  --teal-dark:   #0F6E56;
  --teal-deep:   #04342C;
  --teal-light:  #E1F5EE;

  /* ── Category accents ────────────────────────────────────── */
  --blue:        #378ADD;
  --blue-dark:   #0C447C;
  --blue-light:  #E3F0FC;

  --pink:        #D4537E;
  --pink-dark:   #72243E;
  --pink-light:  #FCE6EE;

  --purple:      #7F77DD;
  --purple-dark: #3C3489;
  --purple-light:#ECEAFB;

  --amber:       #BA7517;
  --amber-dark:  #633806;
  --amber-light: #FCEFD9;

  /* ── Status (kept apart from teal/CTAs) ──────────────────── */
  --status-pos:  #639922;
  --status-pos-light: #EBF5DD;
  --status-warn: #BA7517;     /* = amber */
  --status-warn-light: #FCEFD9;
  --status-neutral: #9A9AA8;
  --status-neutral-light: #EFEFEC;

  /* ── Neutrals ────────────────────────────────────────────── */
  --ink:         #1A1A2E;
  --ink-2:       #6B6B7B;
  --ink-3:       #9A9AA8;
  --white:       #FFFFFF;
  --base:        #F7F8F6;     /* page background — warm off-white */
  --line:        #E6E7E3;
  --line-strong: #D4D6CF;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;       /* default control radius */
  --r-lg: 14px;       /* cards */
  --r-xl: 20px;       /* hero panels */
  --r-pill: 999px;

  /* ── Spacing scale ───────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── Type scale ──────────────────────────────────────────── */
  --t-display: 56px;
  --t-h1:      40px;
  --t-h1-m:    28px;
  --t-h2:      26px;
  --t-h3:      20px;
  --t-h4:      17px;
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 13px;
  --t-micro:   12px;

  /* ── Elevation ───────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(26, 26, 46, 0.04), 0 1px 1px rgba(26, 26, 46, 0.03);
  --shadow-2: 0 4px 12px rgba(26, 26, 46, 0.06);
  --shadow-3: 0 12px 32px rgba(26, 26, 46, 0.10);
  --focus-ring: 0 0 0 3px rgba(29, 158, 117, 0.25);

  /* ── Fonts ───────────────────────────────────────────────── */
  --font-display: "Onest", "Inter", system-ui, -apple-system, sans-serif;
  --font-text:    "Inter", "Onest", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* ── Reset-ish base ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  color: var(--ink);
  background: var(--base);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.01em; }

p { margin: 0; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* ── Reusable utility classes ──────────────────────────────── */
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-2); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.divider { height: 1px; background: var(--line); border: 0; }

@media (max-width: 720px) {
  :root {
    --t-h1: var(--t-h1-m);
    --t-h2: 22px;
    --t-h3: 18px;
  }
}