/* Apex Flow Labs ecosystem tokens v1 (2026-10-23). ONE source of truth for the hub and all 23 business sites.
   Values are taken from the live island UI (work/new-final-island/public/city/lab/approved-top-tabs.js, cartoon-ui):
   blue bar #006cf7 with #003d94 edge, yellow pill #ffe331 / hover #fff27b with black text and a #172b3a outline,
   chunky 0 4px 0 drop shadow, 13px pill radius, yellow title #fff33b. Sites IMPORT this file; they never copy it.
   A site may only set --apex-accent (and --apex-accent-ink). Overriding any other --apex-* token fails tools/ecosystem-consistency.mjs. */
:root{
  --apex-kit-version:"1.0.0";

  /* colour: brand */
  --apex-blue:#006cf7;
  --apex-blue-deep:#003d94;
  --apex-blue-night:#042d77;
  --apex-yellow:#ffe331;
  --apex-yellow-hover:#fff27b;
  --apex-yellow-title:#fff33b;
  --apex-cream:#fff5b7;
  --apex-ink:#050505;
  --apex-ink-2:#172b3a;
  --apex-shadow-ink:#081b28;
  --apex-white:#ffffff;
  --apex-night:#101b24;
  --apex-night-2:#172938;
  --apex-mint:#9aead9;
  --apex-text-muted:#c0d0dc;
  --apex-line:#394650;

  /* colour: per-brand accent slot (each site sets its own; default = the hub yellow) */
  --apex-accent:var(--apex-yellow);
  --apex-accent-ink:var(--apex-ink);

  /* colour: roles */
  --apex-bar-bg:var(--apex-blue);
  --apex-bar-edge:var(--apex-blue-deep);
  --apex-bar-fg:var(--apex-white);
  --apex-btn-bg:var(--apex-yellow);
  --apex-btn-bg-hover:var(--apex-yellow-hover);
  --apex-btn-fg:var(--apex-ink);
  --apex-btn-edge:var(--apex-ink-2);
  --apex-panel-bg:var(--apex-cream);
  --apex-panel-fg:var(--apex-ink-2);
  --apex-focus:#ffffff;
  --apex-focus-halo:#003d94;

  /* typography (system stack only: no outside fonts) */
  --apex-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  --apex-font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --apex-weight-body:400;
  --apex-weight-strong:700;
  --apex-weight-heavy:900;
  --apex-text-xs:12px;
  --apex-text-sm:14px;
  --apex-text-md:16px;
  --apex-text-lg:20px;
  --apex-text-xl:clamp(24px,3vw,32px);
  --apex-text-2xl:clamp(32px,5vw,56px);
  --apex-text-3xl:clamp(44px,8vw,96px);
  --apex-leading-tight:1.15;
  --apex-leading-body:1.6;
  --apex-tracking-caps:1.8px;

  /* spacing (4px grid) */
  --apex-space-1:4px;
  --apex-space-2:8px;
  --apex-space-3:12px;
  --apex-space-4:16px;
  --apex-space-5:24px;
  --apex-space-6:32px;
  --apex-space-7:48px;
  --apex-space-8:64px;
  --apex-gutter:clamp(16px,4vw,64px);
  --apex-max:1280px;

  /* radii */
  --apex-radius-sm:7px;
  --apex-radius-md:10px;
  --apex-radius-pill:13px;
  --apex-radius-lg:20px;
  --apex-radius-round:999px;

  /* borders and shadows (the chunky island look) */
  --apex-edge:3px;
  --apex-shadow-btn:0 4px 0 var(--apex-shadow-ink);
  --apex-shadow-bar:0 5px 0 #07192577;
  --apex-shadow-panel:0 7px 0 #00398f;
  --apex-shadow-float:0 20px 60px #001a2588;

  /* motion: 3 durations, max 3 easing curves */
  --apex-dur-fast:120ms;
  --apex-dur-base:200ms;
  --apex-dur-slow:420ms;
  --apex-ease-out:cubic-bezier(.2,.8,.2,1);
  --apex-ease-in-out:cubic-bezier(.65,0,.35,1);
  --apex-ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* focus ring: 3px, visible on blue, yellow, cream and night */
  --apex-focus-width:3px;
  --apex-focus-ring:0 0 0 var(--apex-focus-width) var(--apex-focus),0 0 0 calc(var(--apex-focus-width) + 3px) var(--apex-focus-halo);

  /* layout: the ecosystem bar height is reserved here so the bar never shifts the page */
  --apex-bar-h:56px;
  --apex-z-bar:2147483000;
}
@media (max-width:640px){:root{--apex-bar-h:52px}}
@media (prefers-reduced-motion:reduce){:root{--apex-dur-fast:0ms;--apex-dur-base:0ms;--apex-dur-slow:0ms}}
@media (prefers-contrast:more){:root{--apex-btn-edge:#000;--apex-bar-edge:#000;--apex-focus-halo:#000}}