/* =====================================================================
   CTSD brand tokens: colours, type, spacing, fonts.
   Palette: "Midnight and ember" (navy for trust, ember for every call to action).
   Contrast pairs are documented in the Task 2 report.
   ===================================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/montserrat-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/montserrat-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-500-normal.woff2) format('woff2');
}

:root {
  /* Brand palette (exact) */
  --navy: #0F1B2D;                    /* dark sections, header */
  --navy-700: #1F3A5F;                /* raised dark surfaces, borders on dark */
  --ember: #F2A23A;                   /* buttons and highlights; accent text on dark: 8.4:1 on navy */
  --ivory: #F7F4EE;                   /* light sections; text on dark: 15.6:1 on navy */
  --ink: #111826;                     /* body text on light */
  --teal: #2F7D6B;                    /* success and "live" states */
  --paper: #FBFAF7;                   /* page background */

  /* Derived shades */
  --navy-950: #0A1322;                /* darkest: footer, panel shadows */
  --ember-ink: #9A5B0A;               /* accent text and links on light: 5.0:1 ivory, 5.3:1 paper */
  --slate: #4E5D73;                   /* secondary text on light: 6.2:1 ivory, 6.6:1 paper */
  --ivory-muted: rgba(247, 244, 238, .76); /* secondary text on dark: 9.9:1 on navy */
  --line-dark: rgba(148, 170, 204, .22);
  --line-light: rgba(15, 27, 45, .12);

  /* Type */
  --font-head: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-label: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: .75rem;
  --fs-small: .875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-h1: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 112px;

  /* Shape + depth */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 1px 2px rgba(10, 19, 34, .06), 0 12px 32px -12px rgba(10, 19, 34, .22);
  --shadow-lift: 0 2px 4px rgba(10, 19, 34, .08), 0 24px 48px -16px rgba(10, 19, 34, .32);

  /* Layout + motion */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 68px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .6s;
}