:root{
/* ---- Brand core (from ELI Brand Guidelines) ---- */
--eli-paper:#F2F1EB;
--eli-sage:#B0BB9D;
--eli-fern:#387B5C;
--eli-clay:#EA9E5D;
--eli-jungle:#013833;

/* ---- Paper ramp (light, warm, never pure white) ---- */
--eli-paper-50:#FBFAF6;
--eli-paper-100:#F6F5F0;
--eli-paper-200:#F2F1EB;
--eli-paper-300:#E8E6DC;
--eli-paper-400:#D9D6C8;

/* ---- Sage ramp ---- */
--eli-sage-100:#EBEEE4;
--eli-sage-200:#D8DECB;
--eli-sage-300:#C4CDB4;
--eli-sage-400:#B0BB9D;
--eli-sage-500:#9BA886;
--eli-sage-600:#84916F;
--eli-sage-700:#647049;
/* Dark-mode sage. A sage band cannot simply carry over into dark mode — at
   #B0BB9D it glares. These are the same hue taken down to a night value. */
--eli-sage-800:#3B4A33;
--eli-sage-900:#2C3826;

/* ---- Fern ramp ----

   The ramp bends toward jungle as it darkens, and its saturation climbs the way
   jungle's does. This is why: jungle is a teal at hue 170-175 whose saturation
   runs 40% up to 96% at the dark end. Fern used to be a flat grass green — hue
   145-153 at 26-38% throughout — so its dark steps sat next to a vivid teal at
   a 23° hue gap and less than half the chroma, and read muddy against it. Now
   the ramp travels: grass green on paper, teal-green in the shade, meeting the
   canopy at the bottom. Fern green #387B5C is the brand colour and does not
   move; every step around it was retuned to arrive at it and continue past it. */
--eli-fern-100:#DEEDE5;
--eli-fern-200:#B8DBC9;
--eli-fern-300:#87C5AA;
--eli-fern-400:#54A687;
--eli-fern-500:#387B5C;
--eli-fern-600:#22624D;
--eli-fern-700:#134E3F;

/* ---- Clay ramp ---- */
--eli-clay-100:#FFF1CE;
--eli-clay-200:#FFDC9B;
--eli-clay-300:#F7BC6B;
--eli-clay-400:#EA9E5D;
--eli-clay-500:#E8871F;
--eli-clay-600:#D06A00;

/* ---- Jungle ramp ---- */
--eli-jungle-300:#3E9084;
--eli-jungle-400:#1C7568;
--eli-jungle-500:#0A574E;
--eli-jungle-600:#013833;
--eli-jungle-700:#012520;
--eli-jungle-800:#00120F;

/* ---- Semantic surfaces ---- */
--surface-page:var(--eli-paper-200);
--surface-card:var(--eli-paper-50);
--surface-raised:#FFFFFF;
--surface-inset:var(--eli-paper-300);
--surface-muted:var(--eli-sage-100);
--surface-accent:var(--eli-clay-100);
--surface-deep:var(--eli-jungle-600);
--surface-deep-alt:var(--eli-fern-500);
/* A card raised on a dark band — one step lighter than --surface-deep. */
--surface-deep-raised:var(--eli-jungle-500);
/* A coloured band breaking up a run of paper — the sage sections on the site.
   Always use this rather than --eli-sage-300 directly, or the band will not
   change in dark mode. --text-on-band is the ink that belongs on it. */
/* In light mode a well separates by getting darker, so the hairline is only a
   faint seam. In dark mode it does the whole job — see tokens/dark.css. */
--surface-inset-edge:inset 0 0 0 1px rgba(1,56,51,.07); /* @kind shadow */
--surface-band:var(--eli-sage-300);
--surface-band-raised:var(--eli-sage-400);
--text-on-band:var(--eli-jungle-600);
/* The colour a hand-drawn brand icon takes when it is not inheriting from text. */
--icon-brand:var(--eli-jungle-600);

/* ---- Semantic text ---- */
--text-heading:var(--eli-fern-500);
--text-body:var(--eli-jungle-600);
--text-muted:var(--eli-sage-700);
/* Decorative only — 1.78:1 on paper. Never set text with this. */
--decor-soft:var(--eli-sage-400);
--text-accent:var(--eli-clay-600);
--text-inverse:var(--eli-paper-100);
/* Jungle, not white: white on clay measures 2.20:1 and fails AA at every step
   of the ramp that still reads as clay. Jungle on clay is 5.91:1. */
--text-on-accent:var(--eli-jungle-600);

/* ---- Lines & edges ---- */
--border-hairline:rgba(1,56,51,.10);
--border-soft:rgba(1,56,51,.16);
--border-strong:rgba(1,56,51,.32);
--border-accent:var(--eli-clay-400);
--border-sage:var(--eli-sage-300);

/* ---- Interactive ---- */
--accent:var(--eli-clay-400);
--accent-hover:var(--eli-clay-500);
--accent-press:var(--eli-clay-600);
--action:var(--eli-fern-500);
--action-hover:var(--eli-fern-600);
--action-press:var(--eli-fern-700);
--focus-ring:var(--eli-fern-600);

/* ---- Status (derived from the brand ramps; no new hues) ---- */
--status-progress:var(--eli-clay-400);
--status-done:var(--eli-fern-500);
--status-resting:var(--eli-sage-400);

/* ---- Light play ---- */
--light-warm:rgba(234,158,93,.18);
--light-canopy:rgba(56,123,92,.14);
--wash-paper:linear-gradient(180deg,#FBFAF6 0%,#F2F1EB 100%); /* @kind color */
--wash-canopy:linear-gradient(180deg,#013833 0%,#064A43 100%); /* @kind color */
--wash-sunlight:radial-gradient(120% 90% at 50% -10%,rgba(255,255,255,.85) 0%,rgba(242,241,235,0) 70%); /* @kind color */
}