/* ============================================================
   Brand palette.
   Five brand colours anchor the site:
     #F1F7ED  paper       very light green-white
     #243E36  forest      deep green, the workhorse for text and brand
     #7CA982  sage        mid green
     #E0EEC6  meadow      pale green
     #C2A83E  gold        warm accent

   Two of these cannot be used for text or data marks as given. Measured
   against the paper background, sage sits at 2.45:1 and gold at 2.15:1, both
   under the 3:1 floor, and together they separate by only ΔE 11 — below the 15
   needed to tell apart with full colour vision. So sage and gold are used for
   fills, borders and decoration, and a darkened gold (#8A7420, 4.57:1) carries
   any gold that has to be read.
   Every text pair in this file was checked to WCAG AA before shipping.
   ============================================================ */
:root {
  /* --- Brand --- */
  --paper: #f1f7ed;
  --forest: #243e36;
  --forest-deep: #16261f;
  --sage: #7ca982;
  /* Sage is only 3.53:1 over the hero scrim — fine as large text, short of AA
     for normal text. This lighter step reaches 4.88:1 and is used on imagery. */
  --sage-bright: #9dc4a3;
  --meadow: #e0eec6;
  --gold: #c2a83e;
  --gold-readable: #8a7420;
  --white: #ffffff;

  /* --- Semantic surface tokens (swapped in dark mode) --- */
  --bg: #f1f7ed;
  --surface: #ffffff;
  --surface-alt: #e8f2dc;
  --ink: #243e36;
  --ink-soft: #41594e;
  --ink-faint: #5f7a6c;
  --border: #d7e6c8;

  --brand: #2f5546;
  --brand-strong: #243e36;
  --brand-pale: #e0eec6;
  --accent: #8a7420;

  /* Methods-audit figure: emphasis pair (as-applied vs corrected).
     Forest vs darkened gold — ΔE 24.7 normal, 22.1 under protanopia, both
     above 3:1 on the surface. Values are always text-labelled as well. */
  --audit-claimed: #8a7420;
  --audit-actual: #243e36;

  /* "Available" indicator — a green distinct from the brand sage so it reads as
     status rather than decoration. */
  --live: #3f8f5a;
  --live-glow: rgba(63, 143, 90, 0.5);

  /* Page-wide map wash. Multiply darkens the linework onto the pale paper;
     dark mode needs the opposite operator (see below). */
  --page-map-opacity: 0.05;
  --page-map-blend: multiply;

  /* Hero gradient — forest floor darkness up into sage */
  --hero-gradient: linear-gradient(120deg, #16261f 0%, #243e36 42%, #35564a 74%, #4e6b45 100%);

  /* --- Typography --- */
  --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  /* --- Golden ratio ---
     One constant drives the type scale, the spacing rhythm and the major layout
     splits, so proportions repeat at every zoom level instead of being picked
     per component. */
  --phi: 1.618;

  /* Type scale: successive powers of phi for display sizes, and its square root
     (1.272) between the text sizes, since a full phi step between body and lead
     is too coarse to read as a scale. */
  --text-xs: 0.786rem;    /* 1/√φ  */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.272rem;    /* √φ    */
  --text-xl: 1.618rem;    /* φ     */
  --text-2xl: 2.058rem;   /* φ·√φ  */
  --text-3xl: 2.618rem;   /* φ²    */
  --text-display: clamp(2.618rem, 6vw, 4.236rem); /* φ² → φ³ */

  /* --- Spacing: the same phi progression --- */
  --space-xs: 0.618rem;   /* 1/φ   */
  --space-sm: 1rem;
  --space-md: 1.618rem;   /* φ     */
  --space-lg: 2.618rem;   /* φ²    */
  --space-xl: 4.236rem;   /* φ³    */
  --space-2xl: 6.854rem;  /* φ⁴    */

  /* --- Motion ---
     Tuned against how restrained professional personal sites actually move:
     short durations, one shared easing curve, and travel measured in a few
     pixels rather than tens. Long, far transitions read as sluggish. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.4s;
  /* Cinematic entrances run longer than UI feedback — deliberate, not sluggish,
     and reserved for first-paint and section reveals. */
  --dur-cine: 0.9s;
  --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-shift: 10px;
  --lift: -2px;

  /* --- Layout --- */
  --max-width: 1120px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(36, 62, 54, 0.05);
  --shadow: 0 6px 24px rgba(36, 62, 54, 0.09);
  --shadow-lg: 0 24px 60px rgba(22, 38, 31, 0.22);
}

/* ============================================================
   Dark mode — its own steps against the dark surface, not a flip.
   ============================================================ */
:root[data-theme="dark"] {
  --bg: #101c17;
  --surface: #1e332b;
  --surface-alt: #26402f;
  --ink: #e8f2e4;
  --ink-soft: #b4c8b8;
  --ink-faint: #8fa795;
  --border: #33503f;

  --brand: #9dc4a3;
  --brand-strong: #c0dcc2;
  --brand-pale: #26402f;
  --accent: #d9bc55;

  /* Sage against gold fails the normal-vision floor at every lightness
     (ΔE ~11), so dark mode pairs meadow against gold instead: ΔE 21.0
     normal, 20.5 under deuteranopia, both above 3:1 on #1e332b. */
  --audit-claimed: #c2a83e;
  --audit-actual: #e0eec6;

  --live: #57bd7d;
  --live-glow: rgba(87, 189, 125, 0.5);

  /* Multiply would erase the map against a dark ground, so dark mode lightens
     it with screen instead, at a lower opacity to stay subtle. */
  --page-map-opacity: 0.04;
  --page-map-blend: screen;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
}