/* =========================================================
   PROSPECTOR · variables.css
   Design tokens — paleta oficial, tipografía triple,
   jerarquía exacta. Sistema visual maestro.
   Load FIRST.
   ========================================================= */

:root {
  /* ---------- Paleta oficial ---------- */

  /* Fondos */
  --bg: #07070A;             /* negro carbón — fondo principal, navbar */
  --bg-2: #0D0A14;           /* negro violeta profundo — alternos, cards premium, overlays */
  --bg-3: #120F1C;           /* tono extendido para superficies elevadas */

  /* Superficies translúcidas (glassmorphism) */
  --surface: rgba(255, 255, 255, 0.025);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-hi: rgba(255, 255, 255, 0.06);

  /* Bordes */
  --border: rgba(255, 255, 255, 0.07);
  --border-hi: rgba(255, 255, 255, 0.12);
  --border-glow: rgba(139, 92, 246, 0.28);

  /* Líneas finas moradas ambientales — el tejido visual del sistema */
  --line-violet: rgba(168, 85, 247, 0.18);
  --line-violet-strong: rgba(168, 85, 247, 0.35);
  --line-violet-glow: rgba(168, 85, 247, 0.55);

  /* Texto */
  --text: #F8FAFC;           /* blanco hielo — titulares principales, textos clave */
  --text-hi: #FFFFFF;        /* blanco puro — contraste máximo */
  --text-mute: #A1A1AA;      /* gris humo — texto secundario, subtítulos, labels */
  --text-dim: #6B6784;       /* muy atenuado — metadata, timestamps */

  /* Primarios — violetas */
  --violet: #8B5CF6;         /* violeta eléctrico — color principal de marca */
  --violet-2: #A855F7;       /* morado neón — gradientes, hover, luces ambientales */
  --violet-hi: #C4B5FD;      /* violeta claro — highlights, gradient text */
  --violet-deep: #5B21B6;    /* violeta profundo — shadows, gradientes oscuros */

  /* Secundarios — acentos tácticos */
  --orange: #FF6A00;         /* naranja energético — logotipo textual, CTA principales */
  --orange-2: #FF8A3D;       /* naranja secundario — gradientes, hover */
  --orange-hi: #FFB366;      /* naranja claro — highlights, KPIs */

  --cyan: #00E5FF;           /* cyan glow — IA, datos, automatización, líneas radar */
  --cyan-dim: rgba(0, 229, 255, 0.35);

  --green-radar: #00FF85;    /* verde neón radar — USO EXCLUSIVO: logo dot, éxito, KPIs positivos, Closed Won. Máximo 1%. */
  --green: #00FF85;          /* alias para backward compat — mismo valor que green-radar */
  --green-soft: rgba(0, 255, 133, 0.18);

  --danger: #F87171;

  /* ---------- Gradients ---------- */
  --grad-brand: linear-gradient(135deg, #8B5CF6 0%, #FF6A00 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.16) 0%, rgba(255, 106, 0, 0.12) 100%);
  --grad-violet: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  --grad-violet-neon: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
  --grad-orange: linear-gradient(135deg, #FF6A00 0%, #F43F5E 100%);
  --grad-text: linear-gradient(120deg, #FFFFFF 0%, #C4B5FD 50%, #FF8A3D 100%);
  --grad-cyan: linear-gradient(135deg, #00E5FF 0%, #8B5CF6 100%);
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  --grad-radar: radial-gradient(circle, rgba(0, 255, 133, 0.4) 0%, transparent 70%);

  /* ---------- Glow / shadows ---------- */
  --glow-violet: 0 0 60px rgba(139, 92, 246, 0.35), 0 0 20px rgba(139, 92, 246, 0.25);
  --glow-orange: 0 0 60px rgba(255, 106, 0, 0.35), 0 0 20px rgba(255, 106, 0, 0.25);
  --glow-cyan: 0 0 40px rgba(0, 229, 255, 0.35), 0 0 12px rgba(0, 229, 255, 0.25);
  --glow-green: 0 0 24px rgba(0, 255, 133, 0.55), 0 0 8px rgba(0, 255, 133, 0.4);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 28px 60px -16px rgba(139, 92, 246, 0.35), 0 12px 30px -12px rgba(0, 0, 0, 0.7);

  /* ---------- Typography ---------- */
  /* Tres fuentes, cada una con rol específico — no introducir más */

  /* Body — Inter Regular/Medium — párrafos, listas, formularios, navegación */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Headings — Space Grotesk Bold — H1, H2, claims, bloques hero */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Numérica — Orbitron SemiBold — métricas, KPIs, dashboards, cifras hero */
  --font-numeric: 'Orbitron', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;

  /* Mono — JetBrains Mono — labels pequeños, metadata, eyebrows */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* ---------- Jerarquía tipográfica (spec oficial) ----------
     H1: 56px desktop / 38px mobile
     H2: 42px / 30px
     H3: 28px / 22px
     Body: 18px / 16px
     Small: 14px
  */
  --fs-small: 0.875rem;                                       /* 14px */
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);          /* 16 → 18px */
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);          /* alias body */
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);          /* 17 → 19px — lede */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.3125rem);      /* 18 → 21px — subtítulos */
  --fs-xl: clamp(1.375rem, 1.245rem + 0.65vw, 1.75rem);        /* H3 · 22 → 28px */
  --fs-2xl: clamp(1.875rem, 1.575rem + 1.5vw, 2.625rem);       /* H2 · 30 → 42px */
  --fs-3xl: clamp(2.375rem, 1.95rem + 2.125vw, 3.5rem);        /* H1 · 38 → 56px */
  --fs-display: clamp(2.375rem, 1.95rem + 2.125vw, 3.5rem);    /* hero H1 · 38 → 56px */

  /* KPIs y métricas grandes — Orbitron no respeta la jerarquía H1/H2/H3, tiene su propia escala */
  --fs-kpi-sm: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);       /* 20 → 26px — KPI compacto */
  --fs-kpi: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);         /* 30 → 44px — KPI medio */
  --fs-kpi-xl: clamp(2.75rem, 2.25rem + 2.5vw, 4.25rem);        /* 44 → 68px — cifras hero */

  /* ---------- Spacing / layout ---------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 820px;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);

  /* Radios — cards entre 18-22px per spec */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;   /* cards — en el rango oficial 18-22 */
  --radius-xl: 28px;

  /* Easings / durations */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;
}