/* ============================================================
   GEO EARTH HOLDINGS — DESIGN TOKENS
   The single token file. Blueprint §3 ("the gel").

   EXTRACTED 2026-07-23 from the two :root blocks that previously sat
   inline in site.css (lines 14-40 and 323-335 of the pre-refactor file).
   This was a PURE REFACTOR: every value below is byte-for-byte the value
   that was already live. Nothing was retuned, rounded or "improved".

   WHY IT IS ITS OWN FILE
   The per-vertical re-skin (blueprint §4) works by overriding ONE
   custom property, --accent. That only stays safe if there is exactly
   one place tokens are defined. A second definition site is how two
   verticals silently drift apart.

   BLUEPRINT CONFLICT — READ BEFORE EDITING
   Blueprint §3.1/§3.2/§3.5 prescribes *different values* to these
   (e.g. --t-h1: clamp(2.25rem,4.5vw,3.5rem) vs the live
   clamp(30px,6vw,58px); an 8px base grid; a different easing curve).
   Those were written without reading this repo. Phase 1 is specified as
   ZERO VISUAL CHANGE, so the LIVE values win and are what you see below.
   Adopting the blueprint's numbers is a deliberate retune of the whole
   site — a separate, screenshot-diffed piece of work, not a side effect
   of this extraction.

   Load order: this file is linked BEFORE site.css in inc/head.php.
   Custom properties resolve at use time, so order is not strictly
   load-bearing — but keep it, because it is what a reader expects.
   ============================================================ */

:root{
  /* ---- COLOUR: brand ---- */
  --geo-blue:#0F5493;  --geo-blue-l:#12A0DC;
  --earth-g1:#157A2A;  --earth-g2:#2FB030;  --leaf:#7EE637;

  /* ---- COLOUR: grounds ---- */
  --forest:#07231A;    --forest-2:#0C3527;  --forest-deep:#051912;
  --forest-3:#123F2E;
  --paper:#FFFFFF;     --paper-2:#F4F7F5;   --paper-3:#EDF2EE;

  /* ---- COLOUR: ink ---- */
  --ink:#0E1A14;       --ink-dim:#5A6B61;
  --ink-dim-2:#4C5C53;      /* 7.09 on paper — small text */
  --ink-inv:#EEF5F0;   --ink-inv-dim:#A6BCAE;
  --blue-on-dark:#6FC7F0;   /* 8.78/7.14/6.25 on forest/-2/-3 */

  /* ---- COLOUR: lines ---- */
  --line:rgba(126,230,55,.16);
  --line-light:#E2E8E4;
  --line-inv:rgba(238,245,240,.14);
  --line-strong:#C9D4CD;

  /* ---- COLOUR: action ---- */
  --cta:#157A2A;       --cta-hover:#0F5F1F;  --cta-ink:#FFFFFF;

  /* ---- FAMILY ACCENT ----
     Drives the blue/green split from one variable. body.svc--move /
     body.svc--env (below) repoint these per service page.
     This is the seam the per-vertical --accent re-skin extends. */
  --fam-move:var(--geo-blue); --fam-env:var(--earth-g2);
  --fam:var(--geo-blue);
  --fam-dark:var(--blue-on-dark);

  /* ---- TYPE ---- */
  --font-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-h1:clamp(30px,6vw,58px); --t-h2:clamp(24px,4vw,40px);
  --t-h3:clamp(19px,2.6vw,25px); --t-body:clamp(15px,2.3vw,17px);
  --t-small:13px; --t-eyebrow:11.5px;

  /* ---- SPACING ---- */
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* ---- LAYOUT & RHYTHM ---- */
  --sec-y:clamp(72px,9vw,128px); --hero-y:clamp(96px,12vw,168px);
  --phead-y:clamp(56px,7vw,92px);
  --gutter:clamp(20px,5vw,56px); --gap:clamp(20px,2.4vw,32px);
  --w:1240px; --w-wide:1440px; --w-read:720px;
  --nav-h:68px;
  --r:4px; --r-lg:6px;

  /* ---- MOTION ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --d-fast:180ms; --d-mid:280ms; --d-slow:600ms;

  /* ============================================================
     VERTICAL ACCENT (blueprint §4) — the whole per-vertical re-skin
     runs through these four properties and nothing else.

     THE DEFAULTS ARE THE VALUES THAT WERE ALREADY LIVE. That is
     deliberate: site.css was repointed from the hard-coded --leaf /
     --geo-blue / --cta to these tokens as a PURE REFACTOR, so the
     operating vertical and its five service pages render byte-for-byte
     what they rendered before. Only the parent tier and Education
     override them, below.

       --accent       accent on LIGHT grounds (.s-light / .s-light-2)
       --accent-dark  accent on DARK grounds  (.s-dark / .phead / nav / footer)
       --accent-tint  the same hue at ~16% — big numerals, washes
       --accent-cta   primary button fill

     WHY IT MATTERS: green is a waste-and-environment signal. Green at
     PARENT level is the "one vertical wearing the parent's name" problem
     rendered in colour — the exact error this restructure exists to fix.
     Scoping it here is what lets a bin lorry and a campus sit under one
     brand without either owning it.
     ============================================================ */
  --accent:var(--geo-blue);
  --accent-dark:var(--leaf);
  --accent-tint:rgba(126,230,55,.16);
  --accent-cta:var(--cta);
  --accent-cta-hover:var(--cta-hover);
  --accent-cta-ink:var(--cta-ink);
}

/* ---- PER-SERVICE FAMILY ACCENT ----
   Set by $PAGE['body_class'] via fam_class() in inc/bootstrap.php. */
body.svc--move{--fam:var(--geo-blue);--fam-dark:var(--blue-on-dark)}
body.svc--env {--fam:var(--earth-g1);--fam-dark:var(--earth-g2)}

/* ---- VERTICAL 2 — ENVIRONMENTAL & LOGISTICS ----
   Stated explicitly rather than left to the defaults, because "green is the
   operating vertical's colour" is now a decision the file should say out loud.
   Values identical to the defaults above => zero visual change on the hub and
   on all five service pages. */
/* SCOPED TO THE CLASS, NOT TO body. That matters: the group homepage and the
   cross-rails put a vertical class on a CARD, so an Environmental card sitting
   inside a page wearing brass has to resolve to green. Custom properties
   inherit, so this works identically on <body> and on any element inside it —
   which is what makes "two verticals as equal-weight peers, each in its own
   colour, on one neutral page" a class attribute rather than a fork. */
.v--env{
  --accent:var(--earth-g1);
  --accent-dark:var(--leaf);
  --accent-tint:rgba(126,230,55,.16);
}

/* ---- VERTICAL 1 — GEO EARTH EDUCATION HUB ----
   Brass. It has to separate hard from green or the two verticals blur, and it
   reads institutional — crest metal, plaque, seal — without going navy-corporate.

   ACCESSIBILITY (blueprint §4.5): the accent is used for STRUCTURE and EMPHASIS
   only, never for meaning alone, and never for body copy.
     --accent      #8A5F1C on --paper #FFFFFF  = 5.62:1  -> passes AA at any size
     --accent-dark #D9A84A on --forest #07231A = 9.42:1  -> passes AA at any size
   The lighter brass #B07D2B from the blueprint is 3.5:1 on white — large text and
   graphics only — so it is carried as --accent-graphic and never used for a
   sentence. */
/* --fam/--fam-dark are the SCHEMATIC language's colours (corridor, .sch
   diagrams). Pointing them at the accent is what makes the campus plan and the
   locator map read as this vertical rather than as the logistics blue they
   would otherwise inherit. The five service pages are unaffected: body.svc--move
   / body.svc--env set --fam at higher specificity and keep winning. */
.v--edu{
  --fam:#8A5F1C;
  --fam-dark:#D9A84A;
  --accent:#8A5F1C;
  --accent-dark:#D9A84A;
  --accent-graphic:#B07D2B;
  --accent-tint:rgba(217,168,74,.18);
  --accent-cta:#8A5F1C;
  --accent-cta-hover:#6E4A13;
  --accent-cta-ink:#FFFFFF;
}

/* ---- PARENT TIER — INK AND PAPER, NO SECTOR HUE (blueprint §4.1) ----
   "The parent has no colour of its own; it borrows its colour from the vertical
   you are looking at."  On the group homepage that borrowing is literal: the
   portfolio rail (§6) swaps v--edu / v--env on <body> as you move between
   segments, and every accent-consuming element re-skins for free because they
   all read the same four properties. On /company and /contact there is no rail,
   so the parent tier stands on its own and the ink IS the accent.

   The :not() guard is what makes the borrowing work — a vertical class present
   on the body always wins over the neutral. */
body.tier--parent:not(.v--edu):not(.v--env){
  --accent:#3A4A42;
  --accent-dark:#D6E2DA;
  --accent-tint:rgba(214,226,218,.16);
}
/* Ink on paper, paper on ink — a neutral tier still needs a button that reads as
   the primary action, and a solid ink or solid paper fill is stronger than a
   desaturated green would be. Dark grounds get the inverse so the button never
   disappears into the section it sits on. */
body.tier--parent:not(.v--edu):not(.v--env) .btn--primary{
  background:var(--ink);border-color:var(--ink);color:var(--paper)}
body.tier--parent:not(.v--edu):not(.v--env) .btn--primary:hover{
  background:#1C2B23;border-color:#1C2B23}
body.tier--parent:not(.v--edu):not(.v--env) :is(.s-dark,.s-dark-2,.hero,.phead,.rail) .btn--primary{
  background:var(--ink-inv);border-color:var(--ink-inv);color:var(--forest)}
body.tier--parent:not(.v--edu):not(.v--env) :is(.s-dark,.s-dark-2,.hero,.phead,.rail) .btn--primary:hover{
  background:#FFFFFF;border-color:#FFFFFF}