/* Dark mode theme — activated when .
Loaded after base.css/layout.css so the cascade naturally overrides light tokens.
Tokens mirror light mode names so all existing var(--*) references update at once.
*/
:root[data-theme="dark"]{
--canvas:#222321;
--card:#2C2D2B;
--ink:#E8E7E4;
--ink-soft:#B4BFAE;
--teal:#2F5D50;
--teal-dark:#20423A;
--ochre:#C98A2C;
--ochre-dark:#A66E1C;
--line:#3E3F3D;
--line-soft:#353634;
--error:#B4462F;
--radius:14px;
}
/* Transparent header surface — keep the light-mode glass look in dark too. */
:root[data-theme="dark"] .hp-header{
background:rgba(44,45,43,0.75);
border-bottom-color:var(--line-soft);
}
/* Theme toggle button — compact ghost icon button next to the language switcher. */
.theme-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border:none;
border-radius:999px;
background:transparent;
color:var(--ink-soft);
cursor:pointer;
flex-shrink:0;
transition:color .18s ease, background-color .18s ease, transform .12s ease;
}
.theme-toggle:hover{
background:rgba(0,0,0,0.06);
color:var(--ink);
}
.theme-toggle:active{
transform:scale(0.92);
}
:root[data-theme="dark"] .theme-toggle:hover{
background:rgba(255,255,255,0.08);
}
.theme-toggle:focus-visible{
outline:2px solid var(--teal);
outline-offset:2px;
}
.theme-toggle .theme-icon{display:block;width:19px;height:19px;}
.theme-toggle-wrap{display:inline-flex;align-items:center;gap:4px;}
:root{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;--teal:#86C6AE;--teal-dark:#A3DCC5;--error:#F29985;}
:root[data-theme="dark"] .input-group input:focus,
:root[data-theme="dark"] .input-group select:focus,
:root[data-theme="dark"] label.checkbox-label:focus-within,
:root[data-theme="dark"] .quantity-field input:focus,
:root[data-theme="dark"] .result-list li:hover,
:root[data-theme="dark"] .result-list .copy-btn{background:var(--card);}
:root[data-theme="dark"] .result-list .copy-btn:hover{background:var(--teal);color:var(--canvas);}
:root[data-theme="dark"] .error-message{background:#422E29;}
@media(max-width:600px){.hp-header-actions{gap:8px;}}
/* Homepage category sections paint their light background via inline style
(#F7F8F5) — !important is required to win over the style attribute. */
:root[data-theme="dark"] [data-tool-category-section]{
background-color:var(--canvas) !important;
}
/* Footer uses a hardcoded off-white in homepage.css / utilities.css. */
:root[data-theme="dark"] .hp-footer{
background:var(--canvas);
}
/* FAQ summary hover tint was tuned for light surfaces. */
:root[data-theme="dark"] .hp-faq-wrap .faq-item summary:hover{
background:rgba(134,198,174,.08);
}
/* SaaSHub badge — already has its own CSS; no dark override needed, it is an external PNG. */