/* ══════════════════════════════════════════════════════════════════════════
   DaVinci Agency IA · SISTEMA DE DISEÑO «Neural Cosmos»
   Capa 1 de 3 — TOKENS. Fuente única de verdad del lenguaje visual.

   Arquitectura de 3 capas (primitivo → semántico → componente).
   Ningún archivo posterior debe escribir un color en crudo: si un componente
   necesita un color nuevo, se define aquí como token semántico primero.

   Coherencia de marca: hereda los hues del producto DavinciOS
   (primary índigo hue 266 · accent teal/cian hue 196) para que la web pública
   y el software se lean como la misma marca.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── CAPA 1 · PRIMITIVOS ────────────────────────────────────────────────
     Escala cruda. No se usan directamente en componentes.                  */

  /* Obsidiana espacial — la base del cosmos */
  --c-obsidian-950: #04060D;
  --c-obsidian-900: #070A14;
  --c-obsidian-850: #0A0E1C;
  --c-obsidian-800: #0F1424;
  --c-obsidian-700: #161C30;
  --c-obsidian-600: #1F2740;

  /* Índigo — el pensamiento (primary, hue 266) */
  --c-indigo-300: #A5B4FC;
  --c-indigo-400: #818CF8;
  --c-indigo-500: #6366F1;
  --c-indigo-600: #4F46E5;
  --c-indigo-700: #4338CA;

  /* Cian — la sinapsis (accent, hue 196) */
  --c-cyan-300: #67E8F9;
  --c-cyan-400: #22D3EE;
  --c-cyan-500: #06B6D4;
  --c-cyan-600: #0891B2;
  /* [14-sep-2026] Cian profundo: el único de la familia que aguanta texto blanco
     encima (5.36:1). Lo usan --grad-cta y el gradiente de marca en claro. */
  --c-cyan-700: #0E7490;

  /* Esmeralda — lo que funciona */
  --c-emerald-400: #34D399;
  --c-emerald-500: #10B981;

  /* Ámbar — lo que espera tu visto bueno */
  --c-amber-400: #FBBF24;

  /* Rojo — lo que se rompe */
  --c-red-400: #F87171;
  --c-red-500: #EF4444;

  /* Neutros fríos */
  --c-slate-50:  #F8FAFC;
  --c-slate-100: #E8ECF8;
  --c-slate-300: #CBD5E1;
  --c-slate-400: #94A3B8;
  --c-slate-500: #64748B;
  --c-slate-600: #475569;

  /* ── CAPA 2 · SEMÁNTICOS ────────────────────────────────────────────────
     Lo que los componentes SÍ consumen.                                     */

  /* Fondos y superficies */
  --bg:            var(--c-obsidian-900);
  --bg-deep:       var(--c-obsidian-950);
  --bg-raised:     var(--c-obsidian-850);
  --bg-alt:        var(--c-obsidian-800);

  /* Cristal (glassmorphism): translúcido + desenfoque + borde de luz */
  --glass-bg:        rgba(255, 255, 255, 0.035);
  --glass-bg-hover:  rgba(255, 255, 255, 0.06);
  --glass-border:    rgba(255, 255, 255, 0.09);
  --glass-border-hi: rgba(255, 255, 255, 0.16);
  --glass-blur:      16px;

  /* Texto */
  --fg:        var(--c-slate-100);
  --fg-strong: var(--c-slate-50);
  --fg-muted:  var(--c-slate-400);
  /* NO es slate-500 (#64748B): sobre esta obsidiana da 4.15:1 y el mínimo
     legal para texto pequeño es 4.5:1 (WCAG 2.2 AA). Medido: 5.42:1.
     Sigue siendo visiblemente más tenue que --fg-muted (7.71:1), así que la
     jerarquía se mantiene. */
  --fg-subtle: #78879E;

  /* Marca */
  --primary:    var(--c-indigo-500);
  --primary-hi: var(--c-indigo-400);
  --primary-lo: var(--c-indigo-600);
  --on-primary: #FFFFFF;

  --accent:    var(--c-cyan-400);
  --accent-hi: var(--c-cyan-300);
  --on-accent: var(--c-obsidian-950);

  /* Estados semánticos (los usan los Anillos de autonomía) */
  --ok:     var(--c-emerald-400);
  --wait:   var(--c-amber-400);
  --danger: var(--c-red-400);

  /* Resplandores — la sombra en este sistema es LUZ DE COLOR, nunca gris */
  --glow-primary: 0 0 0 1px rgba(99, 102, 241, .25), 0 12px 48px -12px rgba(99, 102, 241, .55);
  --glow-accent:  0 0 0 1px rgba(34, 211, 238, .25), 0 12px 48px -12px rgba(34, 211, 238, .5);
  --glow-soft:    0 24px 64px -32px rgba(2, 6, 23, .9);
  --glow-lift:    0 32px 80px -40px rgba(99, 102, 241, .45), 0 8px 24px -16px rgba(0,0,0,.6);

  /* Gradientes de marca */
  --grad-brand:      linear-gradient(135deg, var(--c-indigo-400) 0%, var(--c-cyan-400) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(129,140,248,.16) 0%, rgba(34,211,238,.10) 100%);
  --grad-text:       linear-gradient(120deg, #FFFFFF 0%, #C7D2FE 42%, #67E8F9 100%);
  --grad-surface:    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
  /* [14-sep-2026] Gradiente de lo que lleva TEXTO BLANCO encima (.btn-primary,
     .plan-tag, pestaña y conmutador activos), en los dos temas. --grad-brand acaba
     en cyan-400 y el blanco sobre él da 1.81:1 (AA pide 4.5): mismo índigo→cian
     con paradas profundas, 6.29:1 y 5.36:1. Lo decorativo sin texto (satélites,
     barras de progreso) sigue con --grad-brand, que en oscuro es el que luce. */
  --grad-cta:        linear-gradient(135deg, var(--c-indigo-600) 0%, var(--c-cyan-700) 100%);

  /* ── TIPOGRAFÍA ──────────────────────────────────────────────────────────
     Space Grotesk = carácter (titulares). Outfit = la fuente del producto
     DavinciOS (cuerpo/UI). JetBrains Mono = telemetría, cifras, etiquetas HUD. */
  --font-display: "Space Grotesk", "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica fluida (clamp: móvil → escritorio, sin saltos) */
  --t-hero: clamp(2.6rem, 1.4rem + 5.4vw, 5.5rem);
  --t-h1:   clamp(2.1rem, 1.3rem + 3.4vw, 3.8rem);
  --t-h2:   clamp(1.75rem, 1.2rem + 2.3vw, 2.85rem);
  --t-h3:   clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --t-lead: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  --t-body: 1rem;   /* 16px — nunca por debajo en cuerpo */
  --t-sm:   0.9375rem;
  --t-xs:   0.8125rem;
  --t-mono: 0.75rem;

  --lh-tight: 1.04;
  --lh-head:  1.14;
  --lh-body:  1.65;

  /* ── ESPACIADO (densidad estándar, escala de 4) ─────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Ritmo vertical de sección — el que da la sensación «cara» */
  --sec-y: clamp(4.5rem, 3rem + 8vw, 9rem);

  /* ── FORMA ─────────────────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ── MOVIMIENTO ─────────────────────────────────────────────────────────
     Duración por contexto — nunca una sola duración para todo.             */
  --d-instant: 90ms;   /* feedback táctil */
  --d-fast:    180ms;  /* hover, foco */
  --d-base:    300ms;  /* cambios de estado */
  --d-slow:    600ms;  /* entrada de contenido */
  --d-story:   900ms;  /* narrativa de scroll */

  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out — el caballo de batalla */
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* rebote sutil */

  /* ── LAYOUT ────────────────────────────────────────────────────────────── */
  --wrap:      1200px;
  --wrap-wide: 1400px;
  --wrap-text: 68ch;
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --nav-h:     72px;

  --z-bg: 0; --z-content: 1; --z-nav: 100; --z-modal: 200; --z-toast: 300;

  color-scheme: dark;
}

/* ── TEMA CLARO ────────────────────────────────────────────────────────────
   El cosmos se vuelve laboratorio: vidrio esmerilado sobre blanco, la luz de
   color se mantiene. Lo activa el conmutador con [data-theme="light"].     */
[data-theme="light"] {
  --bg:        #FBFCFF;
  --bg-deep:   #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-alt:    #F4F6FC;

  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-bg-hover:  rgba(255, 255, 255, 0.92);
  --glass-border:    rgba(15, 23, 42, 0.09);
  --glass-border-hi: rgba(15, 23, 42, 0.16);

  --fg:        #14192B;
  --fg-strong: #050813;
  --fg-muted:  #4A5673;
  --fg-subtle: #5A6782;   /* 5.54:1 sobre #FBFCFF — el anterior (#6B7898) daba 4.30 */

  --primary:    var(--c-indigo-600);
  --primary-hi: var(--c-indigo-700);
  /* Sobre blanco, cyan-600 (#0891B2) solo da 3.59:1 y el acento se usa en
     etiquetas HUD de 12px. cyan-700 sube a 5.22:1 sin dejar de ser cian. */
  --accent:     #0E7490;
  --on-accent:  #FFFFFF;

  /* [14-sep-2026] Sobre blanco el gradiente vivo apenas se ve y no admite texto:
     en claro la marca entera usa las paradas profundas (= --grad-cta). */
  --grad-brand: linear-gradient(135deg, var(--c-indigo-600) 0%, var(--c-cyan-700) 100%);

  /* [14-sep-2026] Estados legibles sobre blanco: los 400 del oscuro daban
     1.66-2.76:1 (el ámbar de «A2» casi no se leía). Tonos 700: 5.0-6.5:1. */
  --ok:     #047857;
  --wait:   #B45309;
  --danger: #B91C1C;

  /* [14-sep-2026] Los vídeos del producto son oscuros a propósito (no se
     invierten): en claro se enmarcan como una pantalla, no como un agujero. */
  --pantalla-bg:     var(--c-obsidian-800);
  --pantalla-borde:  rgba(15, 23, 42, 0.30);
  --pantalla-sombra: 0 28px 56px -28px rgba(15, 23, 42, .55), 0 10px 24px -16px rgba(15, 23, 42, .35);

  --grad-text:    linear-gradient(120deg, #0B1020 0%, #3730A3 48%, #0E7490 100%);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.6) 100%);

  --glow-soft: 0 20px 48px -28px rgba(15, 23, 42, .22);
  --glow-lift: 0 28px 64px -32px rgba(79, 70, 229, .28), 0 6px 18px -12px rgba(15,23,42,.12);

  color-scheme: light;
}

/* [14-sep-2026] En móvil las etiquetas mono (HUD, píldoras, migas) a 12 px se
   leían justas: JetBrains Mono es estrecha y va en mayúsculas espaciadas. */
@media (max-width: 600px) {
  :root { --t-mono: 0.8125rem; }
}