/* ==========================================================================
   CasaMarx Campus · Tokens
   Fuente de verdad: design_system_casa_marx.html (v1.0, mayo 2026)
   No inventar tonos intermedios. Si falta un valor, se añade aquí.
   ========================================================================== */

:root {
  /* --- Paleta de marca --- */
  --rojo: #6D0A0A;
  --azul: #08273B;
  --amarillo: #CD790B;
  --verde: #3F481B;
  --crema: #F2F0EC;
  --hueso: #E8E5DD;
  --gris-texto: #3A3A3A;
  --gris-sutil: #C8C8C8;

  /* Derivados mínimos, solo para estados de interacción */
  --rojo-hover: #8E1010;
  --rojo-deep: #4D0606;
  --azul-hover: #0F3A56;
  --blanco: #FFFFFF;

  /* --- Semántica --- */
  --info-bg: #E4EBF2;
  --info-ink: #08273B;
  --success-bg: #ECEFDF;
  --success-ink: #2C3413;
  --warning-bg: #F7E7C7;
  --warning-ink: #6E4006;
  --error-bg: #F0D8D8;
  --error-ink: #4A0606;

  /* --- Tipografía --- */
  --font-display: "Barlow Condensed", "Aileron", "Oswald", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Open Sauce One", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md: 1.125rem;   /* 18 */
  --text-lg: 1.375rem;   /* 22 */
  --text-xl: 1.75rem;    /* 28 */
  --text-2xl: 2.25rem;   /* 36 */
  --text-3xl: 3rem;      /* 48 */
  --text-4xl: 4rem;      /* 64 */

  --track-tight: 0.04em;
  --track-wide: 0.12em;
  --track-xwide: 0.22em;

  /* --- Espaciado, escala de 4px --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

  /* --- Forma --- */
  --radius: 4px;

  /* --- Anchos ---
     960px es el ancho de prosa del sistema de diseño.
     --maxw-wide es una extensión documentada para rejillas de tarjetas,
     porque 960px deja el catálogo demasiado estrecho en escritorio. */
  --maxw: 960px;
  --maxw-wide: 1200px;
  --sidebar-w: 280px;
  --pad: clamp(20px, 4vw, 48px);

  /* --- Capas --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-header: 500;
  --z-modal: 1000;
  --z-tooltip: 1500;

  /* --- Elevación --- */
  --shadow-1: 0 1px 0 rgba(8, 39, 59, 0.04), 0 2px 4px rgba(8, 39, 59, 0.06);
  --shadow-2: 0 2px 4px rgba(8, 39, 59, 0.05), 0 8px 16px rgba(8, 39, 59, 0.09);
  --shadow-3: 0 4px 8px rgba(8, 39, 59, 0.06), 0 16px 32px rgba(8, 39, 59, 0.14);
  --shadow-modal: 0 4px 8px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.28);

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
}