/* Milestone Renovate — design tokens (Forest × Cream × Gold).
   Single source of truth: change colours, type and spacing here, nowhere else. */

/* Web fonts: Inter 400-900 and Newsreader 400-500 are the weights the site uses (see scripts/instance_fonts.py). */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/newsreader-latin-400-500-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/fonts/newsreader-latin-400-500-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/inter-latin-400-900-normal.woff2) format("woff2")}

/* Metric-matched fallbacks: until a web font arrives, the system font is scaled to occupy the same space, so the
   swap does not move the layout. size-adjust is the median width ratio measured in Chrome over the site's own
   headings and paragraphs; ascent/descent come from the web fonts' tables divided by size-adjust. */
@font-face{font-family:"Newsreader Fallback";font-style:normal;font-weight:400 500;src:local("Times New Roman"),local("Times"),local("Liberation Serif");size-adjust:104.68%;ascent-override:70.21%;descent-override:25.31%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";font-style:italic;font-weight:400 500;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Times Italic"),local("Liberation Serif Italic");size-adjust:97.69%;ascent-override:75.25%;descent-override:27.13%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:400 500;src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:107.01%;ascent-override:90.53%;descent-override:22.54%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:101.06%;ascent-override:95.86%;descent-override:23.87%;line-gap-override:0%}

:root{
  /* Brand palette. Primary forest #0F201D leads; the secondary green shares its hue (166°) at a lighter value. */
  --color-forest-deep:#0F201D;
  --color-forest:#2A5A4F;
  --color-forest-hover:#234D43;
  --color-forest-tint:#E4EDE8;
  --color-gold:#DDB45C; /* sampled from the official logo artwork */
  --color-gold-light:#EBC678;
  --color-gold-ink:#755713;
  --color-gold-pale:#F6E1AE;
  --color-cream:#F8F6F0;
  --color-sage:#E9F1EB;
  --color-paper:#FBF9F3;
  --color-ink:#202523;
  --color-white:#FFFFFF;

  /* Semantic roles. Accent = interactive/selected state; emphasis = the one italic word in a headline;
     detail = decorative gold rules. Ruby has been retired from the identity. */
  --color-accent:var(--color-forest);
  --color-accent-deep:var(--color-forest-deep);
  --color-accent-soft:var(--color-forest-tint);
  --color-emphasis:var(--color-forest);
  --color-detail:var(--color-gold);
  --color-label:var(--color-gold-ink);

  /* Masthead: deep forest so the transparent gold logo reads (gold on cream is ~1.8:1). */
  --color-masthead:#0F201D;
  --color-masthead-ink:#EEEAE0;
  --color-masthead-line:rgba(221,180,92,.24);

  /* Derived neutrals (contrast-checked against cream/paper/white) */
  --color-ink-soft:#4A5650;
  --color-line:#D7D8CE;
  --color-line-green:#C4D6CA;
  --color-field:#F7F6F0;
  --color-field-border:#77867B;

  /* Semantic feedback — error red is reserved for errors and never used as a brand accent */
  --color-error:#B42318;
  --color-error-bg:#FDECEA;
  --color-success:#1E6B47;
  --color-notice-bg:#FFF6DD;
  --color-notice-line:#E3C878;
  --color-notice-ink:#4A3A0E;

  /* Typography */
  --font-display:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --font-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --text-hero:clamp(2.5rem,8vw,3.5rem);
  --text-hero-lg:clamp(3.5rem,6vw,5.5rem);
  --text-h2:clamp(2.1rem,4.2vw,3.75rem);
  --text-h3:clamp(1.5rem,2.4vw,2.2rem);
  --text-lead:clamp(1.3rem,1.9vw,1.75rem);

  /* Breakpoints (reference only — custom properties cannot drive @media): 600px phone, 760px phone hero,
     870px mobile navigation, 1020px single-column hero, 1160px compact masthead. */

  /* Layout */
  --wrap:1360px;
  --gutter:clamp(18px,4vw,72px);
  --section-y:clamp(72px,9vw,136px);
  --radius:2px;

  /* Elevation */
  --shadow-soft:0 18px 60px rgba(15,32,29,.08);
  --shadow-lift:0 26px 70px rgba(15,32,29,.14);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:180ms;
  --dur:320ms;
  --dur-slow:600ms;
  --dur-reveal:900ms;
  --dur-enter:1000ms;
  --m-rise:28px;
}