/* CEASE — Colour tokens
   Six colours, clear roles. Indigo & Cyan are the foundation; Flame & Parchment
   carry the 2026 energy. Retired colours are recorded but must not be used. */
:root {
  /* Base palette */
  --cease-midnight: #0F0C18;      /* body text, nav, footers */
  --cease-indigo: #1E146D;        /* hero & dark backgrounds, the anchor */
  --cease-parchment: #EFEBE3;     /* soft light section backgrounds */
  --cease-cyan: #5ACFDB;          /* hope accent, highlights on dark */
  --cease-flame: #FF3D1A;         /* campaign urgency, CTAs, punctuation */
  --cease-white: #FFFFFF;         /* text on dark, deliberate white space */

  /* Retired — DO NOT USE. Kept only to detect legacy usage. */
  --cease-retired-coral: #FB736B;
  --cease-retired-lavender: #E1E2FE;
  --cease-retired-electric: #0E29FF;

  /* Semantic aliases — light context (Parchment / White surfaces) */
  --surface-page: var(--cease-parchment);
  --surface-card: var(--cease-white);
  --surface-inverse: var(--cease-indigo);
  --text-body: var(--cease-midnight);   /* COLOUR — not a size. For sizes use --text-body-md/-lg/-sm */
  --text-muted: color-mix(in srgb, var(--cease-midnight) 64%, var(--cease-parchment));
  --text-heading: var(--cease-midnight);
  --accent-action: var(--cease-flame);      /* CTAs, urgency */
  --accent-hope: var(--cease-cyan);          /* highlights, hope */
  --border-hairline: color-mix(in srgb, var(--cease-midnight) 12%, transparent);

  /* Semantic aliases — dark context (Indigo surfaces) */
  --text-on-dark: var(--cease-white);
  --text-on-dark-muted: color-mix(in srgb, var(--cease-white) 72%, var(--cease-indigo));
  --accent-on-dark-hope: var(--cease-cyan);
  --accent-on-dark-action: var(--cease-flame);
  --border-on-dark: color-mix(in srgb, var(--cease-white) 20%, transparent);

  /* Interaction */
  --flame-hover: color-mix(in srgb, var(--cease-flame) 88%, #000);
  --flame-active: color-mix(in srgb, var(--cease-flame) 78%, #000);
  --cyan-hover: color-mix(in srgb, var(--cease-cyan) 90%, #000);
  --focus-ring: var(--cease-cyan);
}
/* CEASE — Typography tokens. Four faces, four jobs (July 2026).
   Barlow Condensed stops you (display). Barlow carries the reading (default body).
   Lora is effect only — the one passage that must land slowly. Plex Mono is evidence.
   The logo wordmark stays Montserrat. */
:root {
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;          /* default reading voice */
  --font-editorial: 'Lora', Georgia, serif;              /* effect only — standfirsts, quotes */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* evidence — sources, figures, labels */
  --weight-mono: 500;                                    /* Plex Mono is set at 500 only */
  --font-wordmark: 'Montserrat', system-ui, sans-serif;  /* logo lockup only */

  /* Weights */
  --weight-body: 400;
  --weight-body-medium: 500;
  /* Barlow body emphasis is 500 (600 is not loaded) — see --weight-body-medium */
  --weight-editorial: 400;
  --weight-editorial-medium: 500;
  --weight-display-semibold: 600;  /* SUBHEAD — Barlow Condensed 600 */
  --weight-display-bold: 700;      /* kickers, h3, secondary display lines */
  --weight-display-extrabold: 800; /* DISPLAY — Barlow Condensed 800 */

  /* Display scale — Barlow Condensed, tight & tall */
  --text-display: clamp(3rem, 6vw, 8.25rem);  /* hero 132px */
  --text-h1: clamp(2.25rem, 4vw, 4rem);       /* section heading 64px */
  --text-h2: clamp(1.75rem, 3vw, 2.75rem);
  --text-h3: 1.5rem;
  --text-subhead: 1.5rem;                     /* subhead 24px — Barlow Condensed 600 */
  --text-label: 1.1875rem;                    /* button, kicker 19px */

  /* Editorial scale — Lora, one step above surrounding Barlow */
  --text-standfirst: 1.5rem;   /* 24px / 1.5 — one paragraph only */
  --text-quote: 1.6875rem;     /* 27px / 1.4 italic */

  /* Body scale — Barlow */
  --text-body-lg: 1.25rem;
  --text-body-md: 1.0625rem;   /* 17px / 1.6 — standard body */
  --text-body-sm: 0.9375rem;   /* 15px / 1.5 — labels, help, table cells */
  --text-caption: 0.9375rem;

  /* Evidence scale — Plex Mono */
  --text-mono: 0.75rem;        /* 12px, uppercase, 0.1em tracking */

  /* Line heights */
  --leading-display: 0.85;
  --leading-heading: 0.92;
  --leading-body: 1.6;
  --leading-editorial: 1.5;
  --leading-quote: 1.4;
  --leading-tight: 1.2;
  --leading-subhead: 1.15;

  /* Tracking */
  --tracking-label: 0.06em;      /* buttons, kickers */
  --tracking-display: -0.02em;   /* hero */
  --tracking-heading: -0.015em;  /* section headings */
  --tracking-mono: 0.1em;        /* evidence captions */
  --tracking-body: 0;

  /* Measure */
  --measure-body: 72ch;   /* Barlow body */
  --measure-editorial: 46ch;
}
/* CEASE — Spacing, radius, shadow, layout tokens.
   White space is a brand colour: the scale is generous by design. */
:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Generous section rhythm */
  --gutter: clamp(24px, 5vw, 80px); /* @kind spacing */
  --section-y: clamp(64px, 9vw, 128px); /* @kind spacing */

  /* Radius — CEASE is squarer than the web average; the circle mark carries the roundness */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1.5px;

  /* Shadows — restrained; light context uses soft indigo-tinted shadow */
  --shadow-sm: 0 1px 2px rgba(30, 20, 109, 0.08);
  --shadow-md: 0 4px 16px rgba(30, 20, 109, 0.10);
  --shadow-lg: 0 12px 40px rgba(30, 20, 109, 0.14);

  /* Layout */
  --content-max: 1200px;
  --measure: 66ch;  /* body reading measure for Lora */

  /* Motion — decisive, activist; short ease-out, no bounce */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */
}