/* ============================================================
   NAZAR Energy — tokens.css
   Sistema de diseño (custom properties): blanco, azul marino y
   amarillo, con mucho espacio. Los colores salen del logo del
   cliente (2026-11-08): marino #0b1e46 y amarillo #fdbe05. El
   resto de la escala conserva su luminosidad con el tono del logo.
   Logo: frontend/templates/parciales/logo.html.
   ============================================================ */

:root {
  /* ---------- Paleta de marca ---------- */
  --c-marino-950: #071127;
  --c-marino-900: #0b1e46;           /* marino del logo */
  --c-marino-800: #122959;
  --c-marino-750: #16316b;           /* paso intermedio de los degradados oscuros */
  --c-marino-700: #1a3979;
  --c-marino-600: #234998;
  --c-marino-100: #e3e9f6;
  --c-marino-50: #f2f5fb;

  --c-amarillo-500: #fdbe05;         /* amarillo del logo */
  --c-amarillo-400: #ffd65c;
  --c-amarillo-100: #fff3d1;

  /* Los mismos colores en canales, para transparencias: rgb(var(--c-marino-rgb) / 0.1) */
  --c-marino-rgb: 11 30 70;          /* = marino-900 */
  --c-amarillo-rgb: 253 190 5;       /* = amarillo-500 */

  --c-blanco: #ffffff;

  /* ---------- Semánticos ---------- */
  --c-fondo: var(--c-blanco);
  --c-fondo-suave: var(--c-marino-50);
  --c-texto: #16223b;
  --c-texto-suave: #4a5978;          /* AA sobre blanco (≈7:1) */
  --c-texto-inverso: #f5f8fd;
  --c-texto-inverso-suave: #c6d0e6;  /* AA sobre marino-950 */
  --c-primario: var(--c-marino-900);
  --c-acento: var(--c-amarillo-500);
  --c-borde: #d8deec;
  --c-borde-fuerte: #a9b5cf;

  --c-exito: #157a55;
  --c-exito-fondo: #e7f6ef;
  --c-error: #b3261e;
  --c-error-fondo: #fcebea;
  --c-aviso: #7a5800;
  --c-aviso-fondo: #fff6de;

  --c-foco: #1d6fe0;                 /* anillo de foco en fondos claros */
  --c-foco-inverso: var(--c-amarillo-400); /* anillo de foco en fondos oscuros */

  /* ---------- Tipografía (fuentes del sistema, sin CDNs) ---------- */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --texto-xs: 0.8125rem;
  --texto-s: 0.9375rem;
  --texto-m: 1.0625rem;
  --texto-l: 1.25rem;
  --texto-xl: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
  --texto-2xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.375rem);
  --texto-display: clamp(2.125rem, 1.5rem + 3.4vw, 3.5rem);

  --interlineado-texto: 1.6;
  --interlineado-titulo: 1.15;

  /* ---------- Espaciado (base 4 px) ---------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-8: 3rem;
  --esp-10: 4rem;
  --esp-seccion: clamp(3.5rem, 6vw + 1rem, 6.5rem);

  /* ---------- Radios (botones grandes y redondeados, briefing) ---------- */
  --radio-s: 8px;
  --radio-m: 12px;
  --radio-l: 20px;
  --radio-pill: 999px;

  /* ---------- Sistema de elevación (sombras multicapa) ---------- */
  --sombra-1: 0 1px 2px rgb(var(--c-marino-rgb) / 0.05), 0 1px 3px rgb(var(--c-marino-rgb) / 0.08);
  --sombra-2: 0 3px 6px rgb(var(--c-marino-rgb) / 0.05), 0 8px 20px rgb(var(--c-marino-rgb) / 0.09);
  --sombra-3: 0 8px 16px rgb(var(--c-marino-rgb) / 0.08), 0 20px 44px rgb(var(--c-marino-rgb) / 0.13);
  --sombra-4: 0 16px 32px rgb(var(--c-marino-rgb) / 0.12), 0 32px 72px rgb(var(--c-marino-rgb) / 0.18);
  --sombra-acento: 0 8px 24px rgb(var(--c-amarillo-rgb) / 0.35);

  /* ---------- Transiciones ---------- */
  --trans-rapida: 150ms ease;
  --trans-media: 280ms cubic-bezier(0.22, 0.7, 0.35, 1);
  --trans-entrada: 600ms cubic-bezier(0.22, 0.7, 0.35, 1);
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring suave para micro-interacciones */

  /* ---------- Capas (escala única, sin hacks de z-index) ---------- */
  --capa-base: 0;
  --capa-elevada: 1;
  --capa-cabecera: 10;
  --capa-flotante: 20;

  /* ---------- Layout ---------- */
  --ancho-contenido: 72rem;
  --ancho-estrecho: 46rem;
  --ancho-texto: 42rem;
  --altura-cabecera: 4.3125rem; /* 69px: min-height 4.25rem + borde 1px (header sticky) */
}