/* ==========================================================================
   TOKENS DE MARCA — Escuela Topao (manual Topao Creative 2026). Único archivo
   que cambia al aplicar otra marca. base/componentes/marcos/app.css leen de aquí.
   Superficies neutras; el color de marca va en rutas, logros y acciones.
   ========================================================================== */
:root {
  --font-texto: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titulo: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --peso-titulo: 700;
  --tracking-titulo: -0.03em;

  --t-display: 2.5rem;   --lh-display: 1.02;
  --t-h1: 1.75rem;       --lh-h1: 1.15;
  --t-h2: 1.375rem;      --lh-h2: 1.2;
  --t-h3: 1.0625rem;     --lh-h3: 1.3;
  --t-cuerpo: 0.9375rem; --lh-cuerpo: 1.55;
  --t-chico: 0.84375rem; --lh-chico: 1.5;
  --t-micro: 0.75rem;    --lh-micro: 1.4;
  --t-cuerpo-alumno: 1rem;

  /* Neutros */
  --tinta: #0B0B0C;
  --tinta-2: #3A3A42;
  --tinta-3: #6E6D78;
  --hilo: #E4E4E8;
  --hilo-fuerte: #D6D6DC;
  --lienzo: #F6F6F7;
  --superficie: #FFFFFF;
  --superficie-2: #FAFAFB;
  --superficie-3: #F1F1F3;
  --negro: #0B0B0C;

  /* Acento: azul eléctrico en claro, lima en oscuro */
  --acento: #1626FF;
  --acento-hover: #0E1BD6;
  --acento-suave: #E8EAFF;
  --acento-tinta: #1626FF;
  --sobre-acento: #FFFFFF;

  /* Pares de ruta (fijos en ambos temas) */
  --r-negocio: #6B2CFF; --r-negocio-2: #FFE03D;
  --r-marca: #FF2D1F;   --r-marca-2: #FFB0DC;
  --r-digital: #1626FF; --r-digital-2: #E2FF1C;
  --r-ventas: #FF2E8A;  --r-ventas-2: #0B0B0C;
  --r-ia: #E2FF1C;

  --ok: #12805C;       --ok-suave: #E3F4EC;
  --alerta: #A86406;   --alerta-suave: #FDF1DC;
  --riesgo: #D2261A;   --riesgo-suave: #FCE8E6;
  --info: #1626FF;     --info-suave: #E8EAFF;
  --vivo: #E5281B;

  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(16, 16, 24, .05);
  --sombra-2: 0 1px 2px rgba(16, 16, 24, .05), 0 4px 16px rgba(16, 16, 24, .05);
  --sombra-3: 0 24px 64px rgba(16, 16, 24, .22);

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px;
  --dur: 160ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #F4F4F6; --tinta-2: #C9C8D0; --tinta-3: #8C8B96;
    --hilo: #26262A; --hilo-fuerte: #34343A;
    --lienzo: #0A0A0B; --superficie: #131315; --superficie-2: #17171A; --superficie-3: #1F1F23; --negro: #000;
    --acento: #E2FF1C; --acento-hover: #EEFF66; --acento-suave: #2A2F0A; --acento-tinta: #E2FF1C; --sobre-acento: #0B0B0C;
    --ok: #4ADE9B; --ok-suave: #0F2A1E; --alerta: #E0A445; --alerta-suave: #2D2413;
    --riesgo: #FF6B60; --riesgo-suave: #2F1715; --info: #E2FF1C; --info-suave: #2A2F0A; --vivo: #FF4B3E;
    --sombra-1: 0 1px 0 rgba(255,255,255,.03) inset; --sombra-2: 0 1px 0 rgba(255,255,255,.03) inset; --sombra-3: 0 24px 64px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --tinta: #F4F4F6; --tinta-2: #C9C8D0; --tinta-3: #8C8B96;
  --hilo: #26262A; --hilo-fuerte: #34343A;
  --lienzo: #0A0A0B; --superficie: #131315; --superficie-2: #17171A; --superficie-3: #1F1F23; --negro: #000;
  --acento: #E2FF1C; --acento-hover: #EEFF66; --acento-suave: #2A2F0A; --acento-tinta: #E2FF1C; --sobre-acento: #0B0B0C;
  --ok: #4ADE9B; --ok-suave: #0F2A1E; --alerta: #E0A445; --alerta-suave: #2D2413;
  --riesgo: #FF6B60; --riesgo-suave: #2F1715; --info: #E2FF1C; --info-suave: #2A2F0A; --vivo: #FF4B3E;
  --sombra-1: 0 1px 0 rgba(255,255,255,.03) inset; --sombra-2: 0 1px 0 rgba(255,255,255,.03) inset; --sombra-3: 0 24px 64px rgba(0,0,0,.6);
  color-scheme: dark;
}