/* ============================================================
   HackUMB 26 — sistema de tokens
   Capa 1 primitivos · Capa 2 semánticos · Capa 3 componente
   Documentado en design-system/MASTER.md
   ============================================================ */

:root {
  /* ---------- Capa 1 · primitivos ---------- */

  /* papel */
  --papel-50:  #F7F4EE;
  --papel-100: #F2EDE5;
  --papel-200: #EFEAE2;
  --papel-300: #E4DCCF;
  --papel-400: #D8D0C4;
  --papel-500: #C4B9A8;

  /* tinta */
  --tinta-900: #14100D;
  --tinta-800: #1C1713;
  --tinta-700: #262019;
  --tinta-600: #332C25;
  --tinta-400: #635E57;
  --tinta-300: #6A655E;

  /* naranja */
  --naranja-700: #A82C08;  /* texto pequeño sobre papel */
  --naranja-600: #C0330D;
  --naranja-500: #E8431A;  /* color de marca */
  --naranja-400: #FF5A2B;  /* sobre tinta */
  --naranja-100: #F7DCD1;

  /* apoyo */
  --verde-500: #1F6B4A;
  --verde-100: #D6E7DE;

  /* escala tipográfica · tercera mayor recortada */
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-21: 21px;
  --t-26: 26px;
  --t-34: clamp(26px, 3.4vw, 34px);
  --t-46: clamp(34px, 5vw, 46px);
  --t-64: clamp(44px, 7.5vw, 64px);
  --t-88: clamp(52px, 10vw, 88px);

  /* espaciado · múltiplos de 4 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  /* familias */
  --f-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-texto:   "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-dato:    "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* movimiento */
  --dur-rapida: 140ms;
  --dur-media: 220ms;
  --dur-lenta: 320ms;
  --sal: cubic-bezier(0.16, 1, 0.3, 1);   /* entradas */
  --ent: cubic-bezier(0.4, 0, 1, 1);      /* salidas */

  /* capas */
  --z-base: 0;
  --z-elevado: 10;
  --z-barra: 40;
  --z-modal: 100;
  --z-aviso: 200;

  --radio: 2px;
  --ancho: 1240px;
}

/* ---------- Capa 2 · semánticos (tema claro) ---------- */

:root {
  --fondo: var(--papel-200);
  --fondo-alt: var(--papel-100);
  --superficie: var(--papel-100);
  --superficie-alta: var(--papel-50);
  --superficie-invertida: var(--tinta-900);

  --texto: var(--tinta-900);
  --texto-sec: var(--tinta-400);
  --texto-ter: var(--tinta-300);
  --texto-invertido: var(--papel-50);
  --texto-sobre-acento: #150F0C;

  --linea: var(--papel-400);
  --linea-suave: var(--papel-300);
  --linea-invertida: var(--tinta-600);

  --acento: var(--naranja-500);
  --acento-texto: var(--naranja-700);   /* cumple 4.5:1 sobre papel */
  --acento-fondo: var(--naranja-100);
  --acento-borde: var(--naranja-500);
  --acento-invertido: var(--naranja-400);  /* naranja sobre superficie invertida */
  --texto-sec-invertido: #A8A198;          /* texto de apoyo sobre superficie invertida */

  --exito: var(--verde-500);
  --exito-fondo: var(--verde-100);
  --peligro: var(--naranja-700);

  --velo: rgba(20, 16, 13, 0.62);
  --sombra-dura: 12px 12px 0 var(--tinta-900);

  --asiento-libre: var(--papel-400);
  --asiento-ocupado: var(--tinta-900);
  --asiento-mio: var(--naranja-500);

  color-scheme: light;
}

/* ---------- Capa 2 · semánticos (tema oscuro) ---------- */

[data-tema="oscuro"] {
  --fondo: var(--tinta-900);
  --fondo-alt: var(--tinta-800);
  --superficie: var(--tinta-800);
  --superficie-alta: var(--tinta-700);
  --superficie-invertida: var(--papel-100);

  --texto: var(--papel-50);
  --texto-sec: #A8A198;
  --texto-ter: #8F887E;
  --texto-invertido: var(--tinta-900);
  --texto-sobre-acento: #150F0C;

  --linea: var(--tinta-600);
  --linea-suave: var(--tinta-700);
  --linea-invertida: var(--papel-400);

  --acento: var(--naranja-400);
  --acento-texto: var(--naranja-400);
  --acento-fondo: #3A1B0E;
  --acento-borde: var(--naranja-400);
  --acento-invertido: var(--naranja-700);
  --texto-sec-invertido: var(--tinta-400);

  --exito: #6FCB9F;
  --exito-fondo: #12291F;
  --peligro: var(--naranja-400);

  --velo: rgba(0, 0, 0, 0.72);
  --sombra-dura: 12px 12px 0 var(--papel-100);

  --asiento-libre: var(--tinta-600);
  --asiento-ocupado: var(--papel-300);
  --asiento-mio: var(--naranja-400);

  color-scheme: dark;
}

/* ---------- Capa 3 · componente ---------- */

:root {
  --boton-alto: 48px;
  --boton-alto-sm: 40px;
  --campo-alto: 52px;
  --toque-min: 44px;

  --barra-alto: 64px;

  /* muro de patrocinadores: los logos vienen con color propio, así que la
     celda se queda en papel también en tema oscuro. */
  --patrocinio-celda: var(--papel-50);

  --tarjeta-relleno: var(--e-6);
  --seccion-relleno: var(--e-9);
}