/* ==========================================================================
   Bronce Final — tokens
   Transcripción literal de «Diseño.md» §1 (color), §2 (tipografía) y §3
   (espaciado y layout). Si se cambia un token de color hay que volver a medir
   su pareja de contraste (ver aviso en la cabecera de Diseño.md).
   ========================================================================== */

/* --- Fuentes autoalojadas (SIL OFL 1.1; crédito en #creditos) -------------- */
/* Variables (wght 400–700 / 400–600). Subconjuntos latin y latin-ext: el
   navegador solo descarga latin-ext si el texto lo necesita, así que la carga
   real en castellano es ~99 KB. Ojo: U+2192 (→, 56 usos en la web) está
   retirado a propósito de los rangos latin-ext de abajo — declarado ahí,
   forzaba la descarga de los dos ficheros ext (~35 KB) solo por la flecha;
   sin declararlo, la pinta la fuente de reserva y no se nota. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2190, U+2194, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2190, U+2194, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- §1 Color: tema claro «pergamino» ------------------------------------- */

:root {
  /* Fondo y tinta — tema claro «pergamino» */
  --bg: #f3ecdd;            /* fondo general, arena/pergamino */
  --bg-alzado: #fbf7ec;     /* tarjetas, paneles, sheets */
  --bg-hundido: #eae0cc;    /* pozos, pistas de timeline, bordes de escena */
  --tinta: #2b2118;         /* texto principal (contraste ~12:1 sobre --bg) */
  --tinta-suave: #5c4f40;   /* texto secundario */
  --linea: #d6c9b0;         /* bordes y divisores */

  /* Identidad */
  --bronce: #8f5a1b;        /* acento principal: titulares, marcas, CTA */
  --bronce-vivo: #b8792e;   /* hover, detalles decorativos, nunca texto pequeño */
  --egeo: #1d5f79;          /* enlaces y acento secundario */
  --mar: #10222b;           /* mar en mapas (claro) */

  /* Lenguaje de certeza (texto e iconos; fondo del chip = color al 14 %) */
  --certeza-verde: #2a6339;
  --certeza-ambar: #7a5309;
  --certeza-azul: #2a5d8a;
  --certeza-rojo: #a03a30;

  /* «El cargamento» (propuesta 2026-08-09): carriles regionales, cada color
     un material del intercambio. Validados computacionalmente en OKLab
     (CVD adyacente ΔE ≥ 8; croma ≥ 0,10; ≥ 3:1 sobre --bg en ambos temas).
     SOLO para formas y acentos regionales: como texto pequeño en tema claro,
     anatolia/chipre/egipto quedan en 3,8–4,2:1 (medido 2026-08-10) y NO
     valen; el semáforo de certeza no se toca ni se replica. */
  --region-egeo: #2b5fc0;      /* vidrio de cobalto */
  --region-anatolia: #00815f;  /* malaquita */
  --region-chipre: #b85f14;    /* cobre */
  --region-levante: #963c9b;   /* púrpura de múrice */
  --region-egipto: #967300;    /* oro de Nubia */

  /* Materiales auxiliares (decorativos, siempre acompañados de etiqueta) */
  --mat-estanyo: #4e6577;
  --mat-ambar: #b67718;
  --mat-oro: #c9a23a;

  /* Atmósferas por acto del tour: velos decorativos al 6–8 % sobre --bg.
     Nunca portan información; el cuerpo de texto sigue sobre --bg puro. */
  --acto-1: var(--region-egeo);
  --acto-2: var(--mat-ambar);
  --acto-3: #a8402f;           /* incendio (decorativo, no es certeza-rojo) */
  --acto-4: var(--region-levante);
  --acto-5: var(--region-anatolia);

  /* Motion */
  --t-rapido: 150ms;
  --t-medio: 300ms;
  --t-lento: 600ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --col-texto: 42rem;       /* ancho máximo de columna de lectura */
  --radio: 12px;            /* tarjetas */
  --radio-chip: 999px;
  --sombra: 0 2px 12px rgb(43 33 24 / 0.10);

  /* --- §2 Tipografía --- */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  /* --- §3 Escala de espacio --- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;

  /* Alturas de las barras de navegación (usadas también como offsets) */
  --alto-cabecera: 56px;    /* móvil */
  --alto-nav-inferior: 56px;
}

/* --- §1 Color: tema oscuro «noche de incendio» ----------------------------
   El bloque va duplicado a propósito: la primera regla responde al botón de
   tema (data-tema="oscuro"); la segunda hace que el tema inicial siga a
   prefers-color-scheme sin necesidad de JavaScript y sin parpadeo, salvo que
   el usuario haya forzado el claro. Si se toca un valor, tocar los dos. */

[data-tema="oscuro"] {
  --bg: #15100b;            /* noche de incendio */
  --bg-alzado: #201810;
  --bg-hundido: #0e0a06;
  --tinta: #ede3d2;
  --tinta-suave: #b4a28c;
  --linea: #3a2e20;
  --bronce: #d9913d;        /* bronce encendido; sirve para texto grande */
  --bronce-vivo: #f0a94e;
  --egeo: #6fb0cc;
  --mar: #0a1218;
  --certeza-verde: #7bc98f;
  --certeza-ambar: #e0b24a;
  --certeza-azul: #7fb6e0;
  --certeza-rojo: #e07a6e;
  --region-egeo: #4f84dc;
  --region-anatolia: #2fa07e;
  --region-chipre: #c97e2e;
  --region-levante: #b06cc0;
  --region-egipto: #ad8f1f;
  --mat-estanyo: #8fa3b4;
  --mat-ambar: #d89a3e;
  --mat-oro: #d9b24a;
  --acto-3: #e07a6e;
  --sombra: 0 2px 16px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #15100b;
    --bg-alzado: #201810;
    --bg-hundido: #0e0a06;
    --tinta: #ede3d2;
    --tinta-suave: #b4a28c;
    --linea: #3a2e20;
    --bronce: #d9913d;
    --bronce-vivo: #f0a94e;
    --egeo: #6fb0cc;
    --mar: #0a1218;
    --certeza-verde: #7bc98f;
    --certeza-ambar: #e0b24a;
    --certeza-azul: #7fb6e0;
    --certeza-rojo: #e07a6e;
    --region-egeo: #4f84dc;
    --region-anatolia: #2fa07e;
    --region-chipre: #c97e2e;
    --region-levante: #b06cc0;
    --region-egipto: #ad8f1f;
    --mat-estanyo: #8fa3b4;
    --mat-ambar: #d89a3e;
    --mat-oro: #d9b24a;
    --acto-3: #e07a6e;
    --sombra: 0 2px 16px rgb(0 0 0 / 0.5);
  }
}

@media (min-width: 768px) {
  :root {
    --alto-cabecera: 72px;
    --alto-nav-inferior: 0px;
  }
}