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

@import './components/footer.css';
@import './components/navbar.css';
@import './components/buttons.css';
@import './components/cards.css';
@import './components/forms.css';
@import './components/adblock-detector.css';
@import './components/bootstrap-dark.css';
@import './pages/admin.css';
@import './pages/payment-link.css';
@import './pages/auth.css';

:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --success: #22c55e;
    --success-hover: #16a34a;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --warning: #f59e0b;
    --dark-bg: #0f172a;
    --dark-surface: #1e293b;
    --dark-surface-light: #334155;
    --dark-border: #475569;
    --dark-text: #f1f5f9;
    --dark-text-secondary: #cbd5e1;
    --light-bg: #f0f2f5;
    --light-surface: #ffffff;
    --light-surface-dark: #e2e8f0;
    --light-border: #cbd5e1;
    --light-text: #334155;
    --light-text-secondary: #64748b;
    --transition-speed: 0.3s;
}

* {
    transition: background-color var(--transition-speed) ease, 
                color var(--transition-speed) ease, 
                border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--dark-bg);
    color: var(--dark-text);
    min-height: 100vh;
    padding-top: 70px;
    margin: 0;
    line-height: 1.6;
}

body.light-mode {
    background: var(--light-bg);
    color: var(--light-text);
}

.light-mode .navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.light-mode .navbar-brand {
    color: var(--light-text) !important;
}

.light-mode .nav-link {
    color: var(--light-text-secondary) !important;
}

.light-mode .nav-link:hover,
.light-mode .nav-link.active {
    color: var(--light-text) !important;
}

.light-mode .card {
    background: var(--light-surface);
    border: 1px solid var(--light-border);
    color: var(--light-text);
}

.light-mode .card-text {
    color: var(--light-text-secondary);
}

.container {
    max-width: 1200px;
}

main {
    min-height: calc(100vh - 180px);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-surface);
}

.light-mode ::-webkit-scrollbar-track {
    background: var(--light-border);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

@media (max-width: 768px) {
    body {
        padding-top: 65px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Theme-aware helpers to ensure good contrast in both modes */
.text-muted { color: var(--dark-text-secondary) !important; }
.light-mode .text-muted { color: var(--light-text-secondary) !important; }

/* Ensure card text inherits theme variables */
.card .card-title { color: var(--dark-text); }
.light-mode .card .card-title { color: var(--light-text); }
.card .card-text, .card .small, .card .product-category { color: var(--dark-text-secondary); }
.light-mode .card .card-text, .light-mode .card .small, .light-mode .card .product-category { color: var(--light-text-secondary); }

/* Buttons in light-mode adjust if needed */
.light-mode .btn-outline-primary { color: var(--primary); border-color: var(--primary); }

/* ensure links visible */
a { color: inherit; }
.light-mode a { color: inherit; }