/*
  GENERADO — no editar a mano.

  Fuente: /Users/mariolopez/Library/CloudStorage/OneDrive-Personal/SyntraStudio - Development Stack/brand/system
    identity/colors.md · identity/typography.md
  Regenerar: ./brand/generate-tokens.sh        (2026-08-24)

  Si un valor está mal, se corrige en el brand system y se vuelve a
  generar. Editar este archivo bifurca la marca en silencio.
*/

:root {
  /* --- Color --- */
  --noche-950: #06060A;  /* Extremo superior del degradado de fondo */
  --noche-900: #08080C;  /* Fondo base de la página/app (34% del degradado hacia abajo) */
  --borde-noche: #34344F;  /* Bordes de tarjetas/inputs — gris-violeta apagado, NO gris puro */
  --niebla: #B7B7C9;  /* Texto secundario/labels sobre noche (overlines, subtítulos) */
  --superficie-input: rgba(255,255,255,.03);  /* Fondo de inputs/campos sobre noche */
  --asfalto: #18161B;  /* Texto principal sobre claro; fondo del modo producto */
  --gris-800: #2E2B33;  /* Texto secundario fuerte; superficies elevadas en dark */
  --gris-600: #57525E;  /* Texto secundario / captions sobre claro */
  --gris-400: #8C8694;  /* Bordes, texto deshabilitado. ⚠️ Sobre blanco solo texto ≥18px (3.53:1) */
  --gris-200: #CFCBD6;  /* Divisores, fondos de fichas */
  --papel: #F6F5F8;  /* Fondo base del estudio (cara pública) */
  --blanco: #FFFFFF;  /* Superficies sobre papel, texto sobre oscuro */
  --syntra-700: #5B21B6;  /* La tinta del estudio: S del logo en aplicaciones claras, links, sellos (8.98:1 sobre blanco AAA) */
  --syntra-600: #6D28D9;  /* Botones primarios (blanco encima = 7.10:1 AAA) */
  --syntra-500: #7C3AED;  /* Fin del degradado de producto (verificado en vivo); acentos (5.70:1 sobre blanco AA) */
  --syntra-400: #8B5CF6;  /* Nuevo (verificado en vivo). Inicio del degradado de producto/botones; el "violeta vivo" de la marca */
  --syntra-300: #A78BFA;  /* Links y acentos sobre noche (6.60:1 sobre asfalto AA); segundo glow ambiental de página */
  --magenta: #D946EF;  /* Accent opcional/raro — NO es parte del degradado primario (eso era un error de v1.0; el producto real es violeta→violeta). Usar solo si se necesita un segundo acento puntual */
  --ambar-500: #F59E0B;  /* Solo elementos NO-texto sobre claro (franjas, iconos grandes); texto sobre asfalto OK (8.36:1 AAA). ❌ NUNCA texto sobre blanco (2.15:1) */
  --ambar-700: #B45309;  /* Texto de advertencia sobre claro (5.02:1 AA) */
  --exito: #15803D;  /* 5.02:1 AA (blanco encima también AA) */
  --error: #DC2626;  /* 4.83:1 AA (blanco encima también AA) */
  --info: #6D28D9;  /* usa el morado — la marca ES la info */

  /* --- Tipografía --- */
  --fuente-sans: Archivo, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --texto-display: 61px;      /* interlínea 1.05 · 800 Expanded */
  --interlinea-display: 1.05;
  --texto-h1: 49px;      /* interlínea 1.1 · 700 Expanded */
  --interlinea-h1: 1.1;
  --texto-h2: 31px;      /* interlínea 1.2 · 700 */
  --interlinea-h2: 1.2;
  --texto-h3: 25px;      /* interlínea 1.3 · 600 */
  --interlinea-h3: 1.3;
  --texto-h4: 20px;      /* interlínea 1.4 · 600 */
  --interlinea-h4: 1.4;
  --texto-body: 16px;      /* interlínea 1.6 · 400 */
  --interlinea-body: 1.6;
  --texto-small: 14px;      /* interlínea 1.5 · 400 */
  --interlinea-small: 1.5;
  --texto-micro: 12px;      /* interlínea 1.4 · 500 MAYÚSCULAS +8% tracking */
  --interlinea-micro: 1.4;
  --texto-spec: 14px;      /* interlínea 1.5 · 400 */
  --interlinea-spec: 1.5;
}

/* --- Recetas compuestas ---
   Valores literales del brand system. La regla 5 prohíbe aproximarlas a ojo:
   el glow es siempre el acento a opacidad baja (8–32%) con blur grande
   (18–60px), nunca un color sólido. */

/* Fondo ambiental de página */
.syntra-fondo-ambiental-pagina {
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(139,92,246,.13), transparent 60%),
    radial-gradient(760px 500px at 4% 0%,   rgba(167,139,250,.08), transparent 55%),
    linear-gradient(#06060A, #08080C 34%);
}

/* Degradado de producto */
.syntra-degradado-producto {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED); /* syntra-400 → syntra-500 */
}

/* Glow ambiental de tarjeta */
.syntra-glow-ambiental-tarjeta {
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 60px rgba(139,92,246,.08);
}

/* Glow de botón primario */
.syntra-glow-boton-primario {
  box-shadow: 0 6px 18px rgba(139,92,246,.32);
}