/* ==========================================================
   Urban Customs
   dark-mode.css
   Compatible with theme.js
   ========================================================== */

html{
    color-scheme:light;
}

html[data-theme="dark"]{
    color-scheme:dark;

    --bg:#0f1115;
    --surface:#171a21;
    --surface-2:#20242d;
    --text:#f3f4f6;
    --muted:#b8bcc5;
    --border:#2f3542;
    --primary:#d4af37;
    --shadow:0 12px 35px rgba(0,0,0,.45);
}

html[data-theme="dark"] body{
    background:var(--bg);
    color:var(--text);
    transition:
        background .35s ease,
        color .35s ease;
}

/* Header */

html[data-theme="dark"] header{
    background:rgba(15,17,21,.92);
    border-bottom:1px solid var(--border);
}

html[data-theme="dark"] .nav-link{
    color:var(--text);
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active{
    color:var(--primary);
}

/* Cards */

html[data-theme="dark"] .service-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .feature-box,
html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .comparison-container,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
    background:var(--surface);
    color:var(--text);
    border-color:var(--border);
    box-shadow:var(--shadow);
}

/* Sections */

html[data-theme="dark"] .section-padding:nth-child(even){
    background:var(--surface);
}

/* Buttons */

html[data-theme="dark"] .btn-outline{
    border-color:var(--primary);
    color:var(--primary);
}

html[data-theme="dark"] .btn-outline:hover{
    background:var(--primary);
    color:#111;
}

/* Forms */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:var(--muted);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(212,175,55,.2);
}

/* Gallery */

html[data-theme="dark"] .gallery-filter{
    background:var(--surface-2);
    color:var(--text);
}

html[data-theme="dark"] .gallery-filter.active{
    background:var(--primary);
    color:#111;
}

/* Footer */

html[data-theme="dark"] .footer{
    background:#090b0f;
    color:var(--muted);
}

html[data-theme="dark"] .footer a:hover{
    color:var(--primary);
}

/* Theme Button */

.theme-toggle{
    transition:transform .3s ease;
}

.theme-toggle:hover{
    transform:rotate(20deg);
}

html[data-theme="dark"] .theme-toggle i::before{
    content:"\f185"; /* sun icon if Font Awesome loaded */
}

/* Scrollbar */

html[data-theme="dark"]::-webkit-scrollbar{
    width:10px;
}

html[data-theme="dark"]::-webkit-scrollbar-track{
    background:#12151b;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb{
    background:#4b5563;
    border-radius:10px;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb:hover{
    background:var(--primary);
}

/* Selection */

html[data-theme="dark"] ::selection{
    background:var(--primary);
    color:#111;
}

/* Images */

html[data-theme="dark"] img{
    filter:brightness(.95);
}