/* ==========================================================================
   PowerWave AV — DESIGN TOKENS
   Single source of truth for the brand system. Colours are taken from the logo
   (black, electric blue, orange, white). js/modules/hero-scene.js also reads
   --blue-* and --orange-* from here, so changing them restyles the 3D scene too.

   Colour-contrast notes (against --bg):
   - --text, --text-muted, --blue-2, --orange-1/2 pass WCAG AA for body text.
   - --blue-1 (#0066ff) is ~4.2:1 → use it for fills/borders/gradients only,
     never for small text.
   - Primary buttons use dark ink on the orange gradient (≈6.7:1 or better).
   ========================================================================== */

:root {
  /* ---- Brand colours ---- */
  --blue-1: #0066ff;
  --blue-2: #00bfff;
  --orange-1: #ff6600;
  --orange-2: #ff9900;
  --white: #ffffff;
  --black: #000000;

  /* ---- Surfaces ---- */
  --bg: #04060b;
  --surface-1: #0a0f1c;
  --surface-2: #101727;
  --surface-3: #162035;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* ---- Text ---- */
  --text: #eef2fb;
  --text-muted: #a8b3cb;
  --ink-on-accent: #07090f;
  --danger: #ff8a8a;
  --success: #5ee6a8;

  /* ---- Gradients (mirror the logo) ---- */
  --grad-blue: linear-gradient(135deg, var(--blue-1), var(--blue-2));
  --grad-orange: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  /* Blue → orange with a tight blend zone (a long blend would pass through muddy grey-olive) */
  --grad-wave: linear-gradient(100deg, var(--blue-1) 0%, var(--blue-2) 44%, var(--orange-1) 58%, var(--orange-2) 100%);

  /* ---- Typography ---- */
  --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-hero: clamp(2.3rem, 0.9rem + 7.4vw, 5.25rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --nav-h: 68px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  /* ---- Effects ---- */
  --shadow-card: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --glow-blue: 0 0 40px -8px rgba(0, 191, 255, 0.45);
  --glow-orange: 0 0 40px -8px rgba(255, 102, 0, 0.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Stacking ---- */
  --z-nav: 100;
  --z-cursor: 9999;
}

@media (min-width: 900px) {
  :root {
    --nav-h: 76px;
  }
}