/* tokens.css — Design tokens: "Cine nocturno"
   Sistema oscuro editorial/cinematográfico para toda la landing, el panel
   admin y las páginas legales. Cambiar la paleta o la tipografía es editar
   solo este archivo. */

:root {
  /* --- Paleta base (negro absoluto con tinte violeta en las capas) ---
     El fondo es #000 puro: sin "margen" de luminosidad como el navy-negro
     anterior. Para que la alternancia de secciones siga siendo perceptible,
     bg-alt/surface llevan un salto de luminosidad mayor que antes. */
  --color-bg:            #000000;
  --color-bg-alt:        #120b1a;
  --color-surface:       #1a1224;
  --color-surface-alt:   #221930;
  --color-navy:          #0a2540;
  --color-navy-mid:      #0d3d5c;

  /* Acento primario: violeta eléctrico. Único color que "explota" contra el
     fondo oscuro — se usa con disciplina (CTAs, cifras, highlights). Sobre
     negro puro cumple WCAG AA (~4.6:1) por poco margen; en texto pequeño
     grande/bold pasa sin problema, pero para texto pequeño NO bold sobre
     bg-alt/surface (más claros que el negro puro) no alcanza 4.5:1 — para
     esos casos puntuales usar --color-accent-text en vez de --color-accent. */
  --color-accent:        #b727f5;
  --color-accent-text:   #d17dfa;
  --color-accent-dim:    #8c1ec4;
  --color-accent-bg:     rgba(183, 39, 245, 0.15);

  /* Acento secundario: teal, hereda la identidad de marca original,
     usado para detalles/iconografía, nunca compite con el lima. */
  --color-teal:          #2ec4c4;
  --color-teal-light:    #7fe8e8;
  --color-teal-bg:       rgba(46, 196, 196, 0.12);

  /* Texto sobre fondo oscuro */
  --color-text-primary:   #f5f7fa;
  --color-text-secondary: #b7c0cf;
  --color-text-muted:     #838da0;
  --color-border:         rgba(255, 255, 255, 0.14);
  --color-border-strong:  rgba(255, 255, 255, 0.26);
  --color-white:          #ffffff;

  /* Estados */
  --color-danger:      #ff6b6b;
  --color-danger-bg:   rgba(255, 107, 107, 0.12);
  --color-success:     #6ee7a0;
  --color-success-bg:  rgba(110, 231, 160, 0.12);

  /* --- Tipografía --- */
  /* Display = Inter en su peso más alto (900): 'Nexa' no está en Google
     Fonts (es de pago, Fontfabric) así que no se puede enlazar como
     Unbounded. Si consiguen los archivos con licencia, cambien esta línea
     a 'Nexa', ui-sans-serif, system-ui, sans-serif y agreguen @font-face
     en fonts/ (ver README > Personalización) — no requiere tocar nada más,
     todo el sitio usa var(--font-display).
     Space Mono: etiquetas, cifras y elementos "editorial/terminal". */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Escala tipográfica: base más grande que un sitio corporativo típico,
     con títulos fluidos (clamp) para lograr tamaños de cine en desktop
     sin romper el layout en móvil. */
  --text-xs:   0.75rem;    /* 12px — labels mono */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1.0625rem;  /* 17px — cuerpo */
  --text-md:   1.25rem;    /* 20px */
  --text-lg:   1.5rem;     /* 24px */
  --text-xl:   clamp(1.75rem, 1.3rem + 2vw, 2.5rem);     /* subtítulos de sección */
  --text-2xl:  clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);   /* títulos de sección */
  --text-3xl:  clamp(2.75rem, 1.6rem + 6vw, 6rem);       /* hero */

  --text-input: 1rem; /* nunca <16px: evita el zoom automático de iOS */

  --leading-tight:  1.05;
  --leading-snug:   1.3;
  --leading-normal: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  900;

  --tracking-tight: -0.03em;
  --tracking-wide:  0.14em;

  /* --- Espaciado --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --container-max:  760px;   /* columna de lectura (texto largo, formulario) */
  --container-wide: 1180px;  /* hero, grids, secciones editoriales */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  --glow-accent: 0 0 60px rgba(183, 39, 245, 0.35);

  /* --- Transiciones --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}