:root {
    /* Backgrounds & surfaces */
    --color-bg-primary: #000620;
    --color-bg-secondary: #0f172a;
    --color-surface-dark: #1e293b;
    --color-surface-muted: #3f4b5f;
    --color-surface-light: #d8d7d7; /* Compare super cards */

    /* Neutral scale */
    --color-slate-900: #334155;
    --color-slate-800: #374151;
    --color-slate-700: #475569;
    --color-slate-600: #64748b;
    --color-slate-500: #94a3b8;
    --color-slate-450: #9ca3af;
    --color-slate-400: #adb7c9;
    --color-slate-300: #cbd5e1;
    --color-slate-200: #e2e8f0;
    --color-slate-150: rgb(236, 242, 248);
    --color-slate-100: #f1f5f9;
    --color-slate-050: #f8fafc;
    --color-gray-700: #424242;
    --color-gray-100: #f5f5f5;
    --color-neutral-200: #e5e7eb;

    /* Blues */
    --color-blue-700: #1e40af;
    --color-blue-600: #1d4ed8;
    --color-blue-500: #2563eb;
    --color-blue-400: #3b82f6;
    --color-blue-300: #60a5fa;
    --color-blue-200: #dbeafe;
    --color-blue-100: #eff6ff;

    /* Greens */
    --color-teal-700: #005f73;
    --color-green-700: #15803d;
    --color-green-600: #16a34a;
    --color-green-500: #10b981;
    --color-green-400: #08c04c;
    --color-green-300: #00ac09;
    --color-green-200: #cfe4ce;
    --color-green-150: #d1fae5;
    --color-green-125: #dcfce7;
    --color-green-050: #f0fdf4;

    /* Ambers */
    --color-amber-700: #b45309;
    --color-amber-600: #ca8a04;
    --color-amber-500: #d97706;
    --color-amber-400: #f59e0b;
    --color-amber-200: #fde68a;
    --color-amber-100: #fef3c7;

    /* Reds */
    --color-red-900: #7f1d1d;
    --color-red-800: #991b1b;
    --color-red-700: #b91c1c;
    --color-red-600: #dc2626;
    --color-red-500: #ef4444;
    --color-red-450: #ca5252;
    --color-red-200: #fecaca;
    --color-red-150: #fee2e2;
    --color-red-100: #fef2f2;

    /* Accent */
    --color-purple-500: #9333ea;

    /* Whites */
    --color-white: #ffffff;
    --color-white-rgb: rgb(255, 255, 255);

    /* Alpha overlays */
    --alpha-black-70: rgba(0, 0, 0, 0.7);
    --alpha-black-50: rgba(0, 0, 0, 0.5);
    --alpha-black-30: rgba(0, 0, 0, 0.3);
    --alpha-black-20: rgba(0, 0, 0, 0.2);
    --alpha-black-15: rgba(0, 0, 0, 0.15);
    --alpha-black-10: rgba(0, 0, 0, 0.1);
    --alpha-white-95: rgba(255, 255, 255, 0.95); /* Volver button */
    --alpha-white-70: rgba(252, 248, 248, 0.7);
    --alpha-white-20: rgba(255, 255, 255, 0.2);
    --alpha-white-08: rgba(255, 255, 255, 0.08);
    --alpha-blue-60: rgba(37, 99, 235, 0.6);
    --alpha-blue-40: rgba(37, 99, 235, 0.4);
    --alpha-blue-30: rgba(37, 99, 235, 0.3);
    --alpha-blue-25: rgba(37, 99, 235, 0.25);
    --alpha-blue-20: rgba(37, 99, 235, 0.2);
    --alpha-blue-10: rgba(37, 99, 235, 0.1);
    --alpha-blue-soft-45: rgba(59, 130, 246, 0.45);
    --alpha-blue-soft-18: rgba(59, 130, 246, 0.18);
    --alpha-green-60: rgba(16, 185, 129, 0.6);
    --alpha-green-30: rgba(16, 185, 129, 0.3);
    --alpha-green-28: rgba(16, 185, 129, 0.28);
    --alpha-green-25: rgba(16, 185, 129, 0.25);
    --alpha-green-22: rgba(16, 185, 129, 0.22);
    --alpha-green-20: rgba(22, 163, 74, 0.2);
    --alpha-red-10: rgba(220, 38, 38, 0.1);
    --alpha-slate-20: rgba(148, 163, 184, 0.2);
    /* Semantic aliases */
    /* Surfaces */
    --surface-app: var(--color-bg-primary);
    --surface-app-alt: var(--color-bg-secondary);
    --surface-panel: var(--color-surface-dark);
    --surface-panel-muted: var(--color-surface-muted);
    --surface-panel-strong: var(--color-slate-900);
    --surface-card: var(--color-surface-light);
    --surface-card-muted: var(--color-slate-050);
    --surface-card-soft: var(--color-slate-150);
    --surface-card-inverse: var(--color-white);
    --surface-card-inverse-soft: var(--color-gray-100);
    --surface-glass: var(--alpha-white-20);
    --surface-glass-soft: var(--alpha-white-08);
    --surface-popover: var(--alpha-white-95);
    --surface-popover-soft: var(--alpha-white-70);
    --surface-neutral: var(--color-slate-200);
    --surface-neutral-alt: var(--color-neutral-200);
    --surface-handle: var(--color-slate-300);
    --surface-floating: var(--color-teal-700);
    --surface-control: var(--color-slate-900);
    --surface-control-muted: var(--color-slate-700);
    --surface-control-hover: var(--color-slate-600);

    /* Overlays & shadows */
    --overlay-scrim: var(--alpha-black-70);
    --overlay-dim: var(--alpha-black-50);
    --overlay-slate-soft: var(--alpha-slate-20);
    --shadow-strong: var(--alpha-black-30);
    --shadow-medium: var(--alpha-black-20);
    --shadow-soft: var(--alpha-black-15);
    --shadow-subtle: var(--alpha-black-10);

    /* Text */
    --text-primary: var(--color-slate-200);
    --text-secondary: var(--color-slate-500);
    --text-tertiary: var(--color-slate-600);
    --text-subtle: var(--color-slate-400);
    --text-heading: var(--color-slate-100);
    --text-strong: var(--color-surface-dark);
    --text-contrast: var(--color-slate-900);
    --text-on-light: var(--color-slate-800);
    --text-strong-on-light: var(--color-gray-700);
    --text-on-inverse: var(--color-white);
    --text-link: var(--color-blue-400);
    --text-link-hover: var(--color-blue-300);
    --text-link-active: var(--brand-primary);

    /* Brand */
    --brand-primary: var(--color-blue-500);
    --brand-primary-hover: var(--color-blue-600);
    --brand-primary-active: var(--color-blue-700);
    --brand-light: var(--color-blue-400);
    --brand-border: var(--color-blue-300);
    --brand-border-soft: var(--color-blue-200);
    --brand-surface: var(--color-blue-200);
    --brand-surface-strong: var(--color-blue-100);
    --brand-shadow: var(--alpha-blue-30);
    --brand-glow-medium: var(--alpha-blue-40);
    --brand-glow-strong: var(--alpha-blue-60);
    --brand-overlay-medium: var(--alpha-blue-25);
    --brand-overlay-light: var(--alpha-blue-20);
    --brand-overlay-faint: var(--alpha-blue-10);
    --brand-glow-soft: var(--alpha-blue-soft-18);
    --brand-glow-soft-strong: var(--alpha-blue-soft-45);

    /* Success */
    --success-primary: var(--color-green-600);
    --success-primary-hover: var(--color-green-700);
    --success-text: var(--color-green-500);
    --success-border: var(--color-green-300);
    --success-accent: var(--color-green-300);
    --success-border-strong: var(--color-green-400);
    --success-border-contrast: var(--color-green-500);
    --success-surface: var(--color-green-200);
    --success-surface-soft: var(--color-green-150);
    --success-surface-softer: var(--color-green-125);
    --success-surface-faint: var(--color-green-050);
    --success-glow-medium: var(--alpha-green-30);
    --success-glow-strong: var(--alpha-green-60);
    --success-overlay: var(--alpha-green-28);
    --success-overlay-soft: var(--alpha-green-25);
    --success-overlay-faint: var(--alpha-green-22);
    --success-border-soft: var(--alpha-green-20);

    /* Warning */
    --warning-primary: var(--color-amber-500);
    --warning-strong: var(--color-amber-700);
    --warning-text: var(--color-amber-400);
    --warning-surface: var(--color-amber-200);
    --warning-surface-soft: var(--color-amber-100);

    /* Danger */
    --danger-primary: var(--color-red-600);
    --danger-primary-hover: var(--color-red-700);
    --danger-text: var(--color-red-500);
    --danger-border: var(--color-red-450);
    --danger-border-contrast: var(--color-red-500);
    --danger-surface: var(--color-red-200);
    --danger-surface-soft: var(--color-red-150);
    --danger-surface-faint: var(--color-red-100);
    --danger-strong: var(--color-red-800);
    --danger-strongest: var(--color-red-900);
    --danger-overlay-soft: var(--alpha-red-10);

    /* Neutrals & states */
    --border-subtle: var(--color-slate-200);
    --border-subtle-alt: var(--color-neutral-200);
    --border-muted: var(--color-slate-300);
    --border-medium: var(--color-slate-450);
    --border-strong: var(--color-slate-700);
    --border-contrast: var(--color-slate-900);
    --divider-subtle: var(--color-slate-150);
    --divider-contrast: var(--color-slate-100);
    --divider-strong: var(--color-slate-400);
    --state-disabled-bg: var(--color-slate-450);
    --state-disabled-text: var(--color-slate-600);
    --state-disabled-border: var(--color-slate-300);

    --badge-neutral-text: var(--color-slate-600);
    --badge-neutral-surface: var(--color-slate-200);
    --badge-neutral-contrast: var(--color-surface-dark);

    /* Focus */
    --focus-ring: var(--brand-primary);
    --focus-ring-subtle: var(--brand-border);
}