/* ============================================================
   CSJMSS — base.css
   Design tokens, reset, typography. No component rules here.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette — Modern Academic */
  --navy-deep:   #082a63;   /* footer, deep accents */
  --navy:        #0b3d91;   /* primary */
  --blue:        #1559b6;   /* gradient mid */
  --blue-bright: #1f7ae0;   /* accent */
  --blue-sky:    #38bdf8;   /* light accent */
  --gold:        #ffb703;   /* CTA / notice */
  --gold-dark:   #f59e0b;

  /* Neutrals */
  --bg:        #ffffff;
  --bg-alt:    #f6f8fc;     /* section alt background */
  --bg-tint:   #eef3fc;     /* very light blue card */
  --text:      #1a2238;
  --text-muted:#5a6377;
  --border:    #e3e9f5;

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-serif: "Georgia", "Times New Roman", serif;

  /* Scale */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(20,30,60,.06);
  --shadow:    0 8px 24px rgba(20,30,60,.10);
  --shadow-lg: 0 16px 40px rgba(20,30,60,.14);
  --container: 1200px;

  /* Gradients */
  --grad-hero: linear-gradient(120deg, #082a63 0%, #1559b6 55%, #1f7ae0 100%);
  --grad-navy: linear-gradient(135deg, #0b3d91, #1559b6);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { color: var(--text-muted); }

/* ---------- Accessibility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }

/* ---------- Scroll-reveal (driven by main.js) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}