/* Atelia · tokens de la landing: el oscuro de la app y el color de la marca.
   - Base: el tema «Clásico» de la app (src/styles/tokens.css del repo de la app),
     que es el que se abre por defecto: así las fotos encajan sin costura.
   - Marca: el amarillo del reactor del logo (public/brand/atelia-icono.svg).
     Es el único acento: el icono de cada función y la palabra clave del titular.
   - Acción: el azul de la app, solo en botones y enlaces.
   El color de señal (verde, naranja, rojo) solo cuando significa algo. */
:root {
  color-scheme: dark;

  /* base · Clásico */
  --papel: #181818;        /* fondo de la página, un punto más hondo que la app */
  --tarjeta: #1E1E1E;      /* superficies = el fondo de la app */
  --tarjeta-alta: #252526; /* lo que va encima de una tarjeta = sus paneles */
  --tinta: #FFFFFF;        /* títulos */
  --tinta-suave: #B4B4B4;  /* texto corrido */
  --tinta-tenue: #858585;  /* notas */
  --relleno: rgba(255, 255, 255, 0.07);
  --relleno-suave: rgba(255, 255, 255, 0.04);
  --linea: #2B2B2B;
  --linea-fuerte: #3A3A3D;

  /* marca: el reactor del logo */
  --marca: #F5B53D;
  --marca-claro: #FFD479;
  --marca-velo: rgba(245, 181, 61, 0.12);

  /* acción y señales · Clásico */
  --adelante: #007FD4;       --adelante-texto: #4AA3E0;
  --adelante-hover: #1A8FE0;
  --adelante-velo: rgba(0, 127, 212, 0.16);
  --te-necesita: #FF9F0A;    --te-necesita-texto: #F5B53D;
  --hecho: #3FB950;          --hecho-texto: #3FB950;
  --cuidado: #F14C4C;        --cuidado-texto: #F14C4C;

  /* bajo el capó */
  --capo: #121212;  --capo-superficie: #1E1E1E;  --capo-linea: #2B2B2B;
  --capo-tinta: #CCCCCC;  --capo-tinta-suave: #858585;
  --capo-adelante: #4AA3E0;  --capo-hecho: #3FB950;  --capo-info: #4AA3E0;
  --capo-te-necesita: #FF9F0A;

  /* identidad de las IA: fijas, como en la app */
  --claude: #D97757;
  --codex: #10A37F;

  /* letra: Jakarta para la interfaz, Inter para leer */
  --letra: "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --letra-lectura: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --letra-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* forma: tarjetas grandes 22, pequeñas 16, controles 12, miniaturas 9 */
  --r-xl: 22px;  --r-l: 16px;  --r-m: 12px;  --r-s: 9px;  --r-pill: 999px;
  /* en oscuro la sombra apenas se ve: separa el canto de luz de arriba */
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.3);
  --sombra-flotante: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55);

  /* ritmo */
  --maxw: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  /* El hueco entre dos secciones es la suma de dos paddings, así que este valor
     se ve siempre al doble. */
  --space-section: clamp(3.25rem, 2.5rem + 3.2vw, 6rem);
  /* Respiro mayor, reservado a los dos remates de la página. */
  --space-section-lg: clamp(4.5rem, 3.5rem + 4.5vw, 8.5rem);

  /* motion */
  --dur-fast: 150ms;
  --dur-normal: 320ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------
     Nombres de las marcas anteriores («Cercano» y reactor), apuntando a la
     nueva. Las secciones aún los usan; así cambian de piel sin tocar cada
     regla. No usar en código nuevo.
     ------------------------------------------------------------------ */
  --crema: var(--papel);
  --blanco: var(--tarjeta);
  --arena: var(--tarjeta);
  --gris: var(--tinta-suave);
  --gris-suave: var(--tinta-suave);
  --ocre: var(--adelante-texto);
  --ocre-hover: var(--adelante-hover);
  --ocre-claro: var(--adelante-velo);
  --ocre-texto: var(--adelante-texto);
  --verde: var(--hecho-texto);   --verde-fondo: rgba(52, 199, 89, 0.14);  --verde-punto: var(--hecho);
  --mostaza: var(--te-necesita-texto); --mostaza-fondo: rgba(255, 149, 0, 0.14); --mostaza-punto: var(--te-necesita);
  --rojo: var(--cuidado-texto);  --rojo-fondo: rgba(255, 59, 48, 0.1);    --rojo-punto: var(--cuidado);
  --azul: var(--adelante-texto); --azul-fondo: var(--adelante-velo);      --azul-punto: var(--adelante);
  --radio-s: var(--r-s);
  --radio: var(--r-l);
  --radio-l: var(--r-xl);
  --sombra-alta: var(--sombra-flotante);

  --carbon: var(--papel);
  --steel: var(--tarjeta);
  --panel: var(--tarjeta);
  --surface: var(--tarjeta);
  --surface-2: var(--papel);
  --line: var(--linea);
  --border: var(--linea);
  --border-cyan: var(--linea);
  --text-soft: var(--tinta-suave);
  --chalk: var(--tinta);
  --graphite: var(--tinta-tenue);
  --reactor: var(--adelante-texto);
  --reactor-deep: var(--adelante-hover);
  --gold: var(--te-necesita);
  --red: var(--cuidado-texto);
  --radius: var(--r-l);
  --display: var(--letra);
  --sans: var(--letra);
  --mono: var(--letra-mono);
}