/* ============================================================
   CARBONSIG DESIGN TOKENS v2.0 — SINGLE SOURCE OF TRUTH
   Enqueue this FIRST, before components.css and any page CSS.
   Nothing in the site hard-codes a value — only references a token.
   New value needed? Add a token here. Never inline.
   ============================================================ */
:root{
  /* ---- Brand ---- */
  --brand-navy:#0C3F6C;
  --brand-blue:#0188CE;

  /* ---- Semantic colour ROLES (use these, not raw brand values) ---- */
  --c-heading:#0C3F6C;        /* headings on light surfaces */
  --c-body:#3D4B57;           /* body text on light — 7.4:1 AAA */
  --c-muted:#5E6B78;          /* secondary/caption text — 4.9:1 AA */
  --c-link:#0A6EA8;           /* inline links — AA on white */
  --c-action:#0A6EA8;         /* button fill — white text 4.6:1 AA */
  --c-action-hover:#095B8C;
  --c-on-dark:#FFFFFF;        /* text on navy/blue/action surfaces */
  --s-on-dark-hover:#EAF3FA;  /* hover fill for a WHITE control on a dark band (.btn--dark).
                                 Was hard-coded in components.css — the last inline hex in
                                 the file. Value unchanged, so nothing shifts visually.
                                 Distinct from --s-bluelt (#E8F4FD): that is a light-surface
                                 tint, this is a control state, and collapsing the two would
                                 couple a button's hover to a section background. */
  --c-on-dark-muted:rgba(255,255,255,.72);
  --c-eyebrow-dark:#7DD3FC;   /* eyebrow/label on dark surfaces */
  --c-border:#E5E5E7;
  --c-border-strong:#D1D5DB;
  --c-border-on-dark:rgba(255,255,255,.16);  /* dividers/borders on navy surfaces */
  --c-border-accent:rgba(1,136,206,.25);     /* accent-tint card/panel border (was inline in .card--accent) */
  --c-overlay-light:rgba(255,255,255,.10);   /* faint white fill on navy (e.g. icon chip) */

  /* ---- Surfaces ---- */
  --s-page:#FFFFFF;
  --s-alt:#FAFAFA;
  --s-sunken:#F5F5F7;
  --s-navy:#0C3F6C;
  --s-blue:#0188CE;
  --s-bluelt:#E8F4FD;

  /* ---- Feedback / data-meaning (green=good/reviewed, amber=caution/draft,
     red=risk/incomplete). Tints are the low-emphasis fills behind the strong
     text colour; every text-on-tint pairing is AA (see components status pills). ---- */
  --c-success:#1E7D3A;
  --c-success-tint:#E7F9ED;   /* success pill/status fill — was hard-coded in .pill--success */
  --c-warning:#A85309;         /* dark orange — AA as text on white/tint (was brown #9A5B00) */
  --c-warning-tint:#FDEBD6;
  --c-orange:#EC7D18;          /* vivid app orange — GRAPHICAL only (bars, node edges, dots) */
  --c-orange-tint:#FDEBD6;
  --c-ai:#7C3AED;              /* AI accent — purple + sparkle = AI, and only AI */
  --c-ai-tint:#F3EEFE;
  --c-tab-idle:#66707D;        /* upcoming journey-tab label. Was #9AA6B2 = 2.48:1 on white,
                                  an AA failure on both consumers. This is the LIGHTEST grey
                                  clearing 4.5:1 on both backdrops the tabs actually sit on —
                                  --s-page for .hx-tabs (5.03:1) and --s-sunken for .hw-tabs
                                  (4.62:1) — so the de-emphasis survives. Deliberately still
                                  lighter than --c-muted (#5E6B78): idle tabs must read as
                                  quieter than body copy, and two tokens sharing one value is
                                  the collision that produced invisible text elsewhere. */
  --c-error:#C4362B;
  --c-error-tint:#FBE7E4;
  --c-focus:#0A6EA8;          /* focus ring on LIGHT surfaces */
  --c-focus-on-dark:#7DD3FC;  /* focus ring on navy/dark surfaces — 6.48:1 on --s-navy.
                                 --c-focus is only 1.96:1 there, failing WCAG 1.4.11
                                 (non-text contrast) on every navy band. Ratified,
                                 DESIGN_LANGUAGE §8.6. Same hue as --c-eyebrow-dark,
                                 kept as its own token so a focus ring is never
                                 re-tuned by an eyebrow change. */

  /* ---- Product node data-state (Builder Red→Orange→Green) — semantic
     aliases of the feedback roles so W1/Tier-1 reuse them, zero new hues ---- */
  --node-incomplete:var(--c-error);   /* red   — no data */
  --node-draft:var(--c-warning);      /* amber — unverified / AI-generated */
  --node-reviewed:var(--c-success);   /* green — human-reviewed */

  /* ---- Spacing — 8px grid, 4px sub-steps. No other values. ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --sp-24:96px; --sp-32:128px;

  /* ---- Radius ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:980px;

  /* ---- Shadow — one restrained scale ---- */
  --sh-sm:0 1px 2px rgba(12,63,108,.06);
  --sh-md:0 4px 16px rgba(12,63,108,.08);
  --sh-lg:0 12px 32px rgba(12,63,108,.10);

  /* ---- Type scale (fluid: mobile → desktop) ---- */
  --t-display:clamp(40px,6vw,64px);
  --t-h1:clamp(32px,4.5vw,48px);
  --t-h2:clamp(26px,3.4vw,36px);
  --t-h3:clamp(21px,2.4vw,26px);
  --t-h4:20px;
  --t-body-lg:18px;
  --t-body:16px;
  --t-small:14px;
  --t-caption:12px;
  --lh-tight:1.12;
  --lh-heading:1.22;
  --lh-body:1.6;
  --measure:68ch;            /* ~680px cap for readable text */

  /* ---- Layout ---- */
  --container:1120px;
  --container-wide:min(1440px,92vw);  /* heroes/marquee/stats — full on wide screens, still readable */
  --gutter:24px;
  --gutter-mobile:16px;
  --section-y:96px;
  --section-y-mobile:56px;

  /* ---- Motion ---- */
  --dur-1:150ms; --dur-2:200ms; --dur-3:250ms;
  --ease:cubic-bezier(.2,.6,.2,1);

  /* ---- Motion — narrative + journey tiers (RATIFIED P0, 2026-07-13).
     Micro = --dur-1/2/3 · narrative = state changes inside widgets ·
     journey = auto-advancing stories (W1). See DESIGN_LANGUAGE §4. ---- */
  --dur-4:450ms;      /* narrative state change: node flip, check pop, chip reveal */
  --dur-5:650ms;      /* large overlay settle: stamp, receipt, badge morph */
  --dur-step:7s;      /* journey dwell per step (auto-advance >5s ⇒ visible pause control) */
  --stagger:80ms;     /* cascade increment for lists/chips */
  --dur-flow:1s;      /* connector marching-ants cycle (cs-flow keyframe) */
  --wire-dash:6 7;    /* connector dash pattern: dashed = missing data, solid = complete */
  --dur-count:1100ms; /* numeric count-up (stat band + journey metric share this) */

  /* ---- Product panel (dark marketing panel framing real-app grammar) —
     RATIFIED P0, 2026-07-13. Browser frame kept per manager decision (real
     carbonsig.app URL, neutral mono dots via --c-border-on-dark). ---- */
  --s-panel:#0B2E4E;          /* panel surface — white 13.86:1 */
  --s-panel-deep:#0A2843;     /* panel header / frame bar — white 15.03:1 */
  --s-panel-raised:#12395C;   /* raised element on panel (node card, chip) — white 11.89:1 */
  --c-border-panel:rgba(255,255,255,.10);  /* hairline structure on panel */
  --c-on-dark-faint:rgba(255,255,255,.55); /* LARGE text (≥18.66px/bold) or decorative ONLY —
                                              small text on panel uses --c-on-dark-muted */

  /* ---- On-dark node states (Builder R→O→G on the dark panel). The light
     --node-* tokens FAIL 3:1 as borders on --s-panel (2.55–2.67:1 measured);
     these pass as text (4.5:1) AND border (3:1) on every panel surface. ---- */
  --node-incomplete-ondark:#FF8A7E;   /* 6.06:1 on panel · 5.20:1 on raised */
  --node-draft-ondark:#F0C069;        /* 8.22:1 on panel · 8.63:1 on its fill */
  --node-reviewed-ondark:#5FD98A;     /* 7.77:1 on panel · 7.84:1 on its fill */
  --node-draft-fill-ondark:#2A2A17;   /* node-card fill when draft */
  --node-reviewed-fill-ondark:#12321F;/* node-card fill when reviewed (incomplete keeps raised) */
  --glow-incomplete:0 0 0 4px rgba(255,138,126,.15);
  --glow-draft:0 0 0 4px rgba(240,192,105,.16);
  --glow-reviewed:0 0 0 4px rgba(95,217,138,.20);

  /* ---- Elevation: flagship-panel tier above --sh-lg (RATIFIED P0) ---- */
  --sh-xl:0 24px 60px rgba(12,63,108,.16);

  /* ---- Ambient hero background — composed from existing surface tokens ---- */
  --bg-ambient:radial-gradient(120% 90% at 80% -10%,
               var(--s-bluelt) 0%, var(--s-alt) 45%, var(--s-page) 78%);

  /* ---- Dark hero showcase section (manager decision 2026-07-13: the homepage
     header is a dark-blue gradient showcase; the product panel on it stays LIGHT
     and app-faithful). See DESIGN_LANGUAGE. ---- */
  --s-hero-a:#061829;  /* deepest navy — top-left corner */
  --s-hero-b:#0B2A45;  /* mid transition */
  --s-hero-c:#13456B;  /* lighter navy — bottom-right corner */
  --grad-hero:radial-gradient(70% 60% at 90% 92%, rgba(80,160,220,.18), transparent 60%),
              linear-gradient(135deg, var(--s-hero-a) 0%, var(--s-hero-b) 50%, var(--s-hero-c) 100%);

  /* ---- Logo lockup optical heights (DESIGN_LANGUAGE §6) ---- */
  --logo-h:48px;
  --logo-h-sm:32px;

  /* ---- Touch ---- */
  --tap-min:44px;
  --input-h:48px;

  /* ---- Font ---- */
  --font-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

@media (max-width:768px){
  :root{ --section-y:var(--section-y-mobile); --gutter:var(--gutter-mobile); }
}