/**
 * RADIO UNaF — SISTEMA DE DISEÑO / TOKENS
 * ============================================================================
 * Fuente única de verdad del color, la tipografía, el espacio y el ritmo.
 * Ningún componente escribe un color literal: todos consumen tokens.
 *
 * Concepto: «La consola y el dial».
 *   NEGRO  → estructura y profundidad (el estudio, la noche al aire).
 *   BLANCO → limpieza editorial y espacio universitario.
 *   ROJO   → señal. Vivo, acción, interacción. Nunca decorativo.
 *   GRISES → jerarquía secundaria, sin matiz azulado.
 * ============================================================================
 */

:root {
  /* ------------------------------------------------------------------
     1. PRIMITIVAS — nombradas por color, jamás por uso.
     ------------------------------------------------------------------ */

  /* Rojo señal. Tres valores con función de contraste declarada:
     --red-500 sobre blanco = 4.80:1 (AA texto normal)
     blanco sobre --red-500 = 4.80:1 (AA texto normal)
     --red-400 sobre --ink-900 = 5.58:1 (AA texto normal en oscuro) */
  --red-700: #8E0E14;
  --red-600: #B3121A;
  --red-500: #E11B22;
  --red-400: #FF4A3D;
  --red-300: #FF8079;

  /* Negros estructurales. Neutros puros: sin desviación de matiz. */
  --ink-950: #050506;
  --ink-900: #0A0A0B;
  --ink-800: #141416;
  --ink-700: #1C1C1F;
  --ink-600: #26262A;
  --ink-500: #34343A;

  /* Grises neutros. Sin azul: saturación cero en todos los pasos. */
  --gray-600: #55555A;
  --gray-500: #6B6B70;
  --gray-400: #9A9AA0;
  --gray-300: #C9C9CE;
  --gray-200: #E4E4E7;
  --gray-100: #F1F1F3;
  --gray-50:  #F7F7F8;
  --white:    #FFFFFF;

  /* ------------------------------------------------------------------
     2. MARCA — fija. No cambia con el contexto ni con el tema.
     ------------------------------------------------------------------ */
  --brand-red: var(--red-500);
  --brand-ink: var(--ink-900);
  --brand-on-red: var(--white);

  /* ------------------------------------------------------------------
     3. SEMÁNTICAS — nombradas por uso. Lo único que tocan los componentes.
     ------------------------------------------------------------------ */

  /* Superficies claras (modo editorial) */
  --surface:          var(--white);
  --surface-alt:      var(--gray-50);
  --surface-sunken:   var(--gray-100);
  --border:           var(--gray-200);
  --border-strong:    var(--gray-300);

  /* Superficies oscuras (modo estudio) */
  --surface-dark:         var(--ink-900);
  --surface-dark-raised:  var(--ink-800);
  --surface-dark-high:    var(--ink-700);
  --border-dark:          var(--ink-600);

  /* Texto sobre claro */
  --text:          var(--ink-900);
  --text-muted:    var(--gray-600);
  --text-subtle:   var(--gray-500);

  /* Texto sobre oscuro */
  --text-on-dark:        var(--white);
  --text-on-dark-muted:  var(--gray-300);
  --text-on-dark-subtle: var(--gray-400);

  /* Acción */
  --action:        var(--red-500);
  --action-hover:  var(--red-600);
  --action-on-dark: var(--red-400);
  --focus-ring:    var(--red-500);

  /* Estado al aire */
  --live:          var(--red-500);
  --live-on-dark:  var(--red-400);

  /* ------------------------------------------------------------------
     4. TIPOGRAFÍA
     Archivo  — grotesca editorial de Omnibus-Type (Buenos Aires). Variable,
                con eje de ancho: los títulos van levemente expandidos para
                sonar a afiche de radio, no a portada de diario.
     IBM Plex Mono — metadatos técnicos: frecuencia, señal, horarios,
                duraciones. Es la voz de la consola.
     ------------------------------------------------------------------ */
  --font-display: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --font-text:    'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* Escala fluida. min → max entre 360px y 1440px. */
  --step--2: clamp(0.694rem, 0.68rem + 0.06vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.14vw, 0.938rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.32vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.53vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.83vw, 2.37rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.28vw, 3.05rem);
  --step-5:  clamp(2.49rem, 2.04rem + 1.94vw, 3.9rem);
  --step-6:  clamp(2.99rem, 2.34rem + 2.86vw, 5rem);
  --step-7:  clamp(3.58rem, 2.63rem + 4.15vw, 6.7rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Ancho tipográfico. El eje de ancho de Archivo es lo que distingue
     nuestro tono del de otras universidades. */
  --width-display: 108;
  --width-normal: 100;

  --leading-tight: 0.95;
  --leading-snug: 1.12;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.022em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-mono: 0.14em;

  /* ------------------------------------------------------------------
     5. ESPACIO — escala de 4px, fluida en los saltos grandes.
     ------------------------------------------------------------------ */
  --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;

  /* Aire vertical entre secciones: el espacio en blanco es estructura. */
  --section-y: clamp(4rem, 2.5rem + 6.5vw, 8.5rem);
  --section-y-tight: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  /* ------------------------------------------------------------------
     6. GRILLA
     ------------------------------------------------------------------ */
  --container: 1320px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* ------------------------------------------------------------------
     7. GEOMETRÍA
     Todo recto: es la disciplina institucional. La única curva del sitio
     es el botón PLAY, y por eso concentra toda la atención.
     ------------------------------------------------------------------ */
  --radius: 0;
  --radius-device: 6px;
  --radius-full: 9999px;

  --border-hairline: 1px;
  --border-thick: 3px;

  /* ------------------------------------------------------------------
     8. ELEVACIÓN — sombras neutras, sin tinte de color.
     ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.14), 0 32px 64px rgb(0 0 0 / 0.12);
  --shadow-device: 0 24px 60px rgb(0 0 0 / 0.45), 0 2px 0 rgb(255 255 255 / 0.04) inset;

  /* ------------------------------------------------------------------
     9. MOVIMIENTO — sobrio. Institucional, no publicitario.
     ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration: 260ms;
  --duration-slow: 620ms;

  /* 10. CAPAS */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dock: 300;
  --z-overlay: 400;
  --z-modal: 500;
}