/* Greyton Conservation Society — design tokens.
   Ported verbatim from greyton-conservation-society-design-system/project/tokens/.
   Do not introduce raw hex or px values outside this file. */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Loaded from a <link> in the document head, not an @import here: an @import
   is only discovered after this stylesheet arrives, which chains the requests
   and delays the first text render on slow connections. */

/* ── Colour ────────────────────────────────────────────────────────────── */
:root{
  /* Kloof — the deep shaded green of the Riviersonderend gorge. Primary. */
  --kloof-900:#101E16;
  --kloof-800:#16291D;
  --kloof-700:#1E3A2B;
  --kloof-600:#2A4F38;
  --kloof-500:#3F6B4E;
  --kloof-400:#5C8A69;
  --kloof-300:#8CAF97;
  --kloof-200:#BFD4C5;
  --kloof-100:#E1EBE3;
  --kloof-050:#F0F5F1;

  /* Fynbos sage — dry mountain scrub */
  --sage-600:#5F6B54;
  --sage-500:#7C8A6B;
  --sage-400:#9CA88C;
  --sage-300:#BFC7B1;
  --sage-200:#DDE2D2;
  --sage-100:#EEF0E7;

  /* Klipsteen — the sandstone and dirt-road warmth of the village */
  --stone-900:#2A241B;
  --stone-700:#5A4E3C;
  --stone-500:#8C7B60;
  --stone-300:#C3B49A;
  --stone-200:#E3D9C6;
  --stone-100:#F2ECDF;
  --stone-050:#FAF7EF;

  /* Leiwater — the furrow water running down every street */
  --lei-700:#1E4E58;
  --lei-500:#2F6E7A;
  --lei-300:#7FAAB1;
  --lei-100:#DCE9EA;

  /* Ferricrete — the red-brown gravel and protea bracts */
  --clay-700:#7E3E37;
  --clay-500:#A9584F;
  --clay-300:#D3A19A;
  --clay-100:#F3E2DF;

  /* Sonop — late-afternoon light on the mountain */
  --ochre-700:#8E5F18;
  --ochre-500:#C98A2E;
  --ochre-300:#E6C489;
  --ochre-100:#F8ECD6;

  /* Ink & paper */
  --ink-900:#15180F;
  --ink-700:#33382B;
  --ink-500:#5B6153;
  --ink-400:#7C8375;
  --ink-300:#A7AC9F;
  --paper:#FBF9F3;
  --paper-raised:#FFFFFF;
  --white:#FFFFFF;

  /* Semantic aliases */
  --brand:var(--kloof-700);
  --brand-strong:var(--kloof-800);
  --brand-soft:var(--kloof-100);
  --brand-contrast:var(--stone-050);
  --accent:var(--ochre-500);
  --accent-soft:var(--ochre-100);

  --text-body:var(--ink-700);
  --text-heading:var(--kloof-800);
  --text-muted:var(--ink-500);
  /* ink-400 measured 3.41–3.92:1 on the page surfaces — under AA for the small
     text that used it (hints, stat notes, units). ink-500 clears 5.4:1
     everywhere and still sits a step lighter than ink-700 body copy. */
  --text-faint:var(--ink-500);
  --text-on-brand:var(--stone-050);
  --text-link:var(--kloof-600);
  --text-link-hover:var(--clay-500);

  --surface-page:var(--paper);
  --surface-card:var(--paper-raised);
  --surface-sunken:var(--stone-100);
  --surface-brand:var(--kloof-700);
  --surface-brand-deep:var(--kloof-900);
  --surface-sage:var(--sage-100);
  --surface-water:var(--lei-100);

  --border-hairline:rgba(21,24,15,.12);
  --border-strong:rgba(21,24,15,.28);
  --border-on-brand:rgba(251,249,243,.22);
  --border-focus:var(--ochre-500);

  --success:var(--kloof-500);
  --success-soft:var(--kloof-100);
  --warning:var(--ochre-500);
  --warning-soft:var(--ochre-100);
  --danger:var(--clay-500);
  --danger-soft:var(--clay-100);
  --info:var(--lei-500);
  --info-soft:var(--lei-100);

  /* Programme colour-coding used across the site and signage */
  --prog-nature:var(--kloof-500);
  --prog-heritage:var(--stone-500);
  --prog-water:var(--lei-500);
  --prog-wildlife:var(--clay-500);
  --prog-community:var(--ochre-500);

  /* Image treatment overlays */
  --scrim-photo:linear-gradient(180deg,rgba(16,30,22,0) 0%,rgba(16,30,22,.18) 45%,rgba(16,30,22,.78) 100%);
  --scrim-flat:rgba(16,30,22,.42);
  --scrim-hero:linear-gradient(180deg,rgba(16,30,22,.30) 0%,rgba(16,30,22,.44) 24%,rgba(16,30,22,.62) 45%,rgba(16,30,22,.90) 100%);
}

/* ── Typography ────────────────────────────────────────────────────────── */
:root{
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Type scale — 1.25 major third, tuned by hand at the small end */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:17px;
  --text-md:19px;
  --text-lg:23px;
  --text-xl:29px;
  --text-2xl:37px;
  --text-3xl:47px;
  --text-4xl:60px;
  --text-5xl:76px;

  --leading-tight:1.06;
  --leading-snug:1.18;
  --leading-normal:1.45;
  --leading-relaxed:1.62;

  --tracking-tight:-0.018em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-eyebrow:0.14em;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Semantic roles */
  --type-hero:var(--weight-light) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-regular) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-regular) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-medium) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-lede:var(--weight-light) var(--text-md)/var(--leading-relaxed) var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-label:var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans);
  --type-eyebrow:var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans);
  --type-data:var(--weight-regular) var(--text-sm)/1.3 var(--font-mono);
}

/* ── Spacing, layout, radii ────────────────────────────────────────────── */
:root{
  /* 4px base, with a 6px step because the signage-style labels need it */
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:56px;
  --space-12:72px;
  --space-13:96px;
  --space-14:128px;

  --gutter-page:24px;
  --gutter-page-lg:48px;
  --measure-prose:64ch;
  --width-content:1180px;
  --width-narrow:760px;

  --section-y:var(--space-13);
  --section-y-tight:var(--space-11);

  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:22px;
  --radius-pill:999px;

  --hit-min:44px;
  --control-sm:32px;
  --control-md:40px;
  --control-lg:48px;

  --border-thin:1px;
  --border-thick:2px;
  --rule-lei:2px;
}

/* ── Elevation ─────────────────────────────────────────────────────────── */
:root{
  /* Shadows stay warm and low — village daylight, never neutral grey UI drop */
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-sm:0 1px 2px rgba(42,36,27,.06),0 1px 1px rgba(42,36,27,.04);
  --shadow-md:0 2px 6px rgba(42,36,27,.07),0 8px 20px -12px rgba(42,36,27,.14);
  --shadow-lg:0 4px 12px rgba(42,36,27,.08),0 20px 44px -20px rgba(42,36,27,.20);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-focus:0 0 0 3px rgba(201,138,46,.45);

  --blur-veil:saturate(1.05) blur(14px);
  --veil-light:rgba(251,249,243,.82);
  --veil-dark:rgba(16,30,22,.62);
}

/* ── Motion ────────────────────────────────────────────────────────────── */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --ease-drift:cubic-bezier(.33,.02,.24,1);

  --dur-instant:90ms;
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:420ms;
  --dur-drift:900ms;

  --transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  --transition-surface:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* No scroll-behavior:smooth here — ScrollTrigger jumps to the top to measure on
   refresh, and a smooth jump is asynchronous, so it measures at the wrong
   origin and every trigger's start/end is offset by the current scroll. Anchor
   links are smooth-scrolled from main.js instead. */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-family:var(--font-display);font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 35%,transparent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
img{display:block;max-width:100%}
::selection{background:var(--ochre-300);color:var(--ink-900)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;animation-iteration-count:1!important}
}