/* ============================================================
   MAEStudio · TOKENS — Sistema de diseño (Fase B cerrada)
   Paleta "Obsidiana" (D-046) · Tipografías (D-047) · Arco de luz (D-045)
   Fuente de verdad: WEB.md §2 · SKILL-MAESTUDIO.md
   ============================================================ */

:root {
  /* ---------- 1 · PALETA CRUDA (no usar directo en componentes) ---------- */
  /* Noche */
  --obs-noche-0: #0A0E1A;   /* fondo */
  --obs-noche-1: #111A2E;   /* superficie */
  --obs-noche-2: #18233C;   /* elevada */
  --obs-neon:    #EEF3FF;   /* blanco-neón: wireframes, glow, cuadrado S18 */
  --obs-linea-n: #E8ECF4;   /* líneas noche */
  --obs-texto-n: #C9D2E3;   /* texto noche */
  --obs-tenue-n: #8A94A8;   /* tenue noche */
  /* Papel (S4–S7) */
  --obs-papel-0: #F2F0EB;   /* fondo */
  --obs-papel-1: #E1DDD4;   /* viñeta */
  --obs-papel-2: #FAF9F6;   /* panel */
  --obs-grafito-0: #2B2F38; /* líneas claro */
  --obs-grafito-1: #3A3F4A; /* texto claro */
  --obs-tenue-p: #6A7080;   /* tenue claro */
  /* Acentos */
  --obs-coral:      #E05A4E; /* coral marca vivo: gráficos, hover — NO rellenos con texto */
  --obs-coral-deep: #C22A28; /* coral profundo: CTA (relleno + texto blanco, 5.9:1) */
  --obs-lila:        #9D7BFF; /* lila conexión = "información conectada" */
  --obs-lila-bright: #B9A3FF;
  --obs-lila-deep:   #6F4FD8;
  --obs-azul: #4D7DF2;      /* azul eléctrico: tejido orgánico, burbujas */
  --obs-cian: #54CFE0;      /* cian dato: HUD, pares del lila */
  /* S8 — fuera de sistema (SOLO el crash) */
  --obs-err-magenta: #FF3DA6;
  --obs-err-cian:    #2EF2F2;

  /* ---------- 2 · TIPOGRAFÍA (D-047) ---------- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; /* titulares/kickers ≥28px */
  --font-body:    'Inter', 'Segoe UI', sans-serif;          /* texto 15–17px */
  --font-data:    'Space Mono', 'Consolas', monospace;      /* SOLO HUD/datos/error */

  /* Escala fluida */
  --fs-hero:   clamp(2.75rem, 1.5rem + 5.5vw, 6rem);      /* 44 → 96 */
  --fs-h2:     clamp(2.125rem, 1.4rem + 3vw, 3.5rem);     /* 34 → 56 */
  --fs-h3:     clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);   /* 24 → 34 */
  --fs-lead:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17 → 20 */
  --fs-body:   clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 */
  --fs-small:  0.8125rem;                                  /* 13 */
  --fs-kicker: 0.75rem;                                    /* 12 */
  --fs-data:   0.75rem;                                    /* HUD/ranuras */

  --lh-tight: 1.05;   /* titulares */
  --lh-body:  1.65;   /* Inter 1.6–1.7 */
  --track-kicker: 0.3em;   /* kickers .25–.35em, MAYÚSCULAS */
  --track-wide:   0.14em;  /* botones, nav */

  /* ---------- 3 · ESPACIADO / GEOMETRÍA ---------- */
  --sp-1: 0.5rem;  --sp-2: 0.875rem; --sp-3: 1.375rem;
  --sp-4: 2.25rem; --sp-5: 3.5rem;   --sp-6: 5.5rem;
  --gutter: 7vw;                  /* margen lateral del sitio */
  --max-w: 1180px;                /* ancho de contenido */
  --r-card: 22px; --r-btn: 99px; --r-slot: 12px;

  /* Capas z (fondo continuo < objeto < contenido < nav < overlay) */
  --z-fondo: 0; --z-objeto: 10; --z-contenido: 20; --z-nav: 90; --z-overlay: 99;

  /* ---------- 4 · MOTION ---------- */
  --dur-micro: 0.25s; --dur-reveal: 0.8s; --dur-idle: 7s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   5 · SEMÁNTICA POR ZONA — el ARCO DE LUZ (D-045)
   noche S1–S3 → papel S4–S7 → noche S8–S20.
   Cada sección declara data-zone; los componentes solo usan
   estos tokens semánticos, nunca la paleta cruda.
   ============================================================ */

[data-zone="noche"] {
  --bg:        var(--obs-noche-0);
  --surface:   var(--obs-noche-1);
  --elevated:  var(--obs-noche-2);
  --line:      var(--obs-linea-n);
  --text:      var(--obs-texto-n);
  --dim:       var(--obs-tenue-n);
  --title:     var(--obs-neon);
  --wire:      var(--obs-neon);
  /* Materiales (la opacidad es énfasis — se raciona, D-040) */
  --mat-veil:       rgba(157, 123, 255, 0.06);  /* velo translúcido (tarjetas) */
  --mat-veil-line:  rgba(185, 163, 255, 0.18);
  --mat-panel:      var(--obs-noche-1);          /* panel opaco (bandas) */
  --mat-panel-line: rgba(232, 236, 244, 0.10);
  --glow: rgba(238, 243, 255, 0.22);
  /* Vidrio (tarjetas glass) */
  --glass-fill:      rgba(238, 243, 255, 0.04);
  --glass-fill-2:    rgba(238, 243, 255, 0.012);
  --glass-line:      rgba(238, 243, 255, 0.10);
  --glass-highlight: rgba(255, 255, 255, 0.09);  /* brillo del canto superior */
  --glass-shadow:    rgba(4, 6, 12, 0.6);
}

[data-zone="papel"] {
  --bg:        var(--obs-papel-0);
  --surface:   var(--obs-papel-2);
  --elevated:  var(--obs-papel-1);
  --line:      var(--obs-grafito-0);
  --text:      var(--obs-grafito-1);
  --dim:       var(--obs-tenue-p);
  --title:     var(--obs-grafito-0);
  --wire:      var(--obs-grafito-0);   /* en zona clara lo luminoso se vuelve grafito */
  --mat-veil:       rgba(111, 79, 216, 0.05);
  --mat-veil-line:  rgba(111, 79, 216, 0.16);
  --mat-panel:      var(--obs-papel-2);
  --mat-panel-line: rgba(43, 47, 56, 0.12);
  --glow: rgba(224, 90, 78, 0.14);
  --glass-fill:      rgba(250, 249, 246, 0.65);
  --glass-fill-2:    rgba(250, 249, 246, 0.3);
  --glass-line:      rgba(43, 47, 56, 0.11);
  --glass-highlight: rgba(255, 255, 255, 0.75);
  --glass-shadow:    rgba(106, 112, 128, 0.35);
}

/* Acentos transversales (idénticos en ambas zonas) */
:root, [data-zone] {
  --cta:       var(--obs-coral-deep);
  --cta-hover: var(--obs-coral);
  --cta-text:  #FFFFFF;
  --accent:    var(--obs-coral);
  --link:      var(--obs-lila);
}