/* Pablo Abreu - tokens de tema (UNICA fuente de valores de color/linea/radio/sombra/glass).
   Lo cargan por <link> la SPA (index.html) y todas las paginas estaticas, ANTES de cualquier
   hoja de componente.

   Capas (direccion de dependencia: componentes -> semantica -> paleta):
     1. Paleta  (--palette-*): valores crudos. SOLO se usan dentro de este fichero.
     2. Semantica (--bg, --text, --accent, --line, --glass-*...): lo que consumen glass.css y
        las hojas de componente. Ninguna hoja fuera de assets/theme/ referencia --palette-*.
     3. Compuestos glass (--glass-filter-subtle | --glass-filter | --glass-filter-strong |
        --scrim-filter): backdrop-filter completo por tier. Los componentes escriben
        `backdrop-filter: var(--glass-filter-…)` y nunca combinan blur()/saturate() a mano.
        glass.css los redefine en movil (tope) y en las ramas de degradacion.
   Lo vigila `npm run check:theme` (scripts/check-theme-architecture.mjs).

   Crear un tema: anadir un bloque [data-theme="nombre"] { ... } con solo los tokens que cambian
   (paleta o semantica) y activarlo con <html data-theme="nombre">. Los valores por defecto usan
   :where() (especificidad 0) para que cualquier tema los gane sin !important. El tema debe ir
   en <html>: los compuestos se resuelven en la raiz. Tema por defecto: verde + oscuro.
   Tope movil: un tema que suba --glass-blur* sigue limitado a <=10px a <=640px (glass.css usa
   min()); para saltarse el tope tendria que redefinir los compuestos DENTRO de
   @media (max-width: 640px) con mas especificidad que :root:root (no hacerlo).

   data-surface: <html data-surface="static"> (paginas estaticas) o "article" (articulos/CV/FAQ)
   cambia --line, --line-strong y --radius a sus variantes *-static / --radius-article.
   Sin data-surface (la SPA) se usan los valores base. */
:where(:root) {
  /* ======== 1. Paleta (crudos; no usar fuera de este fichero) ======== */
  --palette-ink-950: #0b0c0f;
  --palette-ink-925: #0d0e12;
  --palette-ink-975: #090a0c;
  --palette-ink-900: #111318;
  --palette-ink-850: #14161b;
  --palette-bone-100: #f2f0ea;
  --palette-slate-400: #9a9da5;
  --palette-lime-400: #b9ff66;
  --palette-lime-200: #d9ffae;
  --palette-periwinkle-400: #8aa6ff;
  --palette-black: #000000;
  --palette-white: #ffffff;
  --palette-pine-975: #070808;
  --palette-pine-950: #0c0e0a;
  --palette-ink-940: #10100f;
  --palette-moss-925: #12170f;
  --palette-graphite-900: #141418;
  --palette-graphite-800: #1f1f25;
  --palette-cream-100: #f5f0e7;
  --palette-paper-100: #f4f1ea;
  --palette-green-400: #2bdc73;
  --palette-green-200: #8fe0a3;
  --palette-green-700: #496f1d;
  --palette-lime-500: #9ee43a;
  --palette-neon-400: #9be000;
  --palette-forest-900: #0f1c12;
  --palette-rose-300: #ff8a8a;
  --palette-rose-200: #ffb4b4;
  --palette-rose-500: #ff5a5a;

  /* ======== 2. Semantica ======== */
  /* ---- Color ---- */
  --bg: var(--palette-ink-950);
  --bg-2: var(--palette-ink-900);
  --text: var(--palette-bone-100);
  --muted: var(--palette-slate-400);
  --accent: var(--palette-lime-400);
  --accent-2: var(--palette-periwinkle-400);
  --accent-3: var(--palette-lime-200);
  --card: rgba(18, 20, 25, 0.72);

  /* Acentos extra (verdes de estado/CTA, texto sobre claro) y colores de estado */
  --accent-strong: var(--palette-green-400); /* verde vivo: progreso, "ok", CTA secundario */
  --accent-mid: var(--palette-lime-500); /* lima apagado: bordes/halo de Elpidio */
  --accent-neon: var(--palette-neon-400); /* verde neon del robot de marca (Elpidio) */
  --accent-soft: var(--palette-green-200); /* verde claro: texto/borde sobre oscuro */
  --accent-deep: var(--palette-green-700); /* verde oscuro: texto sobre fondos claros */
  --on-accent: var(--palette-forest-900); /* tinta oscura sobre botones de acento */
  --danger: var(--palette-rose-300);
  --danger-soft: var(--palette-rose-200);
  --danger-strong: var(--palette-rose-500);

  /* Superficies (de la mas oscura a la mas clara) + sombra/velo + texto calido */
  --surface-deep: var(--palette-pine-975); /* velos/scrims casi negros */
  --surface-1: var(--palette-pine-950); /* paneles verdosos oscuros */
  --surface-2: var(--palette-ink-940); /* panel neutro base (cabecera, footer, chat) */
  --surface-3: var(--palette-graphite-900); /* panel neutro azulado */
  --surface-4: var(--palette-graphite-800); /* panel elevado (tarjetas, FAQ) */
  --surface-tint: var(--palette-moss-925); /* panel con tinte de acento */
  --shadow-color: var(--palette-black); /* sombras y velos oscuros */
  --light: var(--palette-white); /* brillos y velos claros sobre oscuro */
  --cream: var(--palette-cream-100); /* texto calido secundario */
  --paper: var(--palette-paper-100); /* superficie clara opaca (globos de Elpidio) */

  /* Fondo de body (gradiente superior -> inferior + resplandor) */
  --body-from: var(--palette-ink-925);
  --body-to: var(--palette-ink-975);
  --body-glow: rgba(138, 166, 255, 0.13);

  /* ---- Linea, radio, sombra (valores de la SPA) ---- */
  --line: rgba(242, 240, 234, 0.12);
  --line-strong: rgba(242, 240, 234, 0.24);
  --radius: 18px;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.44);

  /* ---- Valores de las paginas estaticas (se activan con <html data-surface>) ---- */
  --line-static: rgba(242, 240, 234, 0.16);
  --line-strong-static: rgba(242, 240, 234, 0.34);
  --radius-static: 8px;
  --radius-article: 10px;

  /* ---- Glass: superficie ---- */
  --glass-bg: rgba(18, 20, 25, 0.84);
  --glass-bg-solid: var(--palette-ink-850); /* alfa 1: rama sin soporte / prefers-reduced-transparency */
  /* Casi opaco (alfa .92) para paneles con texto largo sobre fondos cargados (cards de referencias).
     Deriva de --glass-bg-solid: un tema que cambie la superficie solida cambia tambien este. */
  --glass-bg-dense: color-mix(in srgb, var(--glass-bg-solid) 92%, transparent);
  --glass-border: rgba(242, 240, 234, 0.14);
  --glass-highlight: inset 0 1px 0 rgba(242, 240, 234, 0.08);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  /* Reflejo: banda diagonal de luz. --glass-sheen se desplaza con el scroll (parallax) y
     --glass-sheen-hover cruza el panel al pasar el raton. glass.css los pinta y anima. */
  --glass-sheen-color: color-mix(in srgb, var(--light) 9%, transparent);
  --glass-sheen-hover-color: color-mix(in srgb, var(--light) 16%, transparent);
  --glass-sheen: linear-gradient(110deg, transparent 40%, var(--glass-sheen-color) 47%, transparent 50%, var(--glass-sheen-color) 52%, transparent 60%);
  --glass-sheen-hover: linear-gradient(110deg, transparent 38%, var(--glass-sheen-hover-color) 48%, transparent 60%);

  /* ---- Glass: parametros por tier (escritorio) ----
     Valores elegidos para que cada elemento migrado quede dentro de la tolerancia aprobada
     (D2: +-4px blur, +-0.2 saturate respecto al baseline). */
  --scrim-blur: 3px;
  --glass-blur-subtle: 10px;
  --glass-blur: 16px;
  --glass-blur-strong: 24px;
  --glass-saturate-subtle: 1.1;
  --glass-saturate: 1.15;
  --glass-saturate-strong: 1.25;

  /* ======== 3. Compuestos (lo unico que consumen los componentes en backdrop-filter) ======== */
  --glass-filter-subtle: blur(var(--glass-blur-subtle)) saturate(var(--glass-saturate-subtle));
  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  --glass-filter-strong: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate-strong));
  --scrim-filter: blur(var(--scrim-blur));
}

/* Superficies estaticas (ver cabecera). */
:where(:root[data-surface]) {
  --line: var(--line-static);
  --line-strong: var(--line-strong-static);
  --radius: var(--radius-static);
}
:where(:root[data-surface="article"]) {
  --radius: var(--radius-article);
}