/* Chordogs · sistema de diseño (tokens). Compartido por la web y el panel.
   Paleta sacada del logo: pizarra casi negra, amarillo pan (oro), rojo salchicha (fuego), blanco cálido. */
:root {
  /* superficies */
  --bg: #0E1217;
  --bg-2: #141A21;
  --bg-3: #1B232C;
  --bg-4: #242F3A;
  --linea: rgba(255, 255, 255, .09);
  --linea-2: rgba(255, 255, 255, .18);

  /* texto (contraste AA sobre --bg: texto 16:1, suave 9:1, tenue 5.9:1) */
  --texto: #F6F1E7;
  --suave: #B9C1CB;
  --tenue: #8B95A1;

  /* marca */
  --oro: #F2A93B;
  --oro-claro: #FFC766;
  --oro-tinta: #1A1205;      /* texto sobre botones dorados */
  --fuego: #E0412F;
  --fuego-claro: #FF6A3D;
  --brasa: #FF8A3D;

  /* estados */
  --ok: #4CC38A;
  --error: #FF7A6B;

  /* tipografía */
  --f-titulo: "Rubik", "Arial Black", system-ui, sans-serif;
  --f-cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* espaciado (base 4) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

  /* radios y sombras */
  --r-s: 10px; --r-m: 14px; --r-l: 22px; --r-xl: 28px; --r-pill: 999px;
  --sombra-1: 0 6px 18px rgba(0, 0, 0, .35);
  --sombra-2: 0 18px 48px rgba(0, 0, 0, .55);
  --brillo-oro: 0 0 0 1px rgba(242, 169, 59, .35), 0 10px 30px rgba(242, 169, 59, .18);

  /* movimiento */
  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);

  --ancho: 1120px;
}