/* themes/mundo-electronico/tokens.css
 * Tokens de identidad del tema Mundo Electrónico (azul técnico sobre blanco, secciones navy).
 * SCOPEADOS al container con la clase del tema activo. Regla CLAUDE.md §6: NUNCA en :root.
 *
 * Identidad: servicio técnico de electrónica en Tucumán. Azul de marca (#3B8FE0) sobre fondos
 * claros, secciones de contraste en navy profundo (#08213F). Titulares Archivo (900), cuerpo
 * Manrope. El verde de WhatsApp (--wa) es un color de CANAL, no el acento del sitio.
 *
 * Hablan el MISMO vocabulario que el resto de temas (--accent, --bg-*, --label-*, --fill-*,
 * --separator, --shadow-*) con valores propios, para que las secciones del motor rindan con esta
 * identidad sin tocar su geometría (§5). Color en oklch() para neutros armónicos + derivados con
 * color-mix.
 */

.lcl-container.theme-mundo-electronico {
  /* Tipografía: display con peso (Archivo) + cuerpo legible (Manrope). */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, sans-serif;
  --font-serif:   ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Escala tipográfica — titulares grandes y firmes, cuerpo 16px. */
  --fs-display:  clamp(36px, 5.4vw, 62px);
  --fs-title-1:  21px;
  --fs-title-2:  19px;
  --fs-title-3:  16px;
  --fs-headline: 15px;
  --fs-body:     16px;
  --fs-callout:  14px;
  --fs-footnote: 13px;

  --fw-regular:  400;
  --fw-medium:   600;
  --fw-semibold: 700;
  --fw-bold:     800;

  --lh-tight:   1.04;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* Acento azul de marca. Override-able por el cliente (--accent inline desde appearance.accent);
     los derivados salen de él vía color-mix, así un solo override cascadea. */
  --accent:          oklch(0.66 0.14 248);   /* #3B8FE0 */
  --accent-hover:    color-mix(in oklab, var(--accent) 86%, #000);
  --accent-pressed:  color-mix(in oklab, var(--accent) 76%, #000);
  --accent-bg-soft:  color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-contrast: oklch(0.99 0.005 250);
  --accent-2:        oklch(0.47 0.12 253);   /* #1B5AA0 tono oscuro del acento (eyebrows, links) */

  /* Verde WhatsApp: color de canal para los CTA externos. No es el acento del sitio. */
  --wa:       oklch(0.72 0.18 150);          /* #22C35E */
  --wa-hover: color-mix(in oklab, var(--wa) 88%, #000);

  /* Hero · aurora: tonos derivados del acento (la geometría vive en hero.css). */
  --hero-aurora-1: var(--accent);
  --hero-aurora-2: color-mix(in oklab, var(--accent) 60%, oklch(0.7 0.12 230));
  --hero-aurora-3: color-mix(in oklab, var(--accent) 50%, oklch(0.5 0.13 260));

  /* Labels (texto) — neutros fríos azulados, no negros puros. */
  --label-primary:    oklch(0.245 0.03 250);  /* #10202F */
  --label-secondary:  oklch(0.52 0.025 245);  /* #5B6C7D */
  --label-tertiary:   oklch(0.66 0.03 248);
  --label-quaternary: oklch(0.74 0.03 245);   /* #9FB2C6 (texto sobre navy) */

  /* Fills (superficies sutiles). */
  --fill-1: oklch(0.974 0.006 250);
  --fill-2: oklch(0.95 0.008 250);
  --fill-3: oklch(0.92 0.01 250);

  /* Backgrounds en capas (blanco → gris muy claro → un punto más). */
  --bg-primary:   oklch(1 0 0);               /* #ffffff */
  --bg-secondary: oklch(0.974 0.006 250);     /* #F2F6FB */
  --bg-tertiary:  oklch(0.95 0.008 250);

  /* Superficie de tarjeta: blanco puro (cards sobre el gris claro). */
  --surface: oklch(1 0 0);

  /* Separadores: líneas finas de 1px. */
  --separator: oklch(0.93 0.012 250);         /* #E4EAF1 */
  --line-2:    oklch(0.88 0.014 250);

  /* Radios — moderados (cards 12-18px, botones 12px, pills 999px). */
  --r-xs:   8px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 999px;

  /* Sombras frías y suaves. La de acento es para botones primarios. */
  --shadow-1: 0 1px 2px rgba(8, 33, 63, 0.05), 0 1px 3px rgba(8, 33, 63, 0.07);
  --shadow-2: 0 8px 22px -12px rgba(8, 33, 63, 0.28);
  --shadow-3: 0 24px 60px -40px rgba(8, 33, 63, 0.5);
  --shadow-accent: 0 8px 22px -10px var(--accent);

  /* Color base del modo oscuro: el navy de marca. Los fondos oscuros derivan de acá. */
  --dark-bg: oklch(0.235 0.055 252);          /* #08213F */
}

/* Dark mode: cambia solo tokens, no selectores. Mundo Electrónico es light-first; las secciones
   de contraste (hero, nosotros, footer) usan el navy directamente en su CSS de módulo/variante. */
.lcl-container.theme-mundo-electronico.dark,
.lcl-container.theme-mundo-electronico[data-color-scheme="dark"],
.lcl-container.theme-mundo-electronico [data-color-scheme="dark"] {
  --label-primary:    oklch(0.97 0.006 250);
  --label-secondary:  oklch(0.84 0.012 248);
  --label-tertiary:   oklch(0.7 0.02 248);
  --label-quaternary: oklch(0.56 0.02 248);

  --fill-1: color-mix(in oklab, var(--dark-bg) 88%, #fff);
  --fill-2: color-mix(in oklab, var(--dark-bg) 80%, #fff);
  --fill-3: color-mix(in oklab, var(--dark-bg) 72%, #fff);

  --bg-primary:   var(--dark-bg);
  --bg-secondary: color-mix(in oklab, var(--dark-bg) 92%, #fff);
  --bg-tertiary:  color-mix(in oklab, var(--dark-bg) 86%, #fff);
  --surface:      color-mix(in oklab, var(--dark-bg) 90%, #fff);

  --separator: color-mix(in oklab, var(--dark-bg) 78%, #fff);
  --line-2:    color-mix(in oklab, var(--dark-bg) 70%, #fff);
}

/* Apariencia por sección: fuerza CLARO dentro de un sitio oscuro. */
.lcl-container.theme-mundo-electronico [data-color-scheme="light"] {
  --label-primary:    oklch(0.245 0.03 250);
  --label-secondary:  oklch(0.52 0.025 245);
  --label-tertiary:   oklch(0.66 0.03 248);
  --label-quaternary: oklch(0.74 0.03 245);

  --fill-1: oklch(0.974 0.006 250);
  --fill-2: oklch(0.95 0.008 250);
  --fill-3: oklch(0.92 0.01 250);

  --bg-primary:   oklch(1 0 0);
  --bg-secondary: oklch(0.974 0.006 250);
  --bg-tertiary:  oklch(0.95 0.008 250);
  --surface:      oklch(1 0 0);

  --separator: oklch(0.93 0.012 250);
  --line-2:    oklch(0.88 0.014 250);
}

/* Auto-dark si el usuario lo prefiere y el sitio no fuerza light. */
@media (prefers-color-scheme: dark) {
  .lcl-container.theme-mundo-electronico:not([data-color-scheme="light"]) {
    --label-primary:    oklch(0.97 0.006 250);
    --label-secondary:  oklch(0.84 0.012 248);
    --label-tertiary:   oklch(0.7 0.02 248);
    --label-quaternary: oklch(0.56 0.02 248);

    --fill-1: color-mix(in oklab, var(--dark-bg) 88%, #fff);
    --fill-2: color-mix(in oklab, var(--dark-bg) 80%, #fff);
    --fill-3: color-mix(in oklab, var(--dark-bg) 72%, #fff);

    --bg-primary:   var(--dark-bg);
    --bg-secondary: color-mix(in oklab, var(--dark-bg) 92%, #fff);
    --bg-tertiary:  color-mix(in oklab, var(--dark-bg) 86%, #fff);
    --surface:      color-mix(in oklab, var(--dark-bg) 90%, #fff);

    --separator: color-mix(in oklab, var(--dark-bg) 78%, #fff);
    --line-2:    color-mix(in oklab, var(--dark-bg) 70%, #fff);
  }
}