/* ==========================================================================
   wikitel.org · «Wiki en casa» · tokens del diseño
   Colores, tipografías y formas del UI kit, y su reparto sobre las variables de
   Bootstrap 5.3 (que sigue siendo la base) y sobre las --wk-* que ya usaban las
   herramientas. El tema oscuro es el de Bootstrap: [data-bs-theme="dark"].
   ========================================================================== */

/* Tipografías OFL, servidas desde aquí (sin Google Fonts). */
@font-face { font-family: "Zilla Slab"; src: url("../fonts/ZillaSlab-Medium-7DMhApl.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/ZillaSlab-SemiBold-I9pVsfV.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/ZillaSlab-Bold-SF_70cQ.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Regular-_oHGTAM.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Italic-H8cG50A.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Bold-qCStRYQ.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Variable-zjE6Abs.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root,
[data-bs-theme="light"] {
    /* marca */
    --azul: #0175B2;        /* azul del logo: manda */
    --azul-texto: #015E8F;  /* azul para texto pequeño sobre papel (contraste AA) */
    --cielo: #CFE6F2;       /* tinte del azul, solo fondos */
    /* apoyo */
    --papel: #F4F1EA;       /* fondo general */
    --papel-claro: #FBF9F4; /* superficies */
    --tinta: #14212B;       /* texto y contorno de los dibujos */
    --gris: #99999B;        /* solo líneas finas (pistas del logo) */
    --teja: #F07E4F;        /* único acento cálido */
    --teja-suave: #FBE3D8;  /* tinte del acento, solo fondos */
    --tinta-suave: #4A5761; /* texto secundario */
    /* tipografía */
    --f-titulo: "Zilla Slab", Georgia, serif;
    --f-texto: "Atkinson Hyperlegible", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, monospace;
    /* forma */
    --r-s: 10px;
    --r-m: 18px;
    --r-l: 28px;
    --r-xl: 40px;
    --linea: var(--tinta);     /* contornos de tarjetas, chips y campos */
    --sombra-c: var(--tinta);  /* sombra desplazada «de pegatina» */
    --campo: #fff;             /* fondo de campos y desplegables */
    --pie-fondo: #14212B;
    --pieza-azul: var(--azul);
    --halo-wiki: transparent;  /* disco detrás de Wiki (solo se ve en oscuro) */
    --disco-wiki: var(--cielo);
    --disco-medio: 1;
    --disco-casi: .9;
    /* Wiki: colores incrustados en sus SVG */
    --wk-azul: #0175B2;
    --wk-contorno: #14212B;
    --wk-teja: #F07E4F;
    --wk-corte: #14212B;
    --borde: 2px solid var(--linea);
    --sombra: 0 3px 0 var(--sombra-c);
    --ancho: 1160px;
    color-scheme: light;

    /* Variables que ya usaban las herramientas, con los colores nuevos. */
    --wk-primary: var(--azul-texto);
    --wk-primary-rgb: 1, 94, 143;
    --wk-primary-dark: #014870;
    --wk-accent: var(--teja);
    --wk-navy: #14212B;
    --wk-navy-2: #1E2F3C;
    --wk-surface: var(--papel-claro);
    --wk-surface-2: var(--papel);
    --wk-border: rgba(20, 33, 43, 0.2);
    --wk-shadow-sm: 0 2px 0 rgba(20, 33, 43, 0.12);
    --wk-shadow: 0 5px 0 var(--sombra-c);
    --wk-radius: var(--r-m);
    --wk-radius-sm: var(--r-s);

    /* Bootstrap */
    --bs-primary: var(--azul);
    --bs-primary-rgb: 1, 117, 178;
    --bs-body-bg: var(--papel);
    --bs-body-bg-rgb: 244, 241, 234;
    --bs-body-color: var(--tinta);
    --bs-body-color-rgb: 20, 33, 43;
    --bs-emphasis-color: var(--tinta);
    --bs-emphasis-color-rgb: 20, 33, 43;
    --bs-secondary-color: var(--tinta-suave);
    --bs-secondary-color-rgb: 74, 87, 97;
    --bs-secondary-bg: #E8E3D8;
    --bs-tertiary-bg: var(--papel);
    --bs-tertiary-bg-rgb: 244, 241, 234;
    --bs-border-color: rgba(20, 33, 43, 0.25);
    --bs-link-color: var(--azul-texto);
    --bs-link-color-rgb: 1, 94, 143;
    --bs-link-hover-color: #014870;
    --bs-link-hover-color-rgb: 1, 72, 112;
    --bs-body-font-family: var(--f-texto);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.55;
    --bs-font-monospace: var(--f-mono);
    --bs-border-radius: 14px;
    --bs-border-radius-sm: var(--r-s);
    --bs-border-radius-lg: var(--r-m);
    --bs-border-radius-xl: var(--r-l);
    --bs-focus-ring-color: rgba(240, 126, 79, 0.55);
    --bs-highlight-bg: var(--teja-suave);
    /* El rosa de Bootstrap (#d63384) se queda en 4,2:1 sobre el papel, y #c4296f en 4,4:1 sobre los avisos; así, 5:1. */
    --bs-code-color: #b3205f;
}

/* La misma web amable, de noche. Derivado de la tinta #14212B. */
[data-bs-theme="dark"] {
    --papel: #14212B;        /* fondo: la tinta de marca */
    --papel-claro: #1E2F3C;  /* tarjetas, un escalón por encima */
    --campo: #0F1A22;        /* campos de texto, un escalón por debajo */
    --tinta: #F4F1EA;        /* texto: el papel */
    --tinta-suave: #B9C4CC;
    --linea: #9FB0BD;        /* contornos suaves, no blanco puro */
    --sombra-c: #080E13;     /* sombra de pegatina más profunda */
    --azul-texto: #7CC4EE;   /* enlaces legibles sobre noche */
    --cielo: #1D3B51;
    --teja-suave: #432C25;   /* tinte cálido apagado */
    --gris: #6F7E89;
    --pie-fondo: #0D161D;
    --pieza-azul: #03649A;
    --halo-wiki: #22496A;
    --disco-wiki: #22496A;
    --disco-medio: .62;
    --disco-casi: .22;
    /* Wiki de noche: más luminoso y saturado, contorno algo más profundo que el fondo */
    --wk-azul: #2A9AD6;
    --wk-contorno: #0A1217;
    --wk-teja: #FF8A5B;
    --wk-corte: #9FB0BD;
    color-scheme: dark;

    --wk-primary: var(--azul-texto);
    --wk-primary-rgb: 124, 196, 238;
    --wk-primary-dark: #A6D8F5;
    --wk-border: rgba(159, 176, 189, 0.3);
    --wk-shadow-sm: 0 2px 0 rgba(8, 14, 19, 0.5);

    --bs-body-bg-rgb: 20, 33, 43;
    --bs-body-color-rgb: 244, 241, 234;
    --bs-emphasis-color-rgb: 244, 241, 234;
    --bs-secondary-color-rgb: 185, 196, 204;
    --bs-secondary-bg: #2A3E4D;
    --bs-tertiary-bg-rgb: 20, 33, 43;
    --bs-border-color: rgba(159, 176, 189, 0.35);
    --bs-link-color-rgb: 124, 196, 238;
    --bs-link-hover-color: #A6D8F5;
    --bs-link-hover-color-rgb: 166, 216, 245;
    /* El rosa del tema claro también se aplicaba aquí y se quedaba en 3,2:1: el de Bootstrap en oscuro. */
    --bs-code-color: #e685b5;
}