/* assets/css/styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #0f5e3a;
    --primary-dark: #0a4a2e;
    --primary-light: #e8f2ec;
    --primary-soft: #f0f7f2;
    --accent: #b38b4d;
    --accent-light: #faf3e8;
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}

/* ========== DARK MODE STYLES ========== */
body.dark-mode {
    --white: #1a1a1a;
    --gray-50: #0f0f0f;
    --gray-100: #1a1a1a;
    --gray-200: #2a2a2a;
    --gray-300: #3a3a3a;
    --gray-400: #4a4a4a;
    --gray-500: #8a8a8a;
    --gray-600: #a0a0a0;
    --gray-700: #b0b0b0;
    --gray-800: #c0c0c0;
    --gray-900: #d0d0d0;
    --primary-light: #1e2a1e;
    --accent-light: #2a241a;
}

body.dark-mode {
    background: #0a0a0a;
    color: #e0e0e0;
}

body.dark-mode .bg-pattern {
    opacity: 0.2;
}

body.dark-mode .navbar {
    background: rgba(26,26,26,0.98);
}

body.dark-mode .navbar-brand {
    color: var(--gray-200) !important;
}

body.dark-mode .nav-link {
    color: var(--gray-400) !important;
}

body.dark-mode .nav-link:hover {
    background: var(--primary-light);
}

body.dark-mode .mega-menu {
    background: var(--white);
}

body.dark-mode .mega-menu-featured {
    background: var(--gray-100);
}

body.dark-mode .btn-login {
    background: transparent;
    border-color: var(--gray-300);
    color: var(--gray-400);
}

body.dark-mode .btn-login:hover {
    background: var(--gray-100);
}

body.dark-mode .tabs-nav {
    background: var(--white);
}

body.dark-mode .search-wrapper .input-group-text,
body.dark-mode .search-wrapper .form-control {
    background: var(--white);
    color: var(--gray-700);
}

body.dark-mode .hero {
    background: var(--white);
}

body.dark-mode .feature-card {
    background: rgba(26,26,26,0.8);
}

body.dark-mode .feature-card:hover {
    background: var(--white);
}

body.dark-mode .stat-card,
body.dark-mode .market-card,
body.dark-mode .resource-card,
body.dark-mode .directory-card,
body.dark-mode .registration-card {
    background: var(--white);
}

body.dark-mode .footer {
    background: var(--white);
}

body.dark-mode .status-badge {
    background: var(--gray-100);
}

body.dark-mode .toast {
    background: var(--white);
}

body.dark-mode .code-block {
    background: #2a2a2a;
    color: #e0e0e0;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--gray-50);
    color: var(--gray-700);
    line-height: 1.5;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Professional Background */
.bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 0% 0%, rgba(15,94,58,0.03) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(179,139,77,0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease;
}