/* =========================================================
   Theme: toggle button + dark theme
   Load AFTER home.css so these rules win on equal specificity.
   The dark theme is applied with <html data-theme="dark">.
   The light theme is simply your existing home.css.
   Tweak the --af-* values below to adjust the dark palette.
========================================================= */

:root {
    --af-surface: #f4f5f7;
    --af-border: rgba(15, 23, 42, 0.14);
    --af-accent: #2563eb;
}

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

    --af-bg: #0b0c0e;
    --af-surface: #15171b;
    --af-surface-2: #1c1f24;
    --af-text: #f1f3f5;
    --af-muted: #a3aab5;
    --af-border: rgba(255, 255, 255, 0.14);
    --af-accent: #60a5fa;
}

/* ---------- Toggle button ---------- */

.theme-toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--af-border);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
    background: rgba(128, 128, 128, 0.15);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--af-accent);
    outline-offset: 2px;
}

/* Light theme shows the moon (switch to dark); dark theme shows the sun */
.theme-toggle .icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

/* ---------- Dark theme: page ---------- */

html[data-theme="dark"] body {
    background: var(--af-bg);
    color: var(--af-text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: var(--af-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li {
    color: var(--af-muted);
}

/* Navigation */
html[data-theme="dark"] nav {
    background: rgba(11, 12, 14, 0.85);
    border-color: var(--af-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .login {
    color: var(--af-text);
}

html[data-theme="dark"] .mobile-menu-button span {
    background: var(--af-text);
}

/* Logo: turns a dark logo light. Remove this rule if you
   supply a separate light version of the logo. */
html[data-theme="dark"] .logo img {
    filter: brightness(0) invert(1);
}

/* Sections */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .trust,
html[data-theme="dark"] .process,
html[data-theme="dark"] .industries,
html[data-theme="dark"] .plans,
html[data-theme="dark"] .contact,
html[data-theme="dark"] .cta {
    background: var(--af-bg);
    border-color: var(--af-border);
}

html[data-theme="dark"] .trust {
    background: var(--af-surface);
}

html[data-theme="dark"] .trust-row span,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .section-description,
html[data-theme="dark"] .hero-description {
    color: var(--af-muted);
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .hero h1 {
    color: var(--af-text);
}

/* Pricing: colours are handled in plans.css */

/* Contact form */
html[data-theme="dark"] .contact-form-wrapper {
    background: var(--af-surface);
    border-color: var(--af-border);
}

html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .contact-detail a,
html[data-theme="dark"] .contact-detail span:not(.contact-detail-label) {
    color: var(--af-text);
}

html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form textarea {
    background: var(--af-bg);
    border-color: var(--af-border);
    color: var(--af-text);
}

html[data-theme="dark"] .contact-form ::placeholder {
    color: var(--af-muted);
}

html[data-theme="dark"] .contact-footer {
    border-color: var(--af-border);
    color: var(--af-muted);
}

/* CTA */
html[data-theme="dark"] .cta-box {
    background: var(--af-surface-2);
    border: 1px solid var(--af-border);
}

/* Footer */
html[data-theme="dark"] footer {
    background: #070708;
    border-color: var(--af-border);
}

html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-description,
html[data-theme="dark"] .copyright {
    color: var(--af-muted);
}

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

/* Policy / careers pages (when they load this file) */
html[data-theme="dark"] .legal-content p,
html[data-theme="dark"] .legal-content li {
    color: var(--af-muted);
}

/* Smooth colour change when switching (skipped for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    body,
    nav,
    section,
    footer {
        transition: background-color 0.25s ease, color 0.25s ease,
                    border-color 0.25s ease;
    }
}