/* =====================================================================
   DESIGN TOKENS — change brand colours and fonts here.
   Everything else in the CSS reads from these variables.
   ===================================================================== */
:root {
  /* ---- Brand palette (from the brand reference document) ---- */
  --ink:        #111111;   /* Background */
  --cream:      #E5E0D5;   /* Supporting text: used sparingly */
  --blue:       #2459B0;   /* Professional / main accent: fills, borders, blue-on-cream text */
  --white:      #FFFFFF;   /* Captions + regular text on dark */

  /* ---- Accessible tints of the brand blue for TEXT on dark ----
     #2459B0 on #111 is only 2.8:1, so on dark backgrounds:
       --blue-display  big headline words (3.5:1, passes large text)
       --blue-text     small highlighted text (5:1 on bg, 4.6:1 on cards: passes AA)        */
  --blue-display: #3068C6;
  --blue-text:    #4E83DD;

  /* ---- Neutral tints derived from the palette ---- */
  --ink-lift:   #1A1A1A;   /* card surfaces */
  --ink-lift-2: #222222;   /* raised panels */
  --line:       rgba(229, 224, 213, 0.14);   /* 1px borders on dark */
  --line-ink:   rgba(17, 17, 17, 0.16);      /* 1px borders on cream */
  --muted:      rgba(255, 255, 255, 0.72);   /* secondary text on dark */
  --muted-ink:  rgba(17, 17, 17, 0.72);      /* secondary text on cream */

  /* ---- Fonts ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-hand:    "Caveat", "Comic Sans MS", cursive;

  /* ---- Layout ---- */
  --max:      1320px;
  --gutter:   clamp(16px, 4vw, 64px);
  --section:  clamp(72px, 10vw, 140px);
  --radius:   6px;
  --pill:     999px;
  --nav-h:    60px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Section themes: each section sets which colours "text" and "highlight" mean */
.theme-dark {
  --bg: var(--ink);
  --fg: var(--white);
  --fg-muted: var(--muted);
  --hl: var(--blue-text);          /* small highlighted text */
  --hl-display: var(--blue-display);
  --rule: var(--line);
  --surface: var(--ink-lift);
}
.theme-cream {
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-muted: var(--muted-ink);
  --hl: var(--blue);               /* exact brand blue passes on cream (5.1:1) */
  --hl-display: var(--blue);
  --rule: var(--line-ink);
  --surface: #EDE9E0;
}
.theme-blue {
  --bg: var(--blue);
  --fg: var(--white);
  --fg-muted: rgba(255, 255, 255, 0.86);
  --hl: var(--white);
  --hl-display: var(--white);
  --rule: rgba(255, 255, 255, 0.28);
}