/*
 * marca.css — ÚNICO archivo de marca de la página.
 *
 * Marca elegida por el titular el 5-oct-2026: ruta 2 «Abrazo» (frente MK).
 * Fuente de verdad: marca/marca.json del frente MK (rama claude/relaxed-ride-6jdtd1,
 * commit c25ffea). Si MK cambia un valor, se cambia aquí y en assets/marca/.
 *
 * Tipografías (SIL OFL 1.1), alojadas en /assets/fonts, sin CDN:
 *  - Sora (titulares, cifras grandes; MK la usa en 600, tracking −0,02 em).
 *  - Inter Tight (texto e interfaz).
 */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta MK «Abrazo» (valores fijos) */
  --cd-tinta: #101828;
  --cd-verde: #0e8a6a;          /* marca y títulos ≥ 18 px (4,3:1) */
  --cd-verde-oscuro: #0b6b5b;   /* enlaces y botones sobre claro (6,4:1) */
  --cd-verde-vivo: #19c38e;     /* degradado, gráficos, estados. Nunca texto */
  --cd-menta: #5fe3b4;          /* acento sobre oscuro. Nunca texto sobre claro */
  --cd-bruma: #f2f6f4;
  --cd-noche: #0d1714;
  --cd-blanco: #ffffff;
  --cd-degradado: linear-gradient(225deg, #19c38e, #0b6b5b);

  --fuente-titulos: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-titulos: -0.02em;

  /* Roles, tema claro */
  --fondo: var(--cd-bruma);
  --superficie: var(--cd-blanco);
  --texto: var(--cd-tinta);
  --texto-suave: #475467;       /* 7,4:1 sobre bruma */
  --linea: #d9e3de;
  --marca: var(--cd-verde);
  --enlace: var(--cd-verde-oscuro);
  --boton: var(--cd-verde-oscuro);
  --boton-hover: #08584a;
  --boton-texto: var(--cd-blanco);
  --tenue: #e3f1eb;

  /* Bloques oscuros de marca (portada, seguridad, pie): iguales en ambos temas */
  --oscuro-fondo: var(--cd-noche);
  --oscuro-superficie: #14211d;
  --oscuro-linea: #23362f;
  --oscuro-texto: #eaf2ef;
  --oscuro-suave: #a6bbb3;      /* 8,9:1 sobre noche */
  --oscuro-acento: var(--cd-menta);

  /* Forma */
  --radio-grande: 24px;
  --radio-medio: 16px;
  --radio-control: 12px;
  --radio-chip: 999px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: var(--cd-noche);
    --superficie: #14211d;
    --texto: #eaf2ef;
    --texto-suave: #a6bbb3;
    --linea: #24382f;
    --marca: var(--cd-menta);
    --enlace: var(--cd-menta);
    --boton: var(--cd-menta);
    --boton-hover: #8beccb;
    --boton-texto: var(--cd-tinta);
    --tenue: #163027;
    --oscuro-fondo: #08100d;
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --fondo: var(--cd-noche);
  --superficie: #14211d;
  --texto: #eaf2ef;
  --texto-suave: #a6bbb3;
  --linea: #24382f;
  --marca: var(--cd-menta);
  --enlace: var(--cd-menta);
  --boton: var(--cd-menta);
  --boton-hover: #8beccb;
  --boton-texto: var(--cd-tinta);
  --tenue: #163027;
  --oscuro-fondo: #08100d;
  color-scheme: dark;
}