:root {
  /* ── Brand Colors ── */
  --mr-color-red-400: #EF5350;
  --mr-color-red-500: #D32F2F;
  --mr-color-red-600: #C62828;
  --mr-color-red-700: #B71C1C;

  --mr-color-crimson-500: #8B1A2B;

  --mr-color-orange-500: #E88D2A;
  --mr-color-gold-500: #D4A843;

  /* ── Functional Colors ── */
  --mr-color-success: #10B981;
  --mr-color-warning: #F59E0B;
  --mr-color-danger: #DC2626;
  --mr-color-info: #3B82F6;

  /* ── Surfaces (Dark Theme) ── */
  --mr-surface-base: #0A1628;
  --mr-surface-dark: #060E1E;
  --mr-surface-card: #0E1D35;
  --mr-surface-elevated: #152544;
  --mr-surface-overlay: rgba(0, 0, 0, 0.6);

  /* ── Text ── */
  --mr-text-primary: #F1F5F9;
  --mr-text-secondary: #B0BEC5;
  --mr-text-muted: #6B7280;
  --mr-text-dim: #3A4258;

  /* ── Borders & Glass ── */
  --mr-border-subtle: rgba(255, 255, 255, 0.06);
  --mr-border-default: rgba(255, 255, 255, 0.1);
  --mr-border-strong: rgba(255, 255, 255, 0.2);
  --mr-glass-bg: rgba(255, 255, 255, 0.03);
  --mr-glass-border: rgba(255, 255, 255, 0.08);

  /* ── Gradients ── */
  --mr-gradient-primary: linear-gradient(135deg, #D32F2F, #8B1A2B);
  --mr-gradient-card: linear-gradient(135deg, rgba(211, 47, 47, 0.1), rgba(139, 26, 43, 0.1));
  --mr-gradient-hero: linear-gradient(135deg, #D32F2F, #8B1A2B);

  /* ── Shadows ── */
  --mr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --mr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --mr-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --mr-shadow-glow: 0 0 20px rgba(211, 47, 47, 0.3);
  --mr-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* ── Typography ── */
  --mr-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --mr-font-display: 'Montserrat', sans-serif;
  --mr-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing Scale ── */
  --mr-space-1: 0.25rem;
  --mr-space-2: 0.5rem;
  --mr-space-3: 0.75rem;
  --mr-space-4: 1rem;
  --mr-space-5: 1.5rem;
  --mr-space-6: 2rem;
  --mr-space-8: 3rem;
  --mr-space-10: 4rem;
  --mr-space-12: 5rem;

  /* ── Border Radius ── */
  --mr-radius-sm: 6px;
  --mr-radius-md: 12px;
  --mr-radius-lg: 16px;
  --mr-radius-xl: 24px;
  --mr-radius-full: 9999px;

  /* ── Transitions ── */
  --mr-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --mr-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --mr-container-width: 1280px;
  --mr-safe-bottom: env(safe-area-inset-bottom, 10px);
  --mr-safe-top: env(safe-area-inset-top, 0px);
}

/* ── Legacy variable aliases (backward compat) ── */
:root {
  --color-primary: var(--mr-color-red-500);
  --color-primary-rgb: 211, 47, 47;
  --color-primary-glow: rgba(211, 47, 47, 0.3);
  --color-primary-dark: var(--mr-color-red-600);
  --color-secondary: var(--mr-color-crimson-500);
  --color-accent: var(--mr-color-red-400);
  --color-success: var(--mr-color-success);
  --color-warning: var(--mr-color-warning);
  --color-danger: var(--mr-color-danger);

  --color-bg-dark: var(--mr-surface-base);
  --color-bg-darker: var(--mr-surface-dark);
  --color-bg-card: var(--mr-surface-card);
  --color-bg-card-hover: var(--mr-surface-elevated);
  --color-text-primary: var(--mr-text-primary);
  --color-text-secondary: var(--mr-text-secondary);
  --color-text-muted: var(--mr-text-muted);

  --gradient-primary: var(--mr-gradient-primary);
  --gradient-card: var(--mr-gradient-card);
  --shadow-glow: var(--mr-shadow-glow);
  --shadow-card: var(--mr-shadow-card);
  --transition: var(--mr-transition);
  --transition-smooth: var(--mr-transition-smooth);

  /* comprar/cuenta style aliases */
  --cyan: var(--mr-color-red-500);
  --purple: var(--mr-color-crimson-500);
  --green: var(--mr-color-success);
  --orange: var(--mr-color-warning);
  --gold: var(--mr-color-gold-500);
  --red: var(--mr-color-danger);
  --bg: var(--mr-surface-base);
  --card: var(--mr-surface-card);
  --surface: var(--mr-surface-dark);
  --muted: var(--mr-text-muted);
  --dim: var(--mr-text-dim);
  --grad: var(--mr-gradient-primary);

  --safe-bottom: var(--mr-safe-bottom);
  --safe-top: var(--mr-safe-top);

  /* style.optimized.css aliases */
  --color-dark: var(--mr-surface-base);
  --color-slate: #0f172a;
  --color-slate-light: var(--mr-surface-elevated);
  --color-gray: var(--mr-text-muted);
  --color-white: var(--mr-text-primary);
  --glass-bg: var(--mr-glass-bg);
  --glass-border: var(--mr-glass-border);
  --glass-shadow: var(--mr-shadow-lg);
  --radius-sm: var(--mr-radius-sm);
  --radius-md: var(--mr-radius-md);
  --radius-lg: var(--mr-radius-lg);
  --radius-full: var(--mr-radius-full);

  --container-width: var(--mr-container-width);
}

/* ═══════════════ ACCESSIBILITY ═══════════════ */
:focus-visible {
  outline: 2px solid var(--mr-color-red-500);
  outline-offset: 2px;
}
.skip-link {
  position: fixed; top: -100%; left: 16px; z-index: 99999;
  padding: 12px 24px; background: var(--mr-color-red-500); color: #fff;
  font-weight: 600; font-size: 0.9rem; border-radius: 0 0 8px 8px;
  text-decoration: none; transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }