/* ============================================================
   TRUCKBOX v8 — DESIGN TOKENS (LIGHT-DARK · término medio)
   Gris-azul claro suave (ni blanco puro ni negro) +
   bloques navy oscuros solo de contraste + acentos del logo
   ============================================================ */
:root {
  /* ---------- Superficies ---------- */
  --bg: #e9eef5;
  --bg-soft: #f2f6fb;
  --bg-mist: #e1e8f1;
  --bg-blue: rgba(8, 145, 178, 0.07);
  --bg-cyan-mist: rgba(6, 182, 212, 0.08);
  --panel-grad: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);

  /* ---------- Tinta ---------- */
  --ink: #0c1a2d;
  --ink-soft: #1c2e46;
  --t-body: #48596f;
  --t-muted: #64758e;
  --t-faint: #8fa0b6;
  --t-on-color: #04121a;

  /* ---------- Bordes ---------- */
  --line: #dbe3ee;
  --line-soft: #e6edf6;
  --line-strong: #c0cede;
  --line-accent: rgba(8, 145, 178, 0.4);

  /* ---------- Acentos (logo) ---------- */
  --cyan-deep: #0e7490;
  --cyan: #0891b2;
  --cyan-mid: #06b6d4;
  --cyan-lite: #38bdf8;
  --cyan-mist: #a5f3fc;
  --sky: #0ea5e9;
  --emerald: #059669;
  --emerald-lite: #34d399;
  --emerald-deep: #047857;

  /* ---------- Navy (bloques de contraste) ---------- */
  --navy-1: #0c1a2e;
  --navy-2: #0f2238;
  --navy-3: #14283f;
  --navy-text: #a9bdd4;
  --navy-text-dim: #7d92ab;

  /* ---------- Tipografía ---------- */
  --font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---------- Escala ---------- */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --header-h: 76px;

  /* ---------- Radii ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Sombras ---------- */
  --glow-cyan: 0 14px 44px -16px rgba(8, 145, 178, 0.4);
  --glow-cyan-soft: 0 10px 30px -14px rgba(8, 145, 178, 0.28);
  --glow-emerald: 0 14px 44px -16px rgba(5, 150, 105, 0.38);
  --shadow-card: 0 28px 64px -34px rgba(11, 26, 45, 0.3);
  --shadow-panel: 0 18px 46px -30px rgba(11, 26, 45, 0.28);
  --shadow-sm: 0 6px 18px -12px rgba(11, 26, 45, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(8, 145, 178, 0.16);

  /* ---------- Gradientes ---------- */
  --grad-brand: linear-gradient(120deg, #06b6d4 0%, #22d3ee 55%, #38bdf8 100%);
  --grad-logo: linear-gradient(135deg, #22d3ee 0%, #38bdf8 45%, #0891b2 100%);
  --grad-text: linear-gradient(120deg, #0e7490 0%, #0891b2 48%, #0ea5e9 100%);
  --grad-emerald: linear-gradient(120deg, #0b9a63 0%, #25d366 100%);
  --grad-ink: linear-gradient(120deg, #0b132b 0%, #123a56 100%);
  --grad-navy: linear-gradient(150deg, #0f2238 0%, #0b182a 70%);

  /* ---------- Motion ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 0.18s;
  --dur-2: 0.32s;
  --dur-3: 0.6s;
}