/* ============================================================
   Vi2ionai — Design tokens (Phase 1: premium 3D homepage)
   Additive only — existing --black/--grey-* tokens in index.html
   are untouched. These new tokens layer a dark, glass, depth-based
   visual language on top for the hero/products/dark sections.
   ============================================================ */

:root {
  /* Deep space navy — used for dark 3D sections */
  --ink-950: #05070d;
  --ink-900: #090d18;
  --ink-800: #10162a;
  --ink-700: #171e38;

  /* Accent gradient pair — GPS/signal blue + violet depth */
  --accent-cyan: #38bdf8;
  --accent-cyan-soft: rgba(56, 189, 248, 0.35);
  --accent-violet: #818cf8;
  --accent-violet-soft: rgba(129, 140, 248, 0.35);
  --accent-green: #4ade80;

  /* Glass surface */
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.22);
  --glass-blur: 18px;

  /* Depth shadows / glow */
  --depth-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --depth-2: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --depth-3: 0 30px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
  --glow-cyan: 0 0 1px rgba(56, 189, 248, 0.6), 0 8px 40px rgba(56, 189, 248, 0.18);
  --glow-violet: 0 0 1px rgba(129, 140, 248, 0.6), 0 8px 40px rgba(129, 140, 248, 0.18);

  /* Motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.5s;
  --dur-slow: 0.9s;

  /* ── Hero dashboard reference palette ─────────────────────────────
     Exact tokens supplied for the fleet-control-centre hero redesign.
     Scoped to the hero/dashboard only — the tokens above remain the
     source of truth for the rest of the dark-3D layer. */
  --hero-bg: #07101C;
  --hero-bg-deep: #030914;
  --hero-panel: #0A1422;

  --blue-primary: #3ABEF9;
  --blue-secondary: #5B7CFA;
  --cyan-glow: #25D7FF;
  --cyan-soft: rgba(37, 215, 255, 0.18);

  --hd-green: #31D98B;
  --hd-green-soft: rgba(49, 217, 139, 0.15);
  --hd-orange: #F6B73C;
  --hd-orange-soft: rgba(246, 183, 60, 0.16);
  --hd-red: #FF5C69;
  --hd-red-soft: rgba(255, 92, 105, 0.15);

  --hd-text-white: #F7F9FC;
  --hd-text-primary: #E9EEF5;
  --hd-text-secondary: #8E9AAA;
  --hd-text-muted: #687487;

  --hd-border: rgba(255, 255, 255, 0.10);
  --hd-border-strong: rgba(255, 255, 255, 0.16);

  --hd-glass: rgba(10, 20, 34, 0.78);
  --hd-glass-light: rgba(255, 255, 255, 0.04);

  --shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.45);
  --shadow-blue: 0 0 40px rgba(37, 215, 255, 0.18);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-mid: 0.001s;
    --dur-slow: 0.001s;
  }
}