/* ============================================================
   Feedwrk — LANDING tokens (the marketing "landing layer").
   EXTENDS the core. Load AFTER toolkit/styles/tokens.css.
   It only ADDS; it never overrides an app token. The app must
   NOT load this file — richer palette, display type, motion and
   dark cinematic surfaces live here so the workbench stays calm.

   Load order on a landing page:
     tokens.css  →  feedwrk-ui.css  →  landing-tokens.css  →  landing-ui.css
   ============================================================ */
:root{

  /* ---- display headline face (H1–H2 ONLY) ----------------------
     Inter still runs body/UI. JetBrains Mono still runs labels/data.
     Space Grotesk is a technical grotesque that shares DNA with our
     mono — leaning into mono-as-brand, not the generic Inter default.
     Premium swap-ins: PP Neue Montreal, Söhne, Aeonik. */
  --l-font-display:"Space Grotesk", var(--font-sans);

  /* ---- expanded brand palette (landing only; voltage stays anchor) ----
     azure + fuchsia are DECORATIVE (gradients/glow). For text/icons on
     light, use the *-ink variants (AA-safe). Signals stay status-only.
     Citrus stays decorative — never body text (fails 1.16:1 on white). */
  --l-azure:#1ec8ff;         /* secondary brand hue — gradients, glow */
  --l-azure-ink:#0a6f9e;     /* AA azure for text/icons on light */
  --l-fuchsia:#e93cff;       /* warm counterpoint — gradients only */
  --l-fuchsia-ink:#a015b8;   /* AA fuchsia for text on light */
  --l-blue:#4d7cff;          /* mid stop for the flow gradient */

  /* ---- signature gradients (the pipeline "flow" + hero aurora) ---- */
  --l-grad-flow:linear-gradient(90deg,var(--voltage) 0%,var(--l-blue) 55%,var(--l-azure) 100%);
  --l-grad-aurora:linear-gradient(120deg,var(--l-fuchsia) 0%,var(--voltage) 45%,var(--l-azure) 100%);
  --l-grad-voltage:linear-gradient(135deg,var(--voltage) 0%,var(--voltage-press) 100%);
  --l-grad-text:linear-gradient(90deg,var(--voltage),var(--l-blue)); /* headline word — AA-safe on light (large text ≥3:1) */

  /* ---- dark cinematic surfaces (marketing bands; not in the app) ----
     Cool voltage-tinted ink (not warm black) so accents read cleaner and
     the dark bands feel part of the cool-slate brand. Deeper than before
     for bigger contrast against the light body. */
  --l-dark-1:#0a0e1a;        /* deepest section bg (cool near-black) */
  --l-dark-2:#111726;        /* raised panel on dark */
  --l-dark-3:#1c2540;        /* border / hover on dark */
  --l-on-dark-1:#f7f9ff;     /* primary text on dark */
  --l-on-dark-2:#c4c9db;     /* secondary text on dark */
  --l-on-dark-3:#8892ac;     /* muted text on dark */
  --l-rule-dark:rgba(150,170,255,.12);        /* cool hairline on dark */
  --l-rule-dark-strong:rgba(160,180,255,.20);
  /* bright accent inks — for use ON dark only (glow, not AA-on-light) */
  --l-voltage-bright:#9a8bff; /* voltage lifted to pop on deep ink */
  --l-azure-bright:#5bd6ff;
  --l-citrus-bright:#c8ff5a;  /* citrus accent word on dark */
  --l-emerald-bright:#4fe3ab;
  --l-gold-bright:#ffd24a;
  --l-violet-bright:#b49bff;
  --l-coral-bright:#ff8f82;
  --l-fuchsia-bright:#f27bff;

  /* ---- landing type scale (fluid; core had NO scale — flagged) ---- */
  --l-fs-display:clamp(2.75rem,6vw + .5rem,5.25rem);  /* hero H1 */
  --l-fs-h1:clamp(2.1rem,4vw,3.25rem);
  --l-fs-h2:clamp(1.6rem,2.6vw,2.25rem);
  --l-fs-h3:1.35rem;
  --l-fs-lead:clamp(1.05rem,1.1vw + .6rem,1.3rem);    /* hero subhead / lead */
  --l-fs-body:1.0625rem;     /* 17px reading text on marketing */
  --l-fs-sm:.9375rem;
  --l-fs-eyebrow:.75rem;     /* mono uppercase eyebrow */
  --l-lh-display:1.02;
  --l-lh-tight:1.1;
  --l-lh-body:1.6;

  /* ---- motion (core had NO motion tokens — flagged; landing is richer) ---- */
  --l-dur-reveal:640ms;
  --l-dur-slow:900ms;
  --l-dur-marquee:38s;
  --l-dur-drift:18s;         /* aurora / gradient drift */
  --l-ease-out:cubic-bezier(.16,1,.3,1);   /* expo-out for scroll reveals */
  --l-ease-spring:var(--ease-spring);      /* reuse core spring */

  /* ---- micro-interaction tiers (Stripe-measured; "slow & creamy") ----
     Hover colour/arrows = 300ms micro. Menus/backdrop = 240ms nav.
     Card hover choreography = 700ms. Landing only — the app keeps
     --motion-fast/base/slow. Source: STRIPE-UI-HANDOVER.md §8. */
  --l-dur-micro:300ms;
  --l-dur-nav:240ms;
  --l-dur-card:700ms;
  --l-ease-micro:cubic-bezier(.25,1,.5,1);    /* buttons, links, arrows, colour */
  --l-ease-card:cubic-bezier(.165,.84,.44,1); /* card choreography, carousels */
  --l-ease-nav:cubic-bezier(.45,.05,.55,.95); /* menu open/close, backdrop */

  /* ---- reading measure caps (headlines ≤36ch, body ≤65ch) ---- */
  --l-measure-head:36ch;
  --l-measure-body:65ch;

  /* ---- display tracking (size-gated; Semrush-measured) ----
     −4% only at true display sizes (rendered ≥~64px); −2% (--track-tight)
     for 16–24px text; 0 at UI sizes (≤16px). Below ~48px −4% clots —
     keep the gate (applied via min-width media in direction.css). */
  --l-track-display:-0.04em;

  /* ---- elevation additions (core has xs/sm/pop/modal/drawer) ---- */
  --l-shadow-float:0 40px 80px -32px rgba(10,10,18,.45),0 12px 28px -12px rgba(10,10,18,.28);
  --l-glow-voltage:0 0 0 1px color-mix(in oklab,var(--voltage) 40%,transparent),0 24px 64px -18px color-mix(in oklab,var(--voltage) 55%,transparent);
  --l-glow-azure:0 0 60px -10px color-mix(in oklab,var(--l-azure) 60%,transparent);

  /* ---- landing radii (marketing panels a touch softer than the app) ---- */
  --l-r-lg:20px;
  --l-r-xl:28px;

  /* ---- pictogram accents (landing only; DECORATIVE — colour on icons) ----
     Use the *-ink variant for the glyph, the *-tint for its tile. Signals
     (green/amber/red) stay reserved for status and are not in this set. */
  --l-emerald:#12b981;  --l-emerald-ink:#0b7d59;  --l-emerald-tint:#d6f5e8;
  --l-coral:#ff6b5e;    --l-coral-ink:#c23a2f;    --l-coral-tint:#ffe3df;
  --l-gold:#f5b820;     --l-gold-tint:#fdf0cf;     /* glyph uses --signal-amber-ink */
  --l-violet:#8b5cf6;   --l-violet-ink:#6d3fd4;   --l-violet-tint:#ece6fe;
  --l-azure-tint:#d6f2ff;
  --l-fuchsia-tint:#fbe0ff;

  /* ---- channel identity colours (external brands; content tokens) ---- */
  --ch-google:#fbbc04; --ch-meta:#1877f2; --ch-tiktok:#25f4ee;
  --ch-pinterest:#e60023; --ch-amazon:#ff9900; --ch-bing:#00b294;

  /* ---- mesh (animated node network backdrop; dark hero only) ---- */
  --l-mesh-bg:#0a0b12;

  /* ---- section rhythm (96px desktop / 64px mobile — Stripe-measured) ---- */
  --l-sec-y:clamp(4rem,8vw,6rem);     /* vertical padding per section */
  --l-gutter:clamp(1.25rem,5vw,4rem); /* horizontal page inset */
  --l-maxw:1200px;
}

/* Landing layer respects reduced-motion globally. */
@media (prefers-reduced-motion: reduce){
  :root{ --l-dur-reveal:1ms; --l-dur-slow:1ms; --l-dur-marquee:0s; --l-dur-drift:0s; }
}