:root{
  /* Typography */
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --font-disp: 'Barlow Condensed', ui-sans-serif, sans-serif;

  /* Surfaces */
  --bg: #0B0D10;                  /* Asfalto (manual de marca) */
  --surface: rgba(255,255,255,.055);
  --surface-2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.10);

  /* Text */
  --text: #F4F6F1;                /* Tiza */
  --muted: rgba(244,246,241,.60);

  /* Brand accents */
  --primary: #00FF87; /* Verde Largada */
  --gradient-brand: linear-gradient(90deg, #00FF87, #6EC6FF);
  --accent:  #6EC6FF; /* Celeste Rambla: datos, enlaces, "no se hizo" */
  --hot:     #FF4D5E; /* Cinta: alertas y errores */
  --warn:    #FFB703;              /* ámbar: "sin registrar", pendientes */
  --chaleco: #E9FF4F;              /* logros y lo que se celebra (solo sobre oscuro) */

  /* Effects */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 10px 40px rgba(0,0,0,.55);

  /* Layout */
  --container: 1120px;
  /* Para pantallas que son una tabla ancha (plantel, matriz de carreras): el
     contenedor normal las obliga a scrollear adentro mientras sobra monitor. */
  --container-wide: 1600px;

  /* Spacing scale */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;
}