/*
  LUXVISION — Design Tokens
  Design Read: premium industrial B2B landing page for LED display/video-wall
  hardware, dark cinematic language, Praga R1 / Lando Norris reference feel.
  Dials: VARIANCE 7 / MOTION 7 / DENSITY 3.
  One accent per page (Color Consistency Lock): Cornflower is the shared
  sitewide primary; PROLUX pages swap to Lilac, ECOLUX pages swap to Emerald.
  Prototype note: fonts are loaded from Google Fonts CDN here for fast local
  testing only. When ported into Webflow, host these via Webflow's native
  font manager / Adobe Fonts instead of a production <link> tag.
*/

:root {
  /* Base (off-black / off-white, never pure #000 or #fff) */
  --lv-bg: #0b0b10;
  --lv-bg-raised: #121218;
  --lv-bg-raised-2: #191922;
  --lv-ink: #f3f2f7;
  --lv-ink-muted: #9c99ac;
  --lv-ink-faint: #625f70;
  --lv-border: rgba(243, 242, 247, 0.09);
  --lv-border-strong: rgba(243, 242, 247, 0.16);

  /* Brand */
  --lv-cornflower: #655af6;
  --lv-cornflower-soft: rgba(101, 90, 246, 0.16);
  --lv-lilac: #a380f2;
  --lv-lilac-soft: rgba(163, 128, 242, 0.16);
  --lv-emerald: #21de92;
  --lv-emerald-soft: rgba(33, 222, 146, 0.16);

  /* Active accent - swapped per page. Default = sitewide Cornflower. */
  --lv-accent: var(--lv-cornflower);
  --lv-accent-soft: var(--lv-cornflower-soft);

  /* Type */
  --lv-font-display: "Outfit", system-ui, sans-serif;
  --lv-font-body: "Manrope", system-ui, sans-serif;

  /* Radius (Shape Consistency Lock: soft scale, pill for interactive) */
  --lv-radius-sm: 6px;
  --lv-radius-md: 14px;
  --lv-radius-lg: 28px;
  --lv-radius-pill: 999px;

  /* Spacing rhythm */
  --lv-space-section: clamp(5rem, 9vw, 9rem);
  --lv-space-gutter: clamp(1.5rem, 5vw, 4rem);
  --lv-max-width: 1360px;

  /* Motion */
  --lv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lv-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* The horizontal band the pill nav and the brand logo both live in.
     Declared once here rather than separately in pill-nav.css and
     splash.css so the logo cannot drift out of line with the menu bar -
     the brand mark sits in the same strip at the same height, which is
     the whole point of it holding position as the page scrolls. Anything
     else that needs to sit in this band (a future utility link, a
     language switcher) should read these rather than restate them. */
  --lv-nav-band-top: clamp(1rem, 3vh, 1.75rem);
  --lv-nav-band-h: 54px;
  /* 🔴 THE KEEP-OUT. Everything the fixed brand mark and the pill bar occupy,
     measured rather than guessed: the band's own offset, its height, and a
     little air under it.

     Joel, 14 Sept 2026: "When Scrolling the LUXVISION logo gets in the way we
     need to ensure that no matter where we scroll the scrolling effect doesn't
     compete with the top left Logo."

     ⚠️ ANY FULL-HEIGHT PINNED STAGE MUST RESERVE THIS. A section that centres
     its content in 100vh puts the top of that content near the top of the
     viewport — and unlike a normally-scrolling section, where copy passes under
     the mark and out again in a second, a pinned stage holds the collision on
     screen for the whole section. That is what happened to "Manufactured in
     North America": an eyebrow sat behind the wordmark for the entire scroll. */
  --lv-nav-keepout: calc(var(--lv-nav-band-top) + var(--lv-nav-band-h) + 1.25rem);
}

/* Page-level accent overrides, applied via a class on <body> */
body.theme-prolux {
  --lv-accent: var(--lv-lilac);
  --lv-accent-soft: var(--lv-lilac-soft);
}
body.theme-ecolux {
  --lv-accent: var(--lv-emerald);
  --lv-accent-soft: var(--lv-emerald-soft);
}