/*
 * assets/css/tokens.css — ÚNICA fuente de colores del sitio (spec §4.1).
 * Regla: SOLO aquí hay colores (#hex, rgb()/rgba(), white, black). Todo lo
 * demás (site.css, landing.css, sivlo.css, los <style>/style= de los HTML)
 * usa var(--…). Tres bloques: claro (:root), oscuro por sistema
 * (@media (prefers-color-scheme: dark) sobre :root:not([data-theme="light"]))
 * y oscuro por elección (:root[data-theme="dark"]).
 *
 * Contraste (WCAG AA — texto normal ≥ 4.5:1, texto grande ≥ 3:1):
 *   Claro  — --ink sobre --bg: 16:1 · --ink-soft sobre --bg: 7.6:1 · --muted sobre --surface: 5.19:1 · --muted sobre --bg: 4.82:1
 *   Oscuro — --ink-soft sobre --bg: 11:1 · --muted sobre --surface: 5.5:1
 *   --on-indigo sobre --indigo: 8.6:1 (claro) · --on-indigo #0E1116 sobre --indigo #818CF8: 7.3:1 (oscuro)
 * Review final (I1): el --muted claro anterior (#7A7E93) medía 4.01:1 sobre --surface y 3.72:1 sobre
 * --bg — por debajo de 4.5:1 pese a lo que decía este comentario. Se ajustó a #686C80 (5.19:1 / 4.82:1),
 * verificado con la fórmula WCAG (luminancia relativa + (L1+0.05)/(L2+0.05)) en Node.
 * Si al medir un par no llega a 4.5:1, se ajusta el token, nunca el uso.
 */
:root {
  color-scheme: light;
  --bg: #F6F6FA; --surface: #FFFFFF; --surface-2: #EFF0F7; --ink: #0E1116; --ink-soft: #4B4F63; --muted: #686C80;
  --line: #E1E2EE; --line-strong: #C9CBDC;
  --indigo: #4F46E5; --indigo-strong: #4338CA; --indigo-soft: #E4E2FB; --teal: #14B8A6; --teal-soft: #D6F5F0; --on-indigo: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.72);
  --shadow: 0 1px 2px rgba(14, 17, 22, 0.06), 0 12px 32px -12px rgba(79, 70, 229, 0.18);
  --shadow-lift: 0 2px 6px rgba(14, 17, 22, 0.08), 0 28px 60px -24px rgba(79, 70, 229, 0.35);
  --glow-a: rgba(79, 70, 229, 0.22); --glow-b: rgba(20, 184, 166, 0.18); --dots: rgba(14, 17, 22, 0.08);
  --dots-mask: rgba(0, 0, 0, 0.9);
  --wa: #25D366; --wa-bg: #E7FBEF;
  --ok: #0E9F6E; --ok-soft: #DDF5EA;
  /* Foco visible (I2): indigo en claro (6.29:1 sobre --surface); en oscuro un cian que resalta más que el indigo pastel sobre fondos oscuros. */
  --focus: #4F46E5;
  /* Identidad de Sivlo — SOLO dentro de su tarjeta en la portada y en /sivlo/ */
  --sivlo-blue: #2563EB; --sivlo-cyan: #06B6D4; --sivlo-cyan-deep: #0E7490; --sivlo-navy: #0F172A; --sivlo-tint: #E8F1FF;
  /* Marca de Sivlo for Clients (repo de Sivlo: src/portal/assets/sivlo-clients-mark.svg) — solo en /sivlo/ */
  --sfc: #6D4BC2; --sfc-mid: #9B7FE0; --sfc-soft: #C4A8F5; --sfc-ring: #B69CF0; --sfc-tint: #F1ECFC;
  /* Marcos de dispositivo (portátil/teléfono con captura real dentro): color de chasis fijo, no sigue el tema */
  --frame-base-a: #CBD5E1; --frame-base-b: #94A3B8; --frame-shadow: rgba(15, 23, 42, 0.7);
  /* Texto sobre --sivlo-navy (siempre oscuro, no sigue el tema — p.ej. .final en sivlo.css): SIEMPRE claro.
     --on-indigo no sirve aquí porque acompaña a --indigo/--accent, que sí cambian con el tema. */
  --on-navy: #FFFFFF;
  --danger: #DC2626;
  /* Acento de página: portada fija indigo; /sivlo/ lo redefine a --sivlo-blue en sivlo.css */
  --accent: var(--indigo); --accent-strong: var(--indigo-strong); --accent-soft: var(--indigo-soft);
  --display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1116; --surface: #161A23; --surface-2: #1C2130; --ink: #F4F4F6; --ink-soft: #C3C6D4; --muted: #8B90A5;
    --line: #262B39; --line-strong: #353B4D;
    --indigo: #818CF8; --indigo-strong: #A5B4FC; --indigo-soft: #26284A; --teal: #2DD4BF; --teal-soft: #113A38; --on-indigo: #0E1116;
    --glass: rgba(22, 26, 35, 0.72);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 28px 60px -24px rgba(129, 140, 248, 0.35);
    --glow-a: rgba(129, 140, 248, 0.22); --glow-b: rgba(45, 212, 191, 0.16); --dots: rgba(244, 244, 246, 0.07);
    --dots-mask: rgba(0, 0, 0, 0.9);
    --wa: #4ADE80; --wa-bg: #10341F;
    --ok: #34D399; --ok-soft: #10342A;
    --focus: #2DD4BF;
    --sivlo-blue: #60A5FA; --sivlo-cyan: #22D3EE; --sivlo-cyan-deep: #22D3EE; --sivlo-tint: #12213D;
    --sfc: #A78BFA; --sfc-mid: #C4B5FD; --sfc-soft: #DDD6FE; --sfc-ring: #C4B5FD; --sfc-tint: #2A2140;
    --danger: #F87171;
    --frame-base-a: #CBD5E1; --frame-base-b: #94A3B8; --frame-shadow: rgba(15, 23, 42, 0.7);
    --on-navy: #FFFFFF;
    --accent: var(--indigo); --accent-strong: var(--indigo-strong); --accent-soft: var(--indigo-soft);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1116; --surface: #161A23; --surface-2: #1C2130; --ink: #F4F4F6; --ink-soft: #C3C6D4; --muted: #8B90A5;
  --line: #262B39; --line-strong: #353B4D;
  --indigo: #818CF8; --indigo-strong: #A5B4FC; --indigo-soft: #26284A; --teal: #2DD4BF; --teal-soft: #113A38; --on-indigo: #0E1116;
  --glass: rgba(22, 26, 35, 0.72);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 28px 60px -24px rgba(129, 140, 248, 0.35);
  --glow-a: rgba(129, 140, 248, 0.22); --glow-b: rgba(45, 212, 191, 0.16); --dots: rgba(244, 244, 246, 0.07);
  --dots-mask: rgba(0, 0, 0, 0.9);
  --wa: #4ADE80; --wa-bg: #10341F;
  --ok: #34D399; --ok-soft: #10342A;
  --focus: #2DD4BF;
  --sivlo-blue: #60A5FA; --sivlo-cyan: #22D3EE; --sivlo-cyan-deep: #22D3EE; --sivlo-tint: #12213D;
  --sfc: #A78BFA; --sfc-mid: #C4B5FD; --sfc-soft: #DDD6FE; --sfc-ring: #C4B5FD; --sfc-tint: #2A2140;
  --danger: #F87171;
  --frame-base-a: #CBD5E1; --frame-base-b: #94A3B8; --frame-shadow: rgba(15, 23, 42, 0.7);
  --on-navy: #FFFFFF;
  --accent: var(--indigo); --accent-strong: var(--indigo-strong); --accent-soft: var(--indigo-soft);
}

/* ===== Fuentes autohospedadas (woff2, subconjunto latin) — spec §4.2 ===== */
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/poppins-600-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: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/poppins-700-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 Sans 3'; font-weight: 200 900; font-style: normal; font-display: swap; src: url(/assets/fonts/source-sans-3-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; }