/*
  tokens.css
  Sistema de diseño de Prodamp — variables, nada de reglas de layout aquí.

  Lectura de color: los tres colores de marca no son intercambiables,
  cada uno tiene un trabajo fijo (igual que en el panel de un amplificador):
    --brand-green  -> señal / encendido / acción principal
    --brand-red    -> crítico / poco frecuente (clip, alerta)
    --brand-blue   -> estructura / superficie de panel
  El resto de la paleta (ink, steel, paper) se deriva del azul de marca,
  no de un negro genérico, para que la página se sienta de una sola pieza.
*/

:root {
  /* ---- Color de marca (fijo, no editar sin aprobación) ---- */
  --brand-red: #ff0000;
  --brand-blue: #325082;
  --brand-green: #24f858;

  /* ---- Superficies, derivadas del azul de marca ---- */
  --ink-950: #0a0e18;
  --ink-900: #0d1220;
  --ink-800: #131a2c;
  --ink-700: #171f33;
  --ink-600: #212b45;
  --steel-500: #3a4562;
  --steel-400: #4d5a7d;
  --steel-300: #7783a1;

  --paper-100: #eef0f6;
  --paper-050: #f6f7fb;

  /* ---- Texto ---- */
  --text-primary: #eef1f8;
  --text-secondary: #aab3cc;
  --text-muted: #7783a1;
  --text-on-green: #06230f;
  --text-on-red: #180508;
  --text-on-paper: #171f33;
  --text-on-panel: #c7d0e6;

  /* ---- Tono funcional de los colores de marca ---- */
  --accent-primary: var(--brand-green);
  --accent-critical: var(--brand-red);
  --surface-panel: var(--brand-blue);

  /* ---- Tipografía ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --size-display-xl: clamp(2.75rem, 2.1rem + 3vw, 5.25rem);
  --size-display-lg: clamp(2.15rem, 1.75rem + 1.8vw, 3.25rem);
  --size-display-md: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --size-body-lg: 1.1875rem;
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-micro: 0.75rem;

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-normal: 1.6;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---- Espaciado (escala base 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Contenedor ---- */
  --container-max: 74rem;
  --container-pad: var(--space-5);

  /* ---- Bordes y "chapa metálica" ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --border-hairline: 1px solid var(--steel-500);
  --shadow-plate:
    0 1px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow-raised: 0 8px 24px rgba(5, 8, 16, 0.45);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;
}