/* ============================================================================
   OMNIKOM - design tokens
   Near-black canvas · royal-blue structure · lime routing accent.
   Radius is SMOOTH (the round Q logo = ease/access); flat colour blocks, no
   gradients or glow.

   ONE NAME PER VALUE. The previous alias layer (--black/--panel/--border/
   --white/--muted/--gray/--blue/--gap/--wrap/--pad-x/--ease/--dur-1..3 ...)
   meant two names resolved to the same value and every edit was a guess about
   which one was "correct". All 247 consumer sites were repointed to the
   primitive below and 44 zero-consumer declarations were deleted. If you need a
   semantic alias, add it deliberately and document why it is not the primitive.
   ========================================================================== */
:root{
  /* ---- INK RAMP (neutral dominance ~85-92% of every viewport) ---- */
  --ink-0:#0A0A0A;    /* base canvas */
  --ink-10:#111111;
  --ink-20:#171717;   /* panel bg */
  --ink-30:#1E1E1E;
  --ink-40:#2A2A2A;   /* default border / hairline */
  --ink-50:#3A3A3A;   /* stronger hairline */
  --ink-60:#6B6B6B;   /* muted meta on light-adjacent */

  /* ---- TWO-TONE PAPER TEXT (never one flat white) ---- */
  --paper-full:#F5F5F5;                 /* headlines ONLY (not pure #FFF) */
  --paper:rgba(245,245,245,.74);        /* body copy */
  --paper-muted:rgba(245,245,245,.50);  /* captions / meta */

  /* ---- STRUCTURE + THE ONE ACCENT ---- */
  --royal:#1B1FA8;    /* structural fill / stage block */
  --royal-ink:#F5F5F5;
  --royal-well:#0F1178;
  --lime:#B4D42D;     /* THE accent - CTA / emphasis / routing / micro-marker */
  --lime-hi:#C9E85C;  /* hover step (tonal, never a hue swap) */
  --lime-ink:#0A0A0A; /* text on lime - always near-black, never white */

  /* ---- TEXT ON THE COLOURED BANDS ---- */
  --text-on-blue:#FFFFFF;
  --text-on-blue-muted:rgba(255,255,255,.78);

  /* ---- STATE COLOURS (forms/feedback - spec doc 03 §8.1/§14.2: "no color-only meaning"
     was previously unsatisfiable because no error colour existed at all).
     success = --lime, disabled = --ink-30 bg + --ink-60 text (no aliases: one name per value). ---- */
  --error:#E45555;
  --warning:#E6B74A;

  /* ---- TYPE FAMILIES (role-mapped, not size-mapped) ---- */
  --f-display:"Sora","Poppins",system-ui,-apple-system,Segoe UI,sans-serif;  /* hero / h2 / h3 */
  --f-body:"Inter","Manrope",system-ui,-apple-system,Segoe UI,sans-serif;    /* body / UI / nav */
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;           /* numerals / eyebrows / labels ONLY */

  /* ---- TYPE SCALE (named steps, fluid but capped) ---- */
  --t-hero:clamp(40px,6vw,72px);
  --t-h1:clamp(38px,5vw,64px);
  --t-h2:clamp(28px,3.4vw,48px);
  --t-h3:clamp(22px,2.2vw,32px);
  --t-h4:clamp(19px,1.4vw,22px);
  --t-body-lg:clamp(16px,1.2vw,18px);
  --t-body:clamp(16px,1vw,18px);        /* floor 16px - never sub-16 body text */
  --t-eyebrow:13px;                     /* mono uppercase +0.10em; also THE 13px step (notes) */
  --t-numeral:clamp(40px,7vw,88px);     /* outranks its section heading */
  /* small-type ladder (cycle 3): the audit found 18 raw sub-16 values improvised across
     page CSS because no steps existed here. These four ARE the sub-body scale - 12/13/14/15.
     Anything smaller than 12px is banned (spec label floor). */
  --t-label:12px;                       /* the smallest legal step - form labels, dense meta */
  --t-small:14px;                       /* small body / secondary UI text */
  --t-note:15px;                        /* compact body - list items, notes */

  --lh-hero:1.0; --lh-h2:1.08; --lh-h3:1.1; --lh-body:1.55;
  --track-display:-0.02em; --track-h2:-0.015em; --track-h3:-0.01em; --track-eyebrow:0.10em;

  /* ---- SPACING (8px rhythm) ---- */
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --s-10:128px; --s-11:160px;           /* the spec's two largest rhythm steps (doc 03 §5.1) -
                                           previously unbuildable; used by section bands */

  /* ---- LAYOUT ---- */
  --gutter:20px;                        /* walks at the breakpoints below */
  --content-max:1320px;
  --measure:66ch;                       /* prose reading measure (~spec 760px / 55-75 chars).
                                           ONE container for everything made long-form unreadable;
                                           prose blocks cap at this, layout stays --content-max */
  /* cycle-3 re-baseline: was clamp(44px,5vw,80px) - ceiling BELOW the spec's 96px desktop
     FLOOR (doc 03 §5.3), which compressed every section. Mobile floor now matches the spec's
     64px minimum; desktop lands mid-band at 128px. DECLARED sitewide rhythm change. */
  --sec-y:clamp(64px,7vw,128px);        /* section vertical padding */
  --nav-clear:76px;                     /* fixed floating pill: 14px offset + 60px bar */
  --gap-heading-body:18px; --gap-body-cta:28px;

  /* ---- SHAPE (roundness echoes the logo) ---- */
  --r-1:2px; --r-2:4px;
  --r-card:16px;
  --r-badge:999px;
  --r-btn:999px;
  --r-input:12px;

  /* ---- MOTION (graceful glide; nothing jarring or snapping) ---- */
  --ease-standard:cubic-bezier(.4,0,.2,1);   /* quick UI flips */
  --ease-out:cubic-bezier(.16,1,.3,1);       /* entrances */
  --ease-smooth:cubic-bezier(.22,1,.36,1);   /* SIGNATURE glide */
  --ease-flow:cubic-bezier(.65,.05,.36,1);   /* continuous flow (pipeline, marquee) */
  --dur-instant:120ms; --dur-fast:200ms; --dur-base:320ms; --dur-slow:560ms; --dur-smooth:720ms;
  --arrow-shift:6px;

  /* ---- Z ---- */
  --z-nav:100; --z-modal:1000;
}

/* gutter walks the breakpoints */
@media (min-width:768px){ :root{ --gutter:28px } }
@media (min-width:1024px){ :root{ --gutter:36px } }
@media (min-width:1440px){ :root{ --gutter:54px } }
@media (min-width:1920px){ :root{ --gutter:72px } }

/* reduced motion: SHRINK durations, never zero them - the owner runs with reduce-motion ON and
   still wants a live site. Only large positional moves are flattened (see base.css .reveal). */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:80ms; --dur-fast:140ms; --dur-base:200ms; --dur-slow:240ms; --dur-smooth:280ms;
    --arrow-shift:0px;
  }
}
