@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --brand-primary: #0f172a;
    --brand-secondary: #1e293b;
    --brand-accent: #0ea5e9;
    --brand-surface: #f8fafc;
    --brand-text: #0f172a;
    --brand-primary-rgb: 15 23 42;
    --brand-secondary-rgb: 30 41 59;
    --brand-accent-rgb: 14 165 233;
    --brand-surface-rgb: 248 250 252;
    --brand-text-rgb: 15 23 42;
}

body {
    background-color: var(--brand-surface);
    color: var(--brand-text);
}

/* User app light-mode theme bridging:
   map legacy slate utilities to branding variables so theme changes apply app-wide. */
body.user-app:not(.user-dark) .bg-white {
    background-color: #ffffff !important;
}

body.user-app:not(.user-dark) .bg-slate-50,
body.user-app:not(.user-dark) .bg-gray-50 {
    background-color: rgba(var(--brand-primary-rgb), 0.05) !important;
}

body.user-app:not(.user-dark) .bg-slate-50\/95 {
    background-color: rgba(var(--brand-surface-rgb), 0.95) !important;
}

body.user-app:not(.user-dark) .bg-slate-100,
body.user-app:not(.user-dark) .bg-gray-100 {
    background-color: rgba(var(--brand-primary-rgb), 0.09) !important;
}

body.user-app:not(.user-dark) .bg-slate-900,
body.user-app:not(.user-dark) .bg-gray-900 {
    background-color: var(--brand-primary) !important;
}

body.user-app:not(.user-dark) .bg-slate-800,
body.user-app:not(.user-dark) .bg-gray-800 {
    background-color: var(--brand-secondary) !important;
}

body.user-app:not(.user-dark) .border-slate-100,
body.user-app:not(.user-dark) .border-gray-100 {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body.user-app:not(.user-dark) .border-slate-200,
body.user-app:not(.user-dark) .border-gray-200 {
    border-color: rgba(148, 163, 184, 0.28) !important;
}

body.user-app:not(.user-dark) .border-slate-200\/80 {
    border-color: rgba(148, 163, 184, 0.24) !important;
}

body.user-app:not(.user-dark) .border-slate-300,
body.user-app:not(.user-dark) .border-gray-300 {
    border-color: rgba(100, 116, 139, 0.36) !important;
}

body.user-app:not(.user-dark) .text-slate-900,
body.user-app:not(.user-dark) .text-gray-900 {
    color: var(--brand-text) !important;
}

body.user-app:not(.user-dark) .text-slate-800,
body.user-app:not(.user-dark) .text-gray-800 {
    color: rgba(var(--brand-text-rgb), 0.9) !important;
}

body.user-app:not(.user-dark) .text-slate-700,
body.user-app:not(.user-dark) .text-gray-700 {
    color: rgba(var(--brand-text-rgb), 0.82) !important;
}

body.user-app:not(.user-dark) .text-slate-600,
body.user-app:not(.user-dark) .text-gray-600 {
    color: rgba(var(--brand-text-rgb), 0.72) !important;
}

body.user-app:not(.user-dark) .text-slate-500,
body.user-app:not(.user-dark) .text-gray-500 {
    color: rgba(var(--brand-text-rgb), 0.62) !important;
}

body.user-app:not(.user-dark) .text-slate-400,
body.user-app:not(.user-dark) .text-gray-400 {
    color: rgba(var(--brand-text-rgb), 0.52) !important;
}

body.user-app:not(.user-dark) .ring-slate-200,
body.user-app:not(.user-dark) .ring-gray-200 {
    --tw-ring-color: rgba(148, 163, 184, 0.28) !important;
}

body.user-app:not(.user-dark) .focus\:border-slate-500:focus,
body.user-app:not(.user-dark) .focus\:border-indigo-500:focus {
    border-color: rgba(var(--brand-primary-rgb), 0.5) !important;
}

body.user-app:not(.user-dark) .focus\:ring-slate-400:focus,
body.user-app:not(.user-dark) .focus\:ring-indigo-500:focus,
body.user-app:not(.user-dark) .focus-visible\:ring-slate-400:focus-visible {
    --tw-ring-color: rgba(var(--brand-primary-rgb), 0.35) !important;
}

body.user-app:not(.user-dark) .hover\:bg-slate-50:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.07) !important;
}

body.user-app:not(.user-dark) .hover\:bg-slate-100:hover,
body.user-app:not(.user-dark) .hover\:bg-gray-100:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.11) !important;
}

body.user-app:not(.user-dark) .hover\:bg-slate-800:hover {
    background-color: var(--brand-secondary) !important;
}

body.user-app:not(.user-dark) .hover\:border-slate-300:hover,
body.user-app:not(.user-dark) .hover\:border-slate-400:hover {
    border-color: rgba(100, 116, 139, 0.42) !important;
}

.global-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.78);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.global-page-loader.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.global-page-loader__box {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 0.58rem 0.95rem;
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.45);
}

.global-page-loader__spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid #94a3b8;
    border-top-color: #0f172a;
    animation: global-page-loader-spin 0.75s linear infinite;
}

.global-page-loader__text {
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #0f172a;
    font-weight: 600;
}

@keyframes global-page-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.brand-primary-bg {
    background-color: var(--brand-primary);
}

.brand-secondary-bg {
    background-color: var(--brand-secondary);
}

.brand-accent-bg {
    background-color: var(--brand-accent);
}

.brand-primary-text {
    color: var(--brand-primary);
}

.user-balance-card {
    color: #ffffff;
    background: linear-gradient(140deg, var(--brand-primary) 0%, var(--brand-secondary) 58%, var(--brand-accent) 100%);
}

.user-balance-card--wallet {
    background: linear-gradient(140deg, var(--brand-secondary) 0%, var(--brand-primary) 54%, var(--brand-accent) 100%);
}

.user-balance-card__kicker {
    color: rgba(226, 232, 240, 0.9);
}

.user-balance-card__muted {
    color: rgba(226, 232, 240, 0.85);
}

.user-balance-card__chip {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.user-balance-card__action {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.user-balance-card__action:hover,
.user-balance-card__chip:hover {
    background: rgba(255, 255, 255, 0.2);
}

body.user-dark {
    background: #020617;
    color: #e2e8f0;
}

body.user-dark .global-page-loader {
    background: rgba(2, 6, 23, 0.72);
}

body.user-dark .global-page-loader__box {
    border-color: #334155;
    background: #0f172a;
}

body.user-dark .global-page-loader__spinner {
    border-color: #475569;
    border-top-color: #e2e8f0;
}

body.user-dark .global-page-loader__text {
    color: #e2e8f0;
}

body.user-dark .user-balance-card {
    background: linear-gradient(145deg, #020617 0%, #0f172a 55%, #1e293b 100%);
    border: 1px solid #334155;
    color: #f8fafc;
}

body.user-dark .user-balance-card--wallet {
    background: #0f172a;
}

body.user-dark .user-balance-card__kicker,
body.user-dark .user-balance-card__muted {
    color: #cbd5e1;
}

body.user-dark .user-balance-card__chip {
    border-color: #475569;
    background: rgba(15, 23, 42, 0.58);
    color: #f8fafc;
}

body.user-dark .user-balance-card__action {
    border-color: #334155;
    background: rgba(15, 23, 42, 0.5);
    color: #f8fafc;
}

body.user-dark .user-balance-card__action:hover,
body.user-dark .user-balance-card__chip:hover {
    background: rgba(30, 41, 59, 0.8);
}

body.user-dark .bg-white {
    background-color: #0f172a !important;
}

body.user-dark button.bg-white,
body.user-dark a.bg-white {
    background-color: #1e293b !important;
}

body.user-dark button.bg-slate-900,
body.user-dark a.bg-slate-900 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.user-dark .bg-slate-50,
body.user-dark .bg-gray-50 {
    background-color: #020617 !important;
}

body.user-dark .bg-slate-100,
body.user-dark .bg-gray-100 {
    background-color: #111827 !important;
}

body.user-dark .text-slate-900,
body.user-dark .text-gray-900,
body.user-dark .text-gray-800 {
    color: #f8fafc !important;
}

body.user-dark .text-slate-700,
body.user-dark .text-gray-700,
body.user-dark .text-slate-600,
body.user-dark .text-gray-600,
body.user-dark .text-slate-500,
body.user-dark .text-gray-500 {
    color: #cbd5e1 !important;
}

body.user-dark .text-slate-400,
body.user-dark .text-gray-400 {
    color: #cbd5e1 !important;
}

body.user-dark .text-slate-300,
body.user-dark .text-gray-300 {
    color: #e2e8f0 !important;
}

body.user-dark .border-slate-200,
body.user-dark .border-gray-200,
body.user-dark .border-gray-300 {
    border-color: #334155 !important;
}

body.user-dark .border-slate-300,
body.user-dark .border-slate-400 {
    border-color: #475569 !important;
}

body.user-dark .border-slate-100,
body.user-dark .border-gray-100,
body.user-dark .border-slate-300 {
    border-color: #1f2937 !important;
}

body.user-dark .ring-slate-200,
body.user-dark .ring-gray-200 {
    --tw-ring-color: #334155 !important;
}

body.user-dark .ring-black {
    --tw-ring-color: rgba(15, 23, 42, 0.7) !important;
}

body.user-dark select,
body.user-dark input,
body.user-dark textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.user-dark select:focus,
body.user-dark input:focus,
body.user-dark textarea:focus {
    border-color: #475569 !important;
    box-shadow: 0 0 0 1px #475569 !important;
}

body.user-dark select option {
    background-color: #0f172a;
    color: #e2e8f0;
}

body.user-dark input::placeholder,
body.user-dark textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

body.user-dark button {
    color: inherit;
}

body.user-dark .text-emerald-700,
body.user-dark .text-emerald-800,
body.user-dark .text-amber-700,
body.user-dark .text-amber-800,
body.user-dark .text-rose-700,
body.user-dark .text-rose-800,
body.user-dark .text-sky-700,
body.user-dark .text-indigo-700,
body.user-dark .text-violet-700 {
    color: #e2e8f0 !important;
}

body.user-dark .text-emerald-900,
body.user-dark .text-amber-900,
body.user-dark .text-rose-900,
body.user-dark .text-sky-900,
body.user-dark .text-indigo-900,
body.user-dark .text-violet-900 {
    color: #f8fafc !important;
}

body.user-dark .bg-emerald-50 {
    background-color: #052e2b !important;
}

body.user-dark .bg-amber-50 {
    background-color: #3f2a07 !important;
}

body.user-dark .bg-rose-50 {
    background-color: #3f1020 !important;
}

body.user-dark .bg-indigo-50 {
    background-color: #1e293b !important;
}

body.user-dark .ring-emerald-200 {
    --tw-ring-color: #065f46 !important;
}

body.user-dark .ring-amber-200 {
    --tw-ring-color: #92400e !important;
}

body.user-dark .ring-rose-200 {
    --tw-ring-color: #9f1239 !important;
}

body.user-dark .border-amber-200 {
    border-color: #92400e !important;
}

body.user-dark .border-emerald-200 {
    border-color: #065f46 !important;
}

body.user-dark .border-rose-200 {
    border-color: #9f1239 !important;
}

body.user-dark .border-indigo-200 {
    border-color: #334155 !important;
}

body.user-dark .cashback-expiry-banner {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.user-dark .wallet-transfer-input {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

body.user-dark .wallet-transfer-input::placeholder {
    color: #94a3b8 !important;
}

body.user-dark .wallet-transfer-input:-webkit-autofill,
body.user-dark .wallet-transfer-input:-webkit-autofill:hover,
body.user-dark .wallet-transfer-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e2e8f0 !important;
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0px 1000px #0f172a inset !important;
}

body.user-dark .hover\:bg-slate-50:hover {
    background-color: #1e293b !important;
}

body.user-dark .hover\:bg-slate-100:hover,
body.user-dark .hover\:bg-gray-100:hover {
    background-color: #1f2937 !important;
}

body.user-dark .hover\:border-slate-300:hover,
body.user-dark .hover\:border-slate-400:hover {
    border-color: #64748b !important;
}

body.user-dark .hover\:bg-slate-800:hover {
    background-color: #1e293b !important;
}

body.user-dark .focus\:border-slate-500:focus {
    border-color: #64748b !important;
}

body.user-dark .focus\:ring-slate-400:focus {
    --tw-ring-color: #64748b !important;
}

body.user-dark .focus-visible\:ring-slate-400:focus-visible {
    --tw-ring-color: #94a3b8 !important;
}

body.user-dark .focus-visible\:outline-none:focus-visible {
    outline: 2px solid #94a3b8 !important;
    outline-offset: 2px;
}

body.user-dark .shadow-sm,
body.user-dark .shadow,
body.user-dark .shadow-lg {
    --tw-shadow-color: rgba(15, 23, 42, 0.8);
}
