/* =====================================================================
 *  tokens.css — design tokens
 *  ---------------------------------------------------------------------
 *  "Precision Academic" system: deep institutional navy, warm graphite
 *  neutrals, and a single accent — the institutional navy itself.
 *  Sharp, drafting-table corners. Inter for interface + heading type,
 *  a slab-serif reserved for pull-quotes and the HOD message to give
 *  the page one moment of editorial warmth against all the crisp
 *  institutional grid.
 * ===================================================================== */

:root {
  /* ---- Brand navy scale (from #012f70) ---- */
  --brand-50: #eef4ff;
  --brand-100: #dbe6f7;
  --brand-200: #b7ccef;
  --brand-300: #84a9e0;
  --brand-400: #3f74c9;
  --brand-500: #1b4f9e;
  --brand-600: #0a3d83;
  --brand-700: #012f70;
  --brand-800: #012a63;
  --brand-900: #012454;
  --brand-950: #001a3d;

  /* ---- Neutrals ---- */
  --ink-950: #0a0a0a;
  --ink-900: #14171b;
  --ink-700: #33383f;
  --ink-500: #4b5563;
  --ink-400: #6b7280;
  --ink-300: #a7aeb8;
  --ink-200: #d5d9de;
  --ink-100: #e8eaed;
  --ink-50: #f5f5f5;
  --paper: #ffffff;

  --surface: var(--paper);
  --surface-muted: var(--ink-50);
  --surface-sunken: #eef1f4;
  --border: #e4e7ec;
  --border-strong: var(--ink-200);

  --text: var(--ink-950);
  --text-muted: var(--ink-500);
  --text-soft: var(--ink-400);
  --text-on-brand: #ffffff;

  /* ---- Corner radius: sharp, drafting-table geometry ---- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 3px;

  /* ---- Typography ---- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  --fs-2xs: 0.6875rem;   /* 11px */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: 1.25rem;      /* 20px */
  --fs-xl: 1.5rem;       /* 24px */
  --fs-2xl: 1.875rem;    /* 30px */
  --fs-3xl: 2.375rem;    /* 38px */
  --fs-4xl: 3rem;        /* 48px */
  --fs-5xl: 3.75rem;     /* 60px */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 2px rgb(11 13 16 / 0.05), 0 8px 24px rgb(11 13 16 / 0.06);
  --shadow-lift: 0 4px 10px rgb(11 13 16 / 0.08), 0 20px 45px rgb(1 47 112 / 0.14);
  --shadow-ring: 0 0 0 3px rgb(1 47 112 / 0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --header-h: 3.75rem;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 4.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}