/* ==========================================================================
   TOKENS DE MARCA — MorgansMedia (manual v0.3). Único archivo que cambia
   al aplicar otra marca. base/componentes/marcos/app.css leen de aquí.
   ========================================================================== */
:root {
  --font-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titulo: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --peso-titulo: 700;
  --tracking-titulo: -0.018em;

  /* Los grandes apretados, los chicos sueltos */
  --t-display: 2.75rem;  --lh-display: 0.94;
  --t-h1: 2.125rem;      --lh-h1: 1.0;
  --t-h2: 1.5rem;        --lh-h2: 1.1;
  --t-h3: 1.1875rem;     --lh-h3: 1.25;
  --t-cuerpo: 1rem;      --lh-cuerpo: 1.6;
  --t-chico: 0.875rem;   --lh-chico: 1.5;
  --t-micro: 0.75rem;    --lh-micro: 1.4;
  --t-cuerpo-alumno: 1.0625rem;

  /* Neutros */
  --tinta: #1a1a1a;
  --tinta-2: #444a52;
  --tinta-3: #666666;
  --hilo: #e0e0e0;
  --hilo-fuerte: #cdd2d8;
  --lienzo: #f5f7fa;
  --superficie: #ffffff;
  --superficie-2: #fafbfc;
  --negro: #000000;

  /* Celeste MM: botón celeste con texto negro; texto celeste sobre blanco en 0077A8 */
  --acento: #00aef0;
  --acento-hover: #0090c7;
  --acento-suave: #e3f6fd;
  --acento-tinta: #0077a8;
  --sobre-acento: #000000;

  --ok: #17804f;       --ok-suave: #e5f4ec;
  --alerta: #a86406;   --alerta-suave: #fdf1dc;
  --riesgo: #c0392b;   --riesgo-suave: #fbe9e7;
  --info: #0077a8;     --info-suave: #e3f6fd;
  --vivo: #d12f5a;

  /* Radios del manual: chip 14 · ficha 16 · caja 22 */
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .05);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .05);
  --sombra-3: 0 18px 48px rgba(0, 0, 0, .16);

  --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: #e8eaed; --tinta-2: #b9bfc7; --tinta-3: #8a929b;
    --hilo: #252b33; --hilo-fuerte: #343b45;
    --lienzo: #0a0c0f; --superficie: #14181d; --superficie-2: #181d23; --negro: #000;
    --acento: #00aef0; --acento-hover: #33c0f5; --acento-suave: #0b2633; --acento-tinta: #5ccbf5; --sobre-acento: #000;
    --ok: #4cc38a; --ok-suave: #15291f; --alerta: #e0a445; --alerta-suave: #2d2413;
    --riesgo: #f0766a; --riesgo-suave: #2f1a18; --info: #5ccbf5; --info-suave: #0b2633;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4); --sombra-2: 0 4px 16px rgba(0,0,0,.45); --sombra-3: 0 18px 48px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --tinta: #e8eaed; --tinta-2: #b9bfc7; --tinta-3: #8a929b;
  --hilo: #252b33; --hilo-fuerte: #343b45;
  --lienzo: #0a0c0f; --superficie: #14181d; --superficie-2: #181d23; --negro: #000;
  --acento: #00aef0; --acento-hover: #33c0f5; --acento-suave: #0b2633; --acento-tinta: #5ccbf5; --sobre-acento: #000;
  --ok: #4cc38a; --ok-suave: #15291f; --alerta: #e0a445; --alerta-suave: #2d2413;
  --riesgo: #f0766a; --riesgo-suave: #2f1a18; --info: #5ccbf5; --info-suave: #0b2633;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4); --sombra-2: 0 4px 16px rgba(0,0,0,.45); --sombra-3: 0 18px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}