:root {
    --ios-text-primary: #0f172a;
    --ios-text-secondary: #475569;
    --ios-nav-bg: rgba(255, 255, 255, 0.76);
    --ios-surface: rgba(255, 255, 255, 0.86);
    --ios-surface-strong: rgba(255, 255, 255, 0.94);
    --ios-border: rgba(255, 255, 255, 0.84);
    --ios-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.33);
    --ios-bg-top: #f7f9fd;
    --ios-bg-bottom: #eef3fb;
    --ios-footer-bg: rgba(2, 6, 23, 0.92);
    --ios-footer-border: rgba(148, 163, 184, 0.2);
    --ios-btn-bg: rgba(255, 255, 255, 0.75);
    --ios-btn-border: rgba(148, 163, 184, 0.25);
    --ios-btn-text: #0f172a;
    --ios-btn-hover: rgba(226, 232, 240, 0.65);
}

:root[data-theme="dark"] {
    --ios-text-primary: #f2f2f7;
    --ios-text-secondary: #aeaeb2;
    --ios-nav-bg: rgba(28, 28, 30, 0.82);
    --ios-surface: rgba(28, 28, 30, 0.86);
    --ios-surface-strong: rgba(44, 44, 46, 0.92);
    --ios-border: rgba(99, 99, 102, 0.6);
    --ios-shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.75);
    --ios-bg-top: #000000;
    --ios-bg-bottom: #111113;
    --ios-footer-bg: rgba(10, 10, 12, 0.95);
    --ios-footer-border: rgba(72, 72, 74, 0.6);
    --ios-btn-bg: rgba(44, 44, 46, 0.9);
    --ios-btn-border: rgba(99, 99, 102, 0.65);
    --ios-btn-text: #f2f2f7;
    --ios-btn-hover: rgba(58, 58, 60, 0.9);
}

:root[data-theme="dark"] body {
    color: var(--ios-text-primary);
    background: linear-gradient(170deg, var(--ios-bg-top) 0%, var(--ios-bg-bottom) 100%);
}

:root[data-theme="dark"] nav {
    background: var(--ios-nav-bg) !important;
    border-bottom-color: var(--ios-border) !important;
}

:root[data-theme="dark"] #mobile-dropdown {
    background: var(--ios-surface-strong) !important;
    border-top-color: var(--ios-border) !important;
}

:root[data-theme="dark"] footer {
    background: var(--ios-footer-bg) !important;
    border-top-color: var(--ios-footer-border) !important;
}

#theme-toggle-desktop,
#theme-toggle-mobile {
    border-radius: 999px;
    border: 1px solid var(--ios-btn-border);
    background: var(--ios-btn-bg);
    color: var(--ios-btn-text);
    transition: all 180ms ease;
}

#theme-toggle-desktop:hover,
#theme-toggle-mobile:hover {
    background: var(--ios-btn-hover);
}

:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-slate-600 {
    color: var(--ios-text-primary) !important;
}

:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-slate-300 {
    color: var(--ios-text-secondary) !important;
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-white\/95,
:root[data-theme="dark"] .bg-white\/85,
:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-slate-50\/60 {
    background-color: rgba(28, 28, 30, 0.9) !important;
}

:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-white\/70,
:root[data-theme="dark"] .ring-slate-200\/70,
:root[data-theme="dark"] .border-slate-800,
:root[data-theme="dark"] .border-slate-700 {
    border-color: rgba(99, 99, 102, 0.58) !important;
}

:root[data-theme="dark"] .hover\:bg-slate-50:hover,
:root[data-theme="dark"] .hover\:bg-white:hover,
:root[data-theme="dark"] .group:hover {
    background-color: rgba(44, 44, 46, 0.9) !important;
}

:root[data-theme="dark"] .bg-black\/20 {
    background: rgba(28, 28, 30, 0.62) !important;
    border-color: rgba(99, 99, 102, 0.44) !important;
}

:root[data-theme="dark"] .bg-emerald-50 {
    background: rgba(10, 132, 255, 0.14) !important;
    border-color: rgba(10, 132, 255, 0.28) !important;
    color: #8ec8ff !important;
}