:root{
/* ── Brand core (sampled from the SpeechRight logo) ───────────────── */
--brand-green:#6C9D30;
--brand-sky:#3FBFEE;
--brand-yellow:#FECE00;
--brand-ink:#111111;
--brand-grey:#9D9D9C; /* logo tagline grey — decorative only, fails 4.5:1 as body text */

/* ── Green ramp (primary) ─────────────────────────────────────────── */
--green-50:#F2F7EA;--green-100:#E1EED0;--green-200:#C6DFA6;--green-300:#A6CC77;
--green-400:#88B750;--green-500:#6C9D30;--green-600:#578026;--green-700:#44631E;
--green-800:#344B17;--green-900:#253611;

/* ── Sky ramp (secondary) ─────────────────────────────────────────── */
--sky-50:#ECF9FE;--sky-100:#D3F1FC;--sky-200:#A8E4F9;--sky-300:#75D3F4;
--sky-400:#3FBFEE;--sky-500:#1FA5D6;--sky-600:#1585B0;--sky-700:#12688A;
--sky-800:#114F68;--sky-900:#0D3A4C;

/* ── Yellow ramp (highlight) ──────────────────────────────────────── */
--yellow-50:#FFFAE5;--yellow-100:#FFF3BF;--yellow-200:#FFE680;--yellow-300:#FEDA40;
--yellow-400:#FECE00;--yellow-500:#E0B300;--yellow-600:#B38E00;--yellow-700:#8A6D00;
--yellow-800:#634E00;--yellow-900:#453600;

/* ── Coral ramp (errors + destructive only; not a brand colour) ───── */
--coral-50:#FEF0EE;--coral-100:#FCDBD6;--coral-200:#F8B4AA;--coral-300:#F28776;
--coral-400:#E8523F;--coral-500:#CE3A28;--coral-600:#A82D1E;--coral-700:#822318;
--coral-800:#5D1911;--coral-900:#3D110B;

/* ── Neutrals (warm grey, anchored on the logo tagline grey) ──────── */
--neutral-0:#FFFFFF;--neutral-50:#FAFAF9;--neutral-100:#F3F3F1;--neutral-200:#E6E6E3;
--neutral-300:#D2D2CE;--neutral-400:#ADADA9;--neutral-500:#8C8C89;--neutral-600:#6B6B69;
--neutral-700:#52524F;--neutral-800:#3B3B3A;--neutral-900:#22221F;--neutral-1000:#111111;

/* ── Semantic: text ───────────────────────────────────────────────── */
--text-heading:var(--neutral-1000);
--text-body:var(--neutral-800);
--text-muted:var(--neutral-700);   /* 7.8:1 on white */
--text-subtle:var(--neutral-600);  /* 5.3:1 on white — the lightest text the system allows */
--text-inverse:var(--neutral-0);
--text-link:var(--green-600);      /* 4.65:1 on white */
--text-link-hover:var(--green-700);
--text-on-brand:var(--neutral-0);
--text-on-yellow:var(--neutral-1000);

/* ── Semantic: surfaces ───────────────────────────────────────────── */
--surface-page:var(--neutral-0);
--surface-page-alt:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-100);
--surface-brand:var(--green-500);
--surface-brand-soft:var(--green-50);
--surface-sky:var(--sky-400);
--surface-sky-soft:var(--sky-50);
--surface-yellow:var(--yellow-400);
--surface-yellow-soft:var(--yellow-50);
--surface-ink:var(--neutral-900);
--surface-overlay:rgba(34,34,31,.55);

/* ── Semantic: borders ────────────────────────────────────────────── */
--border-subtle:var(--neutral-200);  /* decorative hairline ONLY — never the sole boundary of a control */
--border-default:var(--neutral-500); /* 3.4:1 — control boundaries (inputs, tags, switches) */
--border-strong:var(--neutral-600);
--border-brand:var(--green-600);
--border-focus:var(--sky-700);

/* ── Semantic: interaction ────────────────────────────────────────── */
/* NOTE: brand green #6C9D30 only reaches 3.2:1 with white text, so FILLED buttons
   use green-600. #6C9D30 remains the brand colour for fields that carry no white text. */
--action-primary:var(--green-600);
--action-primary-hover:var(--green-700);
--action-primary-active:var(--green-800);
--action-secondary:var(--sky-400);
--action-secondary-hover:var(--sky-300);
--action-secondary-active:var(--sky-200);
--action-accent:var(--yellow-400);
--action-accent-hover:var(--yellow-300);
--action-accent-active:var(--yellow-200);
--action-disabled-bg:var(--neutral-200);
--action-disabled-text:var(--neutral-700);
/* Sky and yellow fills are too light to clear 3:1 against the page on their own,
   so those buttons carry a darker hairline that supplies the boundary. */
--action-secondary-edge:var(--sky-600);
--action-accent-edge:var(--yellow-600);
--action-danger-edge:var(--coral-600);
/* Two-layer focus ring: a surface-coloured gap, then a 3px indicator.
   Clears 3:1 against both the page and any button fill it sits on. */
--focus-color:var(--sky-700);
--focus-ring:0 0 0 2px var(--surface-card),0 0 0 5px var(--focus-color);

/* ── Constant bands (identical in light and dark) ──────────────────
   Surfaces that are always dark, so their foregrounds must never flip. */
--band-ink-bg:#22221F;
--band-brand-bg:#44631E; /* green-700 — #F2F7EA body copy on it measures 6.3:1 */
--on-ink-heading:#FFFFFF;
--on-ink-body:#D2D2CE;
--on-ink-muted:#9D9D9C;
--on-ink-border:rgba(255,255,255,.14);
--on-brand-heading:#FFFFFF;
--on-brand-body:#F2F7EA;

/* ── Control foregrounds (flip in dark so fills stay legible) ─────── */
--text-on-secondary:var(--neutral-1000);
--text-on-accent:var(--neutral-1000);
--text-on-danger:#FFFFFF;

/* ── Glass (sticky header once scrolled) ──────────────────────────── */
--surface-glass:rgba(255,255,255,.85);

/* ── Semantic: status ─────────────────────────────────────────────── */
--status-success:var(--green-700);--status-success-bg:var(--green-50);
--status-info:var(--sky-700);--status-info-bg:var(--sky-50);
--status-warning:var(--yellow-700);--status-warning-bg:var(--yellow-50);
--status-error:var(--coral-600);--status-error-bg:var(--coral-50);
}