/* ==========================================================================
   Living Water · tokens del sistema visual (LOOP.md 5.1 a 5.3, D5 y D6)
   Paletas clara y oscura, la tipografía, radios, medidas y
   curvas. Los componentes viven en site.css; aquí solo hay variables y la
   clase .inv.

   Formato de la paleta (lo lee docs/revamp/contrast.py): los valores crudos
   van como --l-<token> (claro) y --d-<token> (oscuro) en hexadecimal, y manda
   la PRIMERA declaración del archivo. Las variables públicas (--bg, --fg…)
   y las --inv-* apuntan a esas crudas con var().
   ========================================================================== */

/* ---- Paleta cruda: claro (--l-*) y oscuro (--d-*) ------------------------ */
:root {
  --l-bg: #F2F3F5;        /* fondo de página: el gris del sitio actual */
  --l-panel: #FFFFFF;     /* paneles, campos, cápsula clara */
  --l-panel-2: #E4E9ED;   /* marcadores, hover de píldoras */
  --l-fg: #0E1B22;        /* tinta */
  --l-muted: #4B5A66;     /* texto secundario */
  --l-faint: #7C8791;     /* placeholders, marcas de agua */
  --l-dim: #3E8FA3;       /* mitad atenuada de los titulares (24 px o más) */
  --l-line: #D7DDE0;      /* reglas finas */
  --l-accent: #007E99;    /* botón principal, cuadrito de los rótulos, scrollbar */
  --l-accent-fg: #FFFFFF; /* texto sobre el acento */
  --l-accent-2: #00697F;  /* el acento como texto */
  --l-sand: #F8F3D4;      /* titular sobre video o foto (D6) */
  --l-ok: #0E9A61;        /* punto de estado */
  --l-wa-ink: #128C7E;    /* glifo de WhatsApp sobre fondo claro (verde oscuro oficial) */

  --d-bg: #07171D;
  --d-panel: #0C222A;
  --d-panel-2: #123039;
  --d-fg: #EEF4F6;
  --d-muted: #9DB3BB;
  --d-faint: #6A8089;
  --d-dim: #5FC9D4;
  --d-line: #1B3A44;
  --d-accent: #1DC5CE;
  --d-accent-fg: #05161B;
  --d-accent-2: #4FD9E0;
  --d-sand: #F8F3D4;
  --d-ok: #2BD38B;
  --d-wa-ink: #25D366;    /* glifo de WhatsApp sobre fondo oscuro (verde de marca) */
}

/* ---- Modo claro (base): la página usa --l-*, lo inverso usa --d-* -------- */
:root {
  --bg: var(--l-bg); --panel: var(--l-panel); --panel-2: var(--l-panel-2);
  --fg: var(--l-fg); --muted: var(--l-muted); --faint: var(--l-faint);
  --dim: var(--l-dim); --line: var(--l-line); --accent: var(--l-accent);
  --accent-fg: var(--l-accent-fg); --accent-2: var(--l-accent-2); --ok: var(--l-ok);
  --wa-ink: var(--l-wa-ink);
  --scheme: light;

  --inv-bg: var(--d-bg); --inv-panel: var(--d-panel); --inv-panel-2: var(--d-panel-2);
  --inv-fg: var(--d-fg); --inv-muted: var(--d-muted); --inv-faint: var(--d-faint);
  --inv-dim: var(--d-dim); --inv-line: var(--d-line); --inv-accent: var(--d-accent);
  --inv-accent-fg: var(--d-accent-fg); --inv-accent-2: var(--d-accent-2); --inv-ok: var(--d-ok);
  --inv-wa-ink: var(--d-wa-ink);
  --inv-scheme: dark;

  --sand: var(--l-sand);
}

/* ---- Modo oscuro: por el sistema (salvo que se fuerce claro) o forzado ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg); --panel: var(--d-panel); --panel-2: var(--d-panel-2);
    --fg: var(--d-fg); --muted: var(--d-muted); --faint: var(--d-faint);
    --dim: var(--d-dim); --line: var(--d-line); --accent: var(--d-accent);
    --accent-fg: var(--d-accent-fg); --accent-2: var(--d-accent-2); --ok: var(--d-ok);
    --wa-ink: var(--d-wa-ink);
    --scheme: dark;

    --inv-bg: var(--l-bg); --inv-panel: var(--l-panel); --inv-panel-2: var(--l-panel-2);
    --inv-fg: var(--l-fg); --inv-muted: var(--l-muted); --inv-faint: var(--l-faint);
    --inv-dim: var(--l-dim); --inv-line: var(--l-line); --inv-accent: var(--l-accent);
    --inv-accent-fg: var(--l-accent-fg); --inv-accent-2: var(--l-accent-2); --inv-ok: var(--l-ok);
    --inv-wa-ink: var(--l-wa-ink);
    --inv-scheme: light;

    --sand: var(--d-sand);
  }
}
:root[data-theme="dark"] {
  --bg: var(--d-bg); --panel: var(--d-panel); --panel-2: var(--d-panel-2);
  --fg: var(--d-fg); --muted: var(--d-muted); --faint: var(--d-faint);
  --dim: var(--d-dim); --line: var(--d-line); --accent: var(--d-accent);
  --accent-fg: var(--d-accent-fg); --accent-2: var(--d-accent-2); --ok: var(--d-ok);
  --wa-ink: var(--d-wa-ink);
  --scheme: dark;

  --inv-bg: var(--l-bg); --inv-panel: var(--l-panel); --inv-panel-2: var(--l-panel-2);
  --inv-fg: var(--l-fg); --inv-muted: var(--l-muted); --inv-faint: var(--l-faint);
  --inv-dim: var(--l-dim); --inv-line: var(--l-line); --inv-accent: var(--l-accent);
  --inv-accent-fg: var(--l-accent-fg); --inv-accent-2: var(--l-accent-2); --inv-ok: var(--l-ok);
  --inv-wa-ink: var(--l-wa-ink);
  --inv-scheme: light;

  --sand: var(--d-sand);
}

/* ---- Colores inversos: cápsulas, menú y cortina ---------------------------
   Toma el juego opuesto al modo activo. Solo cruza un nivel: no anides .inv. */
.inv {
  --bg: var(--inv-bg); --panel: var(--inv-panel); --panel-2: var(--inv-panel-2);
  --fg: var(--inv-fg); --muted: var(--inv-muted); --faint: var(--inv-faint);
  --dim: var(--inv-dim); --line: var(--inv-line); --accent: var(--inv-accent);
  --accent-fg: var(--inv-accent-fg); --accent-2: var(--inv-accent-2); --ok: var(--inv-ok);
  --wa-ink: var(--inv-wa-ink);
  color-scheme: var(--inv-scheme);
  background: var(--bg);
  color: var(--fg);
}

/* ---- Siempre oscuro: lo que va sobre foto o video --------------------------
   Portadas con foto, visor de la galería y cualquier bloque con .on-dark usan
   el juego oscuro en los dos modos, porque su fondo es una foto con capa. */
.on-dark,
.cover,
.viewer {
  --bg: var(--d-bg); --panel: var(--d-panel); --panel-2: var(--d-panel-2);
  --fg: var(--d-fg); --muted: var(--d-muted); --faint: var(--d-faint);
  --dim: var(--d-dim); --line: var(--d-line); --accent: var(--d-accent);
  --accent-fg: var(--d-accent-fg); --accent-2: var(--d-accent-2); --ok: var(--d-ok);
  --wa-ink: var(--d-wa-ink);
  color-scheme: dark;
  color: var(--fg);
}

/* ---- Colores literales permitidos: solo sobre foto (5.4 y 5.7) ------------- */
:root {
  --veil: rgba(2, 43, 53, .75);    /* capa sobre las fotos de las portadas */
  --glass: rgba(10, 13, 20, .55);  /* vidrio oscuro de leyendas y del botón play */
  --glass-fg: #F3F5F9;             /* texto sobre ese vidrio */

  /* WhatsApp: color de MARCA AJENA, así que es el mismo en claro y en oscuro
     (2026-09-18). Lo usa el botón flotante, que es el logo de WhatsApp: por eso
     el blanco sobre el verde no entra en los pares de contrast.py (WCAG 1.4.3
     deja fuera los logotipos). El glifo suelto de los demás enlaces usa
     --wa-ink, que sí cambia con el tema y con .inv. */
  --wa: #25D366;
  --wa-hover: #1EBE5A;
  --wa-fg: #FFFFFF;
}

/* ---- Tipografía (D5, resuelta el 2026-09-18) --------------------------------
   Un solo juego: Sora en los titulares, Instrument Sans en el texto y Geist
   Mono en los rótulos y los datos. Antes había tres juegos que se cambiaban en
   vivo con <html data-type="…"> para comparar; Daniel eligió este y los otros
   dos salieron del sistema, junto con los factores que solo existían para que
   los tres cuadraran (--scale-display, --lh-display, --word-display y
   --measure-display, que ahora van literales en site.css).
     --f-display  familia de h1 y h2 (y .h1/.h2)
     --f-head     familia de h3 y del texto grande que no es titular
                  (cifras, citas, menú, cortina, "Sigue", marca)
     --f-body     familia del texto
     --f-mono     rótulos y datos
     --w-*        pesos: display (h1/h2), head (h3) y body-strong (<strong>)
     --track-*    tracking de h1 (h2 lleva el 80 %) y de h3 */
:root {
  --f-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-head: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --w-display: 300;
  --w-head: 400;
  --w-body-strong: 600;
  --track-display: -0.05em;
  --track-head: -0.025em;
}

/* ---- Radios, medidas y curvas --------------------------------------------- */
:root {
  --r-lg: 28px;   /* cápsulas, hero */
  --r-md: 18px;   /* medios */
  --r-sm: 12px;   /* campos */
  --r-pill: 999px;

  --max: 1400px;                       /* contenedor */
  --gutter: clamp(16px, 3.2vw, 44px);  /* margen lateral */
  --sec: clamp(56px, 7.5vw, 112px);    /* aire vertical de sección */
  --gap: clamp(28px, 4.4vw, 64px);     /* aire interno */

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-curtain: cubic-bezier(.75, 0, .2, 1);
  --t-hover: .22s;                     /* hover: 200 a 250 ms */
}