/* Enervo AI · tokens de diseño
   Paleta de la identidad (Azul Noche, turquesa, cian, Niebla) aplicada con
   un lenguaje sobrio: blanco, tinta, gris cálido y rellenos muy claros.
   Sora en pesos ligeros para todo; Outfit solo en el wordmark. */

:root {
  /* marca */
  --brand-night: #0B1F33;
  --brand-cyan: #06B6D4;
  --brand-teal: #14B8A6;
  --brand-teal-deep: #0F766E;
  --brand-mist: #F3F7F9;

  /* superficies */
  --paper: #FFFFFF;
  --paper-soft: #F4F6F8;      /* relleno de cajas */
  --paper-teal: #EEF8F6;      /* relleno de cajas · Hub */
  --paper-cyan: #EDF5FA;      /* relleno de cajas · Labs */
  --band: #F7F9FB;            /* bandas de sección */
  --band-teal: #F0F8F7;

  /* tinta */
  --ink: #0B1F33;
  --ink-2: #33475B;
  --ink-3: #5F6E7C;           /* texto corrido */
  --ink-4: #8A97A3;           /* notas */
  --line: #D9DFE5;
  --line-2: #BCC6CF;

  /* acentos */
  --hub: #0F9E92;
  --labs: #0A8FB8;
  --accent: var(--hub);

  /* pie */
  --foot-bg: #0B1F33;
  --foot-ink: #F3F7F9;
  --foot-ink-2: #A9BBCB;

  /* trazo animado */
  --stroke: var(--ink);
  --spark: var(--brand-teal);
  --spark-hot: #2DD4BF;

  /* tipografía */
  --font-sans: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-wordmark: "Outfit", "Sora", system-ui, sans-serif;

  /* ritmo */
  --container: 1140px;
  --gutter: 24px;
  --section: clamp(72px, 9vw, 120px);
  --radius: 8px;
  --radius-card: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* oscuro: la misma tinta casi negra a la que oscurece el fondo WebGL al hacer
   scroll (#06080B en js/background.js), para que no haya corte entre secciones */
:root[data-theme="dark"] {
  --paper: #06080B;
  --paper-soft: #0C1014;
  --paper-teal: #08171A;
  --paper-cyan: #081520;
  --band: #090C10;
  --band-teal: #08171A;

  --ink: #F3F7F9;
  --ink-2: #D0D6DB;
  --ink-3: #ADB6BE;
  --ink-4: #8B96A0;
  --line: #1C232B;
  --line-2: #2A333D;

  --hub: #2DD4BF;
  --labs: #22D3EE;

  --foot-bg: #06080B;

  --stroke: var(--brand-mist);
  --spark: #2DD4BF;
  --spark-hot: #5EEAD4;

  color-scheme: dark;
}