/* ============ Sistema visual — tokens ============ */
:root {
  /* Azul eléctrico (marca MintStore) */
  --blue-50: #eef4ff;
  --blue-100: #dbe7ff;
  --blue-300: #8fb6ff;
  --blue-400: #4d8dff;
  --blue-500: #1f5bff;
  --blue-700: #1442c9;

  /* Azul profundo (base) */
  --navy-950: #050b1a;
  --navy-900: #0a1530;
  --navy-800: #0f1f45;
  --navy-700: #18306b;

  /* Cian (acentos puntuales, como el degradé del logo) */
  --accent-300: #8be9ff;
  --accent-400: #22d3ff;
  --accent-500: #00a8e8;

  /* Neutros */
  --white: #ffffff;
  --surface: #f4f7fd;
  --line: #e1e8f5;
  --ink: #0a1530;
  --ink-muted: #4a5875;

  /* Sobre fondo oscuro */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.72);
  --on-dark-line: rgba(255, 255, 255, 0.12);

  /* Anillos del estadio (tarjetas + esquema) */
  --tier-popular: #dbe7ff;
  --tier-baja: #a9c4ff;
  --tier-media: #5b8dff;
  --tier-alta: #1a3fb8;
  --tier-selected: var(--accent-400);
  --pitch: #2f7a4f;
  --success: #1a8f55;
  --danger: #b42318;

  /* Tipografía */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Espaciado (escala 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Forma */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Sombras discretas */
  --shadow-sm: 0 1px 2px rgba(10, 26, 51, 0.06), 0 1px 3px rgba(10, 26, 51, 0.08);
  --shadow: 0 10px 28px -10px rgba(10, 26, 51, 0.2);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.55);

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 76px;
  }
}