/* ===== DESIGN SYSTEM TOKENS ===== */
:root {
    /* Colors */
    --bg-body: #080b13;
    --bg-glass: rgba(17, 24, 39, 0.7);
    --bg-glass-border: rgba(255, 255, 255, 0.05);
    --bg-glass-blur: 15px;
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-light: #60a5fa;
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-disabled: #374151;
    /* Feature accent colors */
    --color-wheel: #a855f7;
    --color-referral: #06b6d4;
    --color-satisfaction: #facc15;
    --color-happyhour: #f59e0b;
    --color-challenge: #f97316;
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-card: 32px;
    --radius-full: 9999px;
    /* Shadows */
    --shadow-glass: 0 2px 12px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 4px 24px rgba(59, 130, 246, 0.3);
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ===== GLOBAL GLASS STANDARD ===== */
.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(var(--bg-glass-blur));
    -webkit-backdrop-filter: blur(var(--bg-glass-blur));
    border: 1px solid var(--bg-glass-border);
    transform: translateZ(0);
}

/* ===== PWA SAFE AREAS ===== */
body {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ===== PWA STANDALONE FIXES ===== */
@media all and (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top, 20px); }
    .mnav-bar { padding-bottom: env(safe-area-inset-bottom, 8px); }
}

/* ===== LIGHT THEME ===== */
.light-theme {
    --bg-body: #f3f4f6;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-glass-border: rgba(0, 0, 0, 0.08);
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --shadow-glass: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.light-theme body,
.light-theme .scanner-body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

.light-theme .glass,
.light-theme .sub-modal-content {
    background: var(--bg-glass) !important;
    border-color: var(--bg-glass-border) !important;
    box-shadow: var(--shadow-glass);
}

/* Textes */
.light-theme .text-white { color: var(--text-primary) !important; }
.light-theme .text-gray-400,
.light-theme .text-gray-500 { color: var(--text-secondary) !important; }
.light-theme .text-gray-600 { color: var(--text-muted) !important; }

/* Inputs */
.light-theme input[type="text"],
.light-theme input[type="email"],
.light-theme input[type="password"],
.light-theme input[type="number"],
.light-theme textarea,
.light-theme select {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--text-primary) !important;
}
.light-theme input::placeholder,
.light-theme textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Borders subtiles */
.light-theme .border-white\/5,
.light-theme .border-white\/10,
.light-theme .border-white\/06 {
    border-color: var(--border-subtle) !important;
}

/* Backgrounds transparents */
.light-theme .bg-white\/5,
.light-theme .bg-white\/\[0\.02\],
.light-theme .bg-white\/\[0\.05\] {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Modals overlays */
.light-theme .sub-modal-overlay,
.light-theme #confirm-modal,
.light-theme #success-modal {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Scanner */
.light-theme #reader {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Mobile nav */
.light-theme .mnav-bar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.light-theme .mnav-label {
    color: var(--text-secondary) !important;
}
.light-theme .mnav-item.active .mnav-label {
    color: #3b82f6 !important;
}

/* Scrollbars */
.light-theme ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
.light-theme ::-webkit-scrollbar-track {
    background: transparent;
}

/* Cards stats */
.light-theme .stat-value {
    color: var(--text-primary) !important;
}

/* Reward confirm */
.light-theme .reward-confirm-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
}
.light-theme .reward-confirm-card {
    background: var(--bg-glass) !important;
    border-color: var(--bg-glass-border) !important;
}
.light-theme .reward-confirm-title {
    color: var(--text-primary) !important;
}
.light-theme .reward-confirm-desc {
    color: var(--text-secondary) !important;
}

/* ===== GLOBAL FOCUS STATES ===== */
:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== LIGHT THEME EXTRAS ===== */
.light-theme button {
    color: var(--text-primary);
}
.light-theme button:hover {
    opacity: 0.85;
}
.light-theme .bg-blue-600 {
    background-color: #3b82f6;
}
.light-theme .bg-blue-600:hover {
    background-color: #2563eb;
}
.light-theme select {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--text-primary) !important;
}
.light-theme .text-gradient {
    -webkit-text-fill-color: currentColor;
}