/* V2 design bridge for docs.vidnext.ai — generated FROM
   frontend/src/styles/landing-v2-bridge.css; keep in sync on token changes.
   Served statically (Lightning CSS mangles the design system). */

/* V2 (redesign) token bridge — hand-maintained companion to
   landing-v2-generated.css, which is produced by scripts/scope-v2-css.js from
   the vidnext-web-v2 repo's src/input.css (regenerate on design handoffs;
   never edit the generated file by hand).

   The dev's Tailwind v4 build emitted its @theme block as real :root custom
   properties; we compile utilities with the app's Tailwind v3 instead
   (tailwind.config.ts), so this file re-provides those properties for the
   component CSS that consumes them via var(). It also owns the ACCENT system:
   every accent-carrying value routes through --v2-* vars, so variant C /
   admin defaultAccent="calm" is a pure [data-accent] swap on the V2 root. */


/* The design sheet ships UN-layered (see scripts/scope-v2-css.js): required
   so its component colors beat Tailwind preflight's `a { color: inherit }`.
   Preflight's one load-bearing win — the hidden attribute — is re-asserted
   here so no un-layered component display rule can ever unhide [hidden]
   markup (burger panel, tier "was/save" outs, planner rows). */
html[data-design="v2"] [hidden] {
  display: none !important;
}

html[data-design="v2"] {
  /* ── Accent ramp (fire = the design as delivered) ──
     The generated CSS's literal accent colors are rewritten onto these tokens
     by scripts/scope-v2-css.js, so a [data-accent] swap re-colors EVERYTHING:
     gradients, glows, shadows, and the per-component --accent triplets. */
  --v2-flame: #ff541f;
  --v2-flame-hot: #ff3c00;
  --v2-flame-mid: #d73616;
  --v2-flame-deep: #ae170c;
  --v2-ember: #f77042;
  --v2-apricot: #ee8d64;
  --v2-peach: #e6a987;
  --v2-sand: #ddc5a9;
  --v2-flame-soft: #ff8a3c; /* light-theme title-gradient head */
  --v2-accent-rgb: 255, 84, 31; /* comma triplet for rgba(var(--…), a) */
  /* Second-order warm ramp (stat bars, quote flare, glow gold, mixer tints —
     donor literals, fire byte-exact). */
  --v2-bar: #f96736;
  --v2-flare-a: #ff5f2e;
  --v2-flare-b: #f0481a;
  --v2-flare-soft: #ffc9a6;
  --v2-glow-gold: #ee8c2c;
  --v2-gold: #df9a32;
  --v2-rust: #c0573a;

  /* ── @theme bridge: names the generated CSS consumes via var() ── */
  --color-flame: var(--v2-flame);
  --color-flame-hot: var(--v2-flame-hot);
  --color-flame-mid: var(--v2-flame-mid);
  --color-flame-deep: var(--v2-flame-deep);
  --color-ember: var(--v2-ember);
  --color-apricot: var(--v2-apricot);
  --color-peach: var(--v2-peach);
  --color-sand: var(--v2-sand);
  --color-ink: var(--bg-page);
  --color-ink-soft: var(--bg-raised);
  --color-section: var(--bg-section);
  --color-hairline: var(--hairline);
  --color-hairline-dim: var(--hairline-dim);
  --color-hairline-strong: var(--hairline-strong);
  --color-success: #10b981;

  --font-display: 'Gabarito', var(--font-inter, 'Inter'), system-ui, sans-serif;
  --font-body: 'Gabarito', var(--font-inter, 'Inter'), system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-h1: clamp(40px, 5.6vw, 80px);
  --text-h2: clamp(34px, 5vw, 64px);
  --text-h3: clamp(30px, 4vw, 48px);
  --text-h4: clamp(22px, 2.2vw, 32px);
  --text-h5: 20px;
  --text-h6: 17px;
  --text-lead: clamp(16px, 1.6vw, 20px);
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;

  --container-shell: 1248px;
}

/* ── Liquid-glass: use the design's own Safari fallback in every engine ──
   The url(#…-liquid-glass) displacement filters mis-anchor in Chrome's GPU
   compositor on some machines: the sampled region sits ~half a pill-height
   LOW, so the top of the bar shows a sharp backdrop and the blur bleeds out
   below it. The stylesheet's -webkit- fallback lines (what Safari always
   renders) are the same blur+saturate without the refraction detail — apply
   that everywhere. These un-layered rules beat the layered originals in the
   static sheet. Revisit if Chrome's url() region mapping gets fixed. */
html[data-design="v2"] .site-nav.is-stuck > nav {
  backdrop-filter: blur(7px) saturate(1.4);
}
/* NOTE: no rest-state backdrop-filter on .site-nav > nav — a filter present
   at first paint lets Chrome anchor the backdrop sampling region at stale
   geometry (blur shifted down/right) and re-samples the backdrop every
   frame. Stuck-only, like the design ships it. */
html[data-design="v2"] .glass-panel {
  backdrop-filter: blur(14px) saturate(140%);
}
html[data-design="v2"] .cookie-panel.glass-panel {
  backdrop-filter: blur(7px) saturate(140%);
}

/* ── Calm accent (variant C / admin defaultAccent = calm) ──
   Teal placeholders pending visual tuning against the live design; keeps the
   fire ramp's relationships (hot > base > mid > deep). The gradient/niche-mark
   stops restate the generated fire literals in calm. --wire-ink follows
   automatically (generated CSS routes it through --color-flame). */
html[data-design="v2"][data-accent="calm"] {
  --v2-flame: #14b8a6;
  --v2-flame-hot: #0fd6c0;
  --v2-flame-mid: #0f766e;
  --v2-flame-deep: #115e59;
  --v2-ember: #2dd4bf;
  --v2-apricot: #5eead4;
  --v2-peach: #99f6e4;
  --v2-sand: #a7dcd2;
  --v2-flame-soft: #2dd4bf;
  --v2-accent-rgb: 20, 184, 166;
  --v2-bar: #0d9488;
  --v2-flare-a: #2dd4bf;
  --v2-flare-b: #0f766e;
  --v2-flare-soft: #99f6e4;
  --v2-glow-gold: #5eead4;
  --v2-gold: #2dd4bf;
  --v2-rust: #0e7490;

  --mark-1: #a7dcd2;
  --mark-2: #14b8a6;
  --mark-3: #115e59;
  --gradient-flame: linear-gradient(225deg, #a7dcd2 0%, #14b8a6 70%, #115e59 100%);
  --gradient-title: linear-gradient(225deg, #a7dcd2 0%, #14b8a6 55%, #115e59 100%);
}

/* Light theme × calm: the generated light block restates marks/title at
   html[data-theme] specificity, which outranks the calm block above — restate
   them calm at higher specificity. */
html[data-design="v2"][data-theme="light"][data-accent="calm"] {
  --mark-1: #99f6e4;
  --mark-2: #0d9488;
  --mark-3: #0f766e;
  --gradient-title: linear-gradient(225deg, #2dd4bf 0%, #0d9488 55%, #115e59 100%);
}

/* The raster logo (switch/logo-core.png) is baked orange — token routing
   can't reach pixels, so calm re-hues it. ~150° lands the flame ramp on the
   teal family. */
html[data-design="v2"][data-accent="calm"] img[src*="logo-core"] {
  filter: hue-rotate(150deg) saturate(0.85);
}

/* ── Lava drift on the hero glow (user-requested motion) ──
   Layered ON TOP of the design's breathing via the independent `translate`
   property (the breathe keyframes animate `transform`, so both compose).
   Doubled class beats the static sheet's single animation declaration; the
   no-preference guard keeps reduced-motion users on the sheet's disabled
   state. Prime-ish durations so the combined pattern takes minutes to repeat. */
@media (prefers-reduced-motion: no-preference) {
  html[data-design="v2"] .hero-glow__light {
    animation:
      v2-glow-light-breathe var(--glow-cycle, 7600ms) linear infinite,
      v2-lava-a 19s ease-in-out infinite alternate;
  }
  html[data-design="v2"] .hero-glow__shadow {
    animation:
      v2-glow-shadow-breathe var(--glow-cycle, 7600ms) linear infinite,
      v2-lava-b 24s ease-in-out infinite alternate;
  }
  /* Slow counter-rotation of the whole pool — independent `rotate` property,
     composes with the children's transform/translate animations. */
  html[data-design="v2"] .hero-glow {
    animation: v2-lava-swirl 43s ease-in-out infinite alternate;
    /* The pool is exactly frame-sized — rotating it would uncover the
       corners. Oversizing via the independent scale property keeps every
       phase of the swirl covering the hero edge-to-edge. */
    scale: 1.1;
    will-change: rotate;
  }
}
@keyframes v2-lava-a {
  0% { translate: 0% 0%; }
  30% { translate: 4.6% 5.4%; }
  55% { translate: -3.4% 2.4%; }
  78% { translate: 2.2% -3.8%; }
  100% { translate: -4.8% -4.4%; }
}
@keyframes v2-lava-b {
  0% { translate: 0% 0%; }
  36% { translate: -5% 4.2%; }
  67% { translate: 3.6% 1.8%; }
  100% { translate: 4.4% -3.6%; }
}
@keyframes v2-lava-swirl {
  0% { rotate: 0deg; }
  100% { rotate: 2.4deg; }
}

/* ── Ink lift (user request): the dark theme's blacks raised to a grayish
   dark, keeping every relative relationship (page < footer < raised < tile,
   the sculpted/well lighting directions, the glow's masking ellipse matching
   the page). Accent-independent — one block serves fire and calm. Light
   theme untouched. Doubled class beats the static sheet's definitions. */
html[data-design="v2"] {
  --bg-page: #151517;
  --bg-raised: #1d1d20;
  --glow-ink: #151517;
  --panel-fill: linear-gradient(180deg, #1d1d20 0%, #101012 100%);
  --fill-tile: #232327;
  --fill-sculpted: linear-gradient(180deg, #303034 15%, #1f1f23 50%, #303034 85%);
  --fill-well: linear-gradient(180deg, #252527 0%, #3a3a3e 49.5%, #4e4e52 100%);
  --fill-stage: linear-gradient(180deg, #1b1917 0%, #161514 100%);
  --fill-avatar: #303034;
  --fill-footer: linear-gradient(180deg, #151517 0%, #101012 100%);
}
/* Re-assert light values against the doubled-class block above (the light
   scope in the static sheet is html[data-theme] + single class — lower). */
html[data-design="v2"][data-theme="light"] {
  --bg-page: #ffffff;
  --bg-raised: #f2f2f2;
  --panel-fill: linear-gradient(180deg, #f2f2f2 0%, #f2f2f2 100%);
  --fill-tile: #ffffff;
  --fill-sculpted: linear-gradient(180deg, #ffffff 15%, #eeeeee 50%, #ffffff 85%);
  --fill-well: linear-gradient(180deg, #dcdcdc 0%, #efefef 49.5%, #ffffff 100%);
  --fill-stage: linear-gradient(180deg, #f2f2f2 0%, #ededed 100%);
  --fill-avatar: #dcdcdc;
  --fill-footer: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
}



/* Active option in the glass pickers: the donor's flame-mid text on the
   flame-tinted pill reads poorly (accent-on-accent) — the label takes the
   panel's dark ink instead; the tint and the small code keep the accent. */
html[data-design="v2"] .lang-option[aria-selected='true'],
html[data-design="v2"] .theme-option[aria-selected='true'] {
  color: var(--fg-on-light);
}
html[data-design="v2"] .lang-option[aria-selected='true'] .lang-option__code {
  color: var(--color-flame-mid);
}

/* ── Artwork pages: calmer glow in the dark theme ──
   Blog/changelog reuse the hero glow as a fixed full-viewport backdrop
   (.page-art), where the warm radial reads far hotter than the homepage's
   contained hero band. Dark theme dims it toward the landing's mood; the
   light theme keeps the donor look untouched. */
html[data-design="v2"]:not([data-theme="light"]) .page-art {
  filter: brightness(0.6) saturate(0.9);
}

/* ── Blog post: the back-link band ──
   The design's .page-hero (210px/120px on desktop) is sized for a page header
   — tag, big title, lede. A post reuses it for a band holding one 21px "Back
   to Blog" link, so that geometry left ~88px of nothing under the nav and
   another 120px before the cover.

   The bottom padding was previously kept on covered posts as "climb room" for
   the cover. It is not: the sheet climbs by its own negative margin
   (-9/16/2 of the stage width), which owes nothing to this band. So every
   post gets the tightened geometry, cover or not — enough to clear the fixed
   nav and a small gap to whatever follows.

   The pb-[30px] utility in the markup never applied (the un-layered sheet's
   padding-block outranks it) and has been removed. */
html[data-design="v2"] .page-hero--tight {
  padding-block: 92px 14px;
}
@media (width >= 64rem) {
  html[data-design="v2"] .page-hero--tight {
    padding-block: 132px 16px;
  }
}

/* ── Blog post: dark reading sheet in the dark theme ──
   The design's .doc-card is paper — white in both themes. Docs keep that
   look; blog articles follow the page theme instead (user call, 2026-08-12).
   This flips the card's token re-scope back to the sheet's own dark-ladder
   values and swaps the paper fill for a dark sheet. V2SiteNav skips
   .article-sheet for its on-light state outside the light theme — keep the
   two in sync. */
html[data-design="v2"]:not([data-theme="light"]) .doc-card.article-sheet {
  background-color: #101013;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 100px -50px rgba(0, 0, 0, 0.85);

  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.8);
  --fg-subtle: rgba(255, 255, 255, 0.6);
  --fg-faint: rgba(255, 255, 255, 0.4);
  --fg-ghost: rgba(255, 255, 255, 0.25);
  --hairline: rgba(255, 255, 255, 0.2);
  --hairline-dim: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.4);
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-3: rgba(255, 255, 255, 0.16);

  --color-fg: #ffffff;
  --color-fg-muted: rgba(255, 255, 255, 0.8);
  --color-fg-subtle: rgba(255, 255, 255, 0.6);
  --color-fg-faint: rgba(255, 255, 255, 0.4);
  --color-fg-ghost: rgba(255, 255, 255, 0.25);
  --color-hairline: rgba(255, 255, 255, 0.2);
  --color-hairline-dim: rgba(255, 255, 255, 0.08);
  --color-hairline-strong: rgba(255, 255, 255, 0.4);
  --color-surface-1: rgba(255, 255, 255, 0.04);
  --color-surface-2: rgba(255, 255, 255, 0.08);
  --color-surface-3: rgba(255, 255, 255, 0.16);

  --gradient-panel: linear-gradient(180deg, #131313 0%, #000000 100%);
  --panel-fill: linear-gradient(180deg, #131313 0%, #000000 100%);
  --color-ink: #0a0a0a;
  --color-ink-soft: #131316;
  --fill-tile: #18181b;
}