/*
  Tokens visuales de RadarLicita.

  ES EL ÚNICO FICHERO DEL PRODUCTO CON UN HEXADECIMAL (Principio 11). Los valores salen
  de docs/04_BRANDING_INNOVO.md, que es la única fuente de verdad para color, tipografía,
  forma y espacio. Ningún componente define valores propios.

  Aquí van también los `@font-face` de las tres tipografías, servidas desde el propio
  dominio y nunca desde Google (research.md § D-14).
*/

/* ── Tipografías autoalojadas ─────────────────────────────────────────────────── */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fuentes/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fuentes/poppins-700.woff2") format("woff2");
}

/* Inter y JetBrains Mono se distribuyen como tipografías variables: un solo fichero
   cubre todo el rango de peso que usa el producto, así que no se descarga tres veces
   lo mismo. Poppins sí es estática y lleva un fichero por peso. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fuentes/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fuentes/jetbrains-mono-variable.woff2") format("woff2");
}

/* ── Tokens ───────────────────────────────────────────────────────────────────── */

:root {
  /* Color de marca */
  --innovo-azul-noche: #101828;
  --innovo-negro-azulado: #0B111C;
  --innovo-coral: #E8547A;
  --innovo-blanco: #FFFFFF;

  /* Tokens semánticos · tema claro */
  --fondo: #FFFFFF;
  --fondo-sutil: #F6F7F9;
  --superficie: #FFFFFF;
  --borde: #E3E6EC;
  --texto: #101828;
  --texto-suave: #5A6478;
  --acento: #E8547A;
  --acento-contraste: #FFFFFF;
  --exito: #1FA97C;
  --aviso: #D98A1F;
  --error: #D92D4B;
  --info: #3A7BD5;

  /* Espaciado en múltiplos de 4 */
  --espacio-1: 4px;  --espacio-2: 8px;  --espacio-3: 12px; --espacio-4: 16px;
  --espacio-5: 24px; --espacio-6: 32px; --espacio-7: 48px; --espacio-8: 64px;

  /* Radios */
  --radio-control: 8px;  --radio-tarjeta: 12px;
  --radio-modal: 16px;   --radio-etiqueta: 999px;

  /* Sombras suaves y frías */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .06);
  --sombra-2: 0 8px 24px rgba(16, 24, 40, .10);

  /* Tipografías */
  --fuente-titulo: "Poppins", system-ui, sans-serif;
  --fuente-cuerpo: "Inter", system-ui, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Escala tipográfica: 12 · 14 · 16 · 20 · 24 · 32 · 40 */
  --texto-xs: 12px; --texto-s: 14px;  --texto-m: 16px;
  --texto-l: 20px;  --texto-xl: 24px; --texto-2xl: 32px; --texto-3xl: 40px;

  --interlineado-cuerpo: 1.5;
  --interlineado-titulo: 1.2;
  --espaciado-titulo: -0.01em;

  /* Retícula: los dos únicos puntos de ruptura y las medidas del esqueleto */
  --ancho-aplicacion: 1280px;
  --ancho-lectura: 72ch;
  --ancho-barra-lateral: 240px;
  --ancho-barra-lateral-colapsada: 72px;
  --alto-cabecera: 64px;
  --alto-barra-inferior: 64px;
  --area-tactil-minima: 44px;

  /* Movimiento: 150–200 ms, solo en opacity y transform */
  --transicion-corta: 150ms;
  --transicion-larga: 200ms;
}

/* Tema oscuro elegido expresamente por el usuario: el servidor escribe `data-tema`. */
:root[data-tema="oscuro"] {
  --fondo: #0B111C;
  --fondo-sutil: #101828;
  --superficie: #162034;
  --borde: #26314A;
  --texto: #F2F4F8;
  --texto-suave: #A3ACBF;
  --acento: #F06E8E;
  --acento-contraste: #0B111C;
  --exito: #34C596;
  --aviso: #E8A54A;
  --error: #F2647E;
  --info: #5C9CEF;
}

/*
  Tema automático: se respeta la preferencia del sistema operativo
  (docs/03_UX_UI_SPEC.md § Accesibilidad, research.md § D-12). Solo se aplica cuando el
  usuario NO ha elegido tema, es decir, cuando no hay atributo `data-tema`.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --fondo: #0B111C;
    --fondo-sutil: #101828;
    --superficie: #162034;
    --borde: #26314A;
    --texto: #F2F4F8;
    --texto-suave: #A3ACBF;
    --acento: #F06E8E;
    --acento-contraste: #0B111C;
    --exito: #34C596;
    --aviso: #E8A54A;
    --error: #F2647E;
    --info: #5C9CEF;
  }
}