/* ============================================================
   ELECTRONORTE — LÍNEA VIVA
   tokens.css — design system completo. Nunca hardcodear colores
   o espaciados fuera de este archivo.
   ============================================================ */

:root {
  /* ---- Color: base carbón ---- */
  --void: #0a0a0a;            /* fondo global */
  --carbon: #111113;          /* fondo de sección alterna */
  --steel: #18181b;           /* superficies / cards */
  --steel-2: #202024;         /* superficies elevadas / hover */
  --line: rgba(244, 241, 236, 0.09);   /* bordes hairline */
  --line-strong: rgba(244, 241, 236, 0.18);

  /* ---- Color: texto ---- */
  --chalk: #f4f1ec;           /* texto principal */
  --smoke: #a8a49d;           /* texto secundario */
  --ash: #6d6a64;             /* texto terciario / metadatos */

  /* ---- Color: marca (extraído del SVG oficial del logo) ---- */
  --ember: #ff4e00;           /* naranja ElectroNorte — único primario */
  --ember-hot: #ff6a1f;       /* estado hover/activo */
  --amber: #ffb454;           /* solo en gradientes de energía */
  --ember-dim: rgba(255, 78, 0, 0.14);
  --ember-glow: rgba(255, 78, 0, 0.45);

  /* ---- Gradientes ---- */
  --g-energy: linear-gradient(94deg, var(--ember) 0%, var(--amber) 100%);
  --g-surface: linear-gradient(180deg, rgba(255, 78, 0, 0.06), rgba(255, 78, 0, 0) 60%);

  /* ---- Tipografía ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;

  /* escala fluida */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --text-2xl: clamp(2.2rem, 1.6rem + 3vw, 4.5rem);
  --text-hero: clamp(3.2rem, 1.8rem + 8.5vw, 9.5rem);
  --text-mega: clamp(4rem, 2rem + 11vw, 13rem);

  /* ---- Espaciado ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --section-pad: clamp(4.5rem, 3rem + 8vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max-w: 84rem;

  /* ---- Forma ---- */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);      /* expo out */
  --ease-spark: cubic-bezier(0.65, 0, 0.15, 1);    /* cortes eléctricos */
  --dur-fast: 0.25s;
  --dur: 0.6s;
  --dur-slow: 1.1s;

  /* ---- Z ---- */
  --z-nav: 100;
  --z-fab: 90;
  --z-preloader: 200;
  --z-cursor: 300;
}