/* 3DOM design tokens — Direction B: crisp white ground.
   The cream is gone. The single move that fixes the "grubby" feeling:
   cards are now RECESSED (--c-surface, slightly darker) instead of white
   sitting on an off-white ground. Dark violet sections stay as the contrast
   moments, which is where the brand is strongest.

   Every pairing below is measured against WCAG AA. See tools/BUILD.md.
     - coral #DE5A3C is only 3.73:1 on white, so coral-as-TEXT uses #B84A32.
       The action/fill colour is unchanged.
     - buttons run 19px bold so white-on-coral qualifies as large text (3:1).
     - teal #0FA98F is 2.96:1 on white, so ticks use #0D8F79. */

:root {
  /* ---- Brand ---- */
  --c-violet:      #1E0E4B; /* dark surfaces + headings */
  --c-purple:      #791E94; /* secondary accent */
  --c-coral:       #DE5A3C; /* THE action colour: fills only */
  --c-coral-text:  #B84A32; /* coral as text/icon on light (5.17:1 on white) */
  --c-coral-dark:  #B84A32;
  --c-teal:        #0D8F79; /* ticks/icons + large text only (4.02:1 on white — below 4.5) */
  --c-teal-text:   #0A6B56; /* teal for SMALL text: 6.4:1 on white, passes WCAG AA */
  --c-teal-bright: #28D3B4; /* teal on dark surfaces only */
  --c-gold:        #F0A93B;

  /* ---- Grounds & surfaces ---- */
  --c-page:        #FFFFFF; /* the ground */
  --c-surface:     #F7F6FC; /* cards: recessed, not raised */
  --c-alt:         #F2F0F8; /* alternate sections */
  --c-ink:         #2A2140; /* body text */
  --c-muted:       #605977; /* secondary text (6.58:1) */
  --c-body:        #565073; /* paragraph text (7.52:1) */
  --c-line:        #E8E4F2; /* hairlines */
  --c-card-line:   #EAE6F6; /* card borders */
  --c-placeholder: #6B6480; /* 4.95:1 even on the alt ground */

  /* Small print. Darkened from the prototype values to clear WCAG AA. */
  --c-meta:        #6B6480; /* dates, bylines: 5.59:1 on white */
  --c-meta-soft:   #6B6480;
  --c-label-warm:  #605977;

  /* ---- On dark violet surfaces ---- */
  --c-on-violet:      #C9C0E4;
  --c-on-violet-soft: #B3A6D6;
  --c-on-violet-mut:  #9F93C9;

  /* ---- Accent tints (icon chips) — violet-biased, not warm ---- */
  --c-tint-coral:  #FBEAE4;
  --c-tint-purple: #EDE7FA;
  --c-tint-teal:   #E1F5EE;
  --c-tint-gold:   #F7EFE0;

  /* ---- Typography ---- */
  /* Final pairing (11 Sep 2026): Space Grotesk headings, Inter body. Self-hosted in assets/fonts.
     Bricolage, Fraunces and Manrope were tried and dropped. */
  --font-head: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, 'Segoe UI', sans-serif;

  /* Restrained scale: large display shouts; a composed scale reads professional. */
  --fs-display: clamp(30px, 3.6vw, 48px);
  --fs-h1:      clamp(32px, 4.2vw, 46px);
  --fs-h2:      clamp(26px, 3.4vw, 38px);
  --fs-h2-sm:   clamp(22px, 2.8vw, 30px);
  --fs-h3:      clamp(18px, 2vw, 26px);
  --fs-lead:    clamp(16px, 1.6vw, 19px);
  --fs-body:    15px;
  --fs-eyebrow: 12.5px;
  /* Do not reduce below 18.66px without darkening --c-coral: white-on-coral
     only clears WCAG AA as large text. */
  --fs-btn:     19px;

  /* ---- Layout ---- */
  --wrap: 1360px; /* was 1200px until v3.24.0: the header needs ~1,195px of content width at full size, and 1120px left the logo squeezed and a lot of empty margin on wide screens */
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(56px, 7vw, 100px);
  --section-y-sm: clamp(44px, 6vw, 72px);

  /* ---- Shape: tighter, more corporate than the friendly 20px+ radii ---- */
  --r-card: 14px;
  --r-card-lg: 16px;
  --r-pill: 999px;
  --r-input: 12px;

  /* ---- Elevation: grounded two-layer shadows, not a single floaty drop ---- */
  --shadow-card: 0 1px 2px rgba(30, 14, 75, .05), 0 10px 28px rgba(30, 14, 75, .08);
  --shadow-cta:  0 6px 16px rgba(222, 90, 60, .24);
  --shadow-pop:  0 16px 40px rgba(30, 14, 75, .22);

  --ease: cubic-bezier(.4, 0, .2, 1);
}