:root {
    /* ============================================================
       DYPCE Growth OS — Design System Tokens (Brand Manual)
       ============================================================ */

    /* Brand Colors — Kinetic Enterprise */
    --primary: #000e23;
    --primary-light: #09C354;
    --primary-dark: #000714;
    --primary-50: #e6f9ed;
    --primary-100: #7cf992;
    --primary-500: #09C354;
    --primary-700: #006e2c;
    --primary-900: #002108;

    /* Navy — Structure */
    --navy: #001830;
    --navy-dark: #000e23;
    --navy-darkest: #000714;

    /* Accent — Amber/Gold */
    --yellow: #f6bd48;
    --yellow-dark: #b48205;

    /* Accent — Red/Error */
    --red: #ba1a1a;
    --red-dark: #93000a;

    /* Accent — Olive */
    --olive: #c2cf15;
    --olive-dark: #bcbe3c;

    /* Semantic */
    --success: #09C354;
    --warning: #f6bd48;
    --danger: #ba1a1a;
    --info: #001830;
    --whatsapp: #25D366;

    /* Kinetic Specific Colors */
    --slate-ice: #AFC5DA;
    --deep-space: #001830;
    --vibrant-lime: #09C354;
    --glass-surface: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --surface: #f7f9fb;

    /* Neutrals */
    --gray-50: #f7f9fb;
    --gray-100: #eceef0;
    --gray-200: #e0e3e5;
    --gray-300: #c4c6cf;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #43474e;
    --gray-700: #334155;
    --gray-800: #191c1e;
    --gray-900: #191c1e;

    /* Typography — Geist (titles) + Inter (body) */
    --font-titles: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 20px;
    --font-3xl: 24px;
    --font-4xl: 32px;
    --font-5xl: 48px;

    /* Spacing */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px;

    /* Radius */
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 16px;
    --radius-xl: 24px; --radius-full: 9999px;

    /* Shadows — Luminous Depth */
    --shadow-sm: 0 2px 8px rgba(0, 36, 72, 0.03);
    --shadow-md: 0 8px 24px rgba(0, 36, 72, 0.05);
    --shadow-lg: 0 16px 32px rgba(0, 36, 72, 0.08);
    --shadow-xl: 0 24px 48px rgba(0, 36, 72, 0.12);

    /* Layout */
    --sidebar-width: 280px;
    --header-height: 64px;
    --bottom-nav-height: 64px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-family); font-size: var(--font-md); color: var(--gray-900); background: var(--gray-50); line-height: 1.5; font-weight: 400; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-titles); font-weight: 700; color: var(--primary); }
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-light); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-family: var(--font-family); font-size: var(--font-md); font-weight: 500; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; }
.btn-primary { background: var(--primary); color: white; border: 1px solid rgba(255, 255, 255, 0.1); }
.btn-primary:hover { background: var(--navy-darkest); transform: translateY(-1px); }
.btn-secondary { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-200); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-danger { background: var(--danger); color: white; }
.btn-success { background: var(--success); color: var(--primary); font-weight: 600; }
.btn-success:hover { background: #079e44; color: white; }
.btn-ghost { background: transparent; color: var(--gray-600); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-sm); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--font-lg); }

/* Cards */
.card { background: var(--glass-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--glass-border); overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--glass-border); }
.card__body { padding: var(--space-5); }
.card--hoverable { transition: box-shadow 0.2s, transform 0.2s; }
.card--hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); font-size: var(--font-sm); font-weight: 500; border-radius: var(--radius-full); }
.badge-success { background: #e6f9ed; color: #006e2c; border: 1px solid rgba(9, 195, 84, 0.2); }
.badge-warning { background: #ffdea6; color: #5d4200; border: 1px solid rgba(246, 189, 72, 0.2); }
.badge-danger { background: #ffdad6; color: #93000a; border: 1px solid rgba(186, 26, 26, 0.2); }
.badge-info { background: #d4e3ff; color: #002448; border: 1px solid rgba(68, 96, 135, 0.2); }
.badge-neutral { background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
@keyframes loadingBar { 0% { width:0%; } 50% { width:70%; } 100% { width:100%; } }
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }


/* ===== DARK MODE ===== */
:root[data-theme="dark"] {
    /* Override variables that body/elements use */
    --gray-50: #000a18; /* Deep Navy background */
    --gray-100: #001224;
    --gray-200: #001830;
    --gray-300: #103254;
    --gray-400: #AFC5DA; /* Slate Ice */
    --gray-500: #718cb6;
    --gray-600: #718cb6;
    --gray-700: #AFC5DA;
    --gray-800: #eceef0;
    --gray-900: #ffffff;

    /* Override semantic colors for dark */
    --primary: #ffffff;
    --primary-light: #09C354;
    --primary-dark: #AFC5DA;
    --navy: #AFC5DA;
    --navy-dark: #001830;
    --navy-darkest: #000e23;

    --glass-surface: rgba(0, 24, 48, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Dark mode shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 32px rgba(0,0,0,0.5);
}

/* Body & base overrides */
:root[data-theme="dark"] body { background: #000a18; color: #eff1f3; }

/* Cards: transparent glass in dark */
:root[data-theme="dark"] .card { background: var(--glass-surface); border-color: var(--glass-border); }
:root[data-theme="dark"] .card__header { border-color: var(--glass-border); }

/* Sidebar */
:root[data-theme="dark"] .sidebar { background: #000e23; border-right-color: var(--glass-border); }
:root[data-theme="dark"] .sidebar .nav-item { color: var(--slate-ice); }
:root[data-theme="dark"] .sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.05); color: white; }
:root[data-theme="dark"] .sidebar .nav-item.active { background: rgba(9, 195, 84, 0.1); color: var(--vibrant-lime); }

/* Tables */
:root[data-theme="dark"] .data-table { border-color: var(--glass-border); }
:root[data-theme="dark"] .data-table th { background: #001830; color: var(--slate-ice); border-color: var(--glass-border); }
:root[data-theme="dark"] .data-table td { color: #eff1f3; border-color: var(--glass-border); }
:root[data-theme="dark"] .data-table tr:hover td { background: rgba(0, 24, 48, 0.4); }
:root[data-theme="dark"] .data-table tr:nth-child(even) td { background: rgba(0, 24, 48, 0.2); }

/* Inputs */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: #001830; color: #ffffff; border-color: var(--glass-border); }
:root[data-theme="dark"] input::placeholder { color: var(--slate-ice); opacity: 0.5; }

/* Modals */
:root[data-theme="dark"] .modal-content { background: #001830; border-color: var(--glass-border); }
:root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 10, 0.8); }

/* Buttons ghost/secondary */
:root[data-theme="dark"] .btn-secondary { background: #001830; color: #ffffff; border-color: var(--glass-border); }
:root[data-theme="dark"] .btn-ghost { color: var(--slate-ice); }
:root[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }

/* Badges keep contrast */
:root[data-theme="dark"] .badge-success { background: rgba(9, 195, 84, 0.15); color: #09C354; border-color: rgba(9, 195, 84, 0.25); }
:root[data-theme="dark"] .badge-warning { background: rgba(246, 189, 72, 0.15); color: #f6bd48; border-color: rgba(246, 189, 72, 0.25); }
:root[data-theme="dark"] .badge-danger { background: rgba(186, 26, 26, 0.15); color: #ba1a1a; border-color: rgba(186, 26, 26, 0.25); }
:root[data-theme="dark"] .badge-info { background: rgba(68, 96, 135, 0.15); color: #AFC5DA; border-color: rgba(68, 96, 135, 0.25); }
:root[data-theme="dark"] .badge-neutral { background: #001830; color: var(--slate-ice); }

/* Social/Marketing cards */
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .intent-card,
:root[data-theme="dark"] .suggestion-card,
:root[data-theme="dark"] .report-card,
:root[data-theme="dark"] .stage-item,
:root[data-theme="dark"] .flag-item,
:root[data-theme="dark"] .kpi-card { background: var(--glass-surface); border-color: var(--glass-border); color: #eff1f3; }

/* Text globally visible */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] strong { color: #ffffff; }
:root[data-theme="dark"] p, :root[data-theme="dark"] span, :root[data-theme="dark"] label { color: var(--slate-ice); }
:root[data-theme="dark"] .subtitle, :root[data-theme="dark"] .text-muted { color: var(--slate-ice); opacity: 0.7; }
:root[data-theme="dark"] .page-title { color: #ffffff; }

/* Main content area */
:root[data-theme="dark"] .main-content { background: #000a18; }
:root[data-theme="dark"] .top-header { background: rgba(0, 18, 36, 0.4); border-color: var(--glass-border); }

/* Marketing tabs */
:root[data-theme="dark"] .mtab, :root[data-theme="dark"] .atab { color: var(--slate-ice); }
:root[data-theme="dark"] .mtab:hover, :root[data-theme="dark"] .atab:hover { background: rgba(255, 255, 255, 0.05); color: white; }

/* Scrollbar */
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: #000a18; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #001830; }

/* Additional Dark Mode components */
:root[data-theme="dark"] .modal-content { background: #001224; border-color: var(--glass-border); color: #eff1f3; }
:root[data-theme="dark"] .modal-overlay { background: rgba(0, 5, 15, 0.85); }
:root[data-theme="dark"] .modal-header { border-color: var(--glass-border); }
:root[data-theme="dark"] .modal-close { color: var(--slate-ice); }
:root[data-theme="dark"] .modal-close:hover { background: rgba(255,255,255,0.05); color: white; }

/* Form fields in dark */
:root[data-theme="dark"] .form-row label { color: var(--slate-ice); }
:root[data-theme="dark"] .form-row select,
:root[data-theme="dark"] .form-row input,
:root[data-theme="dark"] .form-row textarea { background: #001830; color: #ffffff; border-color: var(--glass-border); }
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group select { background: #001830; color: #ffffff; border-color: var(--glass-border); }
:root[data-theme="dark"] .config-input { background: #001830; color: #ffffff; border-color: var(--glass-border); }
:root[data-theme="dark"] .search-input { background: #001830; color: #ffffff; border-color: var(--glass-border); }
:root[data-theme="dark"] .form-select { background: #001830; color: #ffffff; border-color: var(--glass-border); }

/* Calendar dark */
:root[data-theme="dark"] .cal-day { background: #001224; }
:root[data-theme="dark"] .cal-day.empty { background: #000a18; }
:root[data-theme="dark"] .cal-day.today { background: rgba(9, 195, 84, 0.15); }
:root[data-theme="dark"] .day-num { color: #eff1f3; }

/* Pipeline dark */
:root[data-theme="dark"] .pipeline-column__header { background: #001224; }

/* Cards with hardcoded white BG in dark */
:root[data-theme="dark"] .mkt-engagement,
:root[data-theme="dark"] .social-sidebar,
:root[data-theme="dark"] .account-item,
:root[data-theme="dark"] .template-card,
:root[data-theme="dark"] .rule-card,
:root[data-theme="dark"] .report-result { background: var(--glass-surface); border-color: var(--glass-border); color: #eff1f3; }

/* Notification dropdown */
:root[data-theme="dark"] .notif-dropdown { background: #001224; border-color: var(--glass-border); }
:root[data-theme="dark"] .notif-dropdown__header { background: #000a18; border-color: var(--glass-border); }
:root[data-theme="dark"] .notif-item { border-color: var(--glass-border); }
:root[data-theme="dark"] .notif-unread { background: rgba(9, 195, 84, 0.08); }

/* Sidebar footer/theme toggle in dark */
:root[data-theme="dark"] .sidebar-footer { border-color: var(--glass-border); }
:root[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.05); color: #ffffff; border-color: var(--glass-border); }
:root[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.1); }

/* Auto tabs dark */
:root[data-theme="dark"] .auto-tabs { background: #000a18; }
:root[data-theme="dark"] .auto-tab { color: var(--slate-ice); }
:root[data-theme="dark"] .auto-tab.active { background: #001224; color: #ffffff; }

/* Existing elements with white BG */
:root[data-theme="dark"] .intent-content { background: #000a18; color: var(--slate-ice); }
:root[data-theme="dark"] .sug-type { background: #001830; color: var(--slate-ice); }
:root[data-theme="dark"] .tag { background: #001830; color: var(--slate-ice); }
:root[data-theme="dark"] .var-tag { background: #001830; color: var(--slate-ice); }
:root[data-theme="dark"] .rm { background: #000a18; }
:root[data-theme="dark"] .funnel-bar-wrap { background: #001830; }
:root[data-theme="dark"] .score-bar-track { background: #001830; }

/* Login card in dark */
:root[data-theme="dark"] .login-card { background: #001224; }
:root[data-theme="dark"] .login-logo { color: #ffffff; }

/* Fix badge-seg/role in dark */
:root[data-theme="dark"] .badge-seg { background: rgba(68, 96, 135, 0.2); color: var(--slate-ice); }
:root[data-theme="dark"] .badge-role { border: 1px solid var(--glass-border); }