/* ==========================================================================
   Public site — dark mode corrections
   --------------------------------------------------------------------------
   Same failure as the admin panel, in the marketing pages. Sections and cards
   paint themselves with an opaque light `linear-gradient()` or a literal
   #ffffff, while the text colour comes from the dark tokens. Because a
   `background-image` paints over `background-color`, the dark-mode remap never
   reached them — the hero slide measured 1.02:1, effectively invisible.

   Two distinct causes are handled here:

   1. Light surfaces — hero slides, "section-light" bands, the auth card.
   2. Brand fills — `--ls-brand-600` is lifted to #818cf8 in dark mode so brand
      TEXT stays legible on dark surfaces. Behind white text it only reaches
      2.4-3.0:1, so filled brand elements take dark ink instead. Dimming the
      brand itself would undo the lift everywhere it is used as text.

   Scoped to :root[data-theme="dark"] so light mode is untouched. The :root
   prefix is load-bearing: pages/home.php and the auth pages carry their own
   <style> blocks, which sit after external stylesheets in the head and would
   otherwise win on source order at equal specificity.

   Must load after every stylesheet that hardcodes a light background, and
   before squared.css (which only touches radius and appearance).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .hero-slide,
:root[data-theme="dark"] .hero-slide.active,
:root[data-theme="dark"] .hero-slider,
:root[data-theme="dark"] .hero-section,
:root[data-theme="dark"] .hero {
    background-image: linear-gradient(135deg, var(--ls-surface) 0%, rgba(99, 102, 241, .14) 100%);
    background-color: var(--ls-bg);
}

:root[data-theme="dark"] .hero-slide h1,
:root[data-theme="dark"] .hero-slide h2,
:root[data-theme="dark"] .hero-content h1,
:root[data-theme="dark"] .hero-title {
    color: var(--ls-text);
}

:root[data-theme="dark"] .hero-description,
:root[data-theme="dark"] .hero-slide p,
:root[data-theme="dark"] .hero-subtitle {
    color: var(--ls-text-secondary);
}

/* The gradient-clipped headline word. On a dark slide the lifted brand ramp
   reads well; it only needs the stops raised so the darker end does not sink
   into the surface. */
:root[data-theme="dark"] .text-gradient {
    background-image: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Slider dots sat on a light track. */
:root[data-theme="dark"] .hero-dot,
:root[data-theme="dark"] .slider-dot,
:root[data-theme="dark"] .hero-dots span {
    background-color: var(--ls-border-strong);
}

:root[data-theme="dark"] .hero-dot.active,
:root[data-theme="dark"] .slider-dot.active,
:root[data-theme="dark"] .hero-dots span.active {
    background-color: var(--ls-brand-600);
}

/* --------------------------------------------------------------------------
   Light section bands
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .section-light,
:root[data-theme="dark"] .section-darker,
:root[data-theme="dark"] .contact-hero-section,
:root[data-theme="dark"] .about-hero-section,
:root[data-theme="dark"] .about-content-section,
:root[data-theme="dark"] .services-section,
:root[data-theme="dark"] .features-section,
:root[data-theme="dark"] .steps-section,
:root[data-theme="dark"] .cta-section {
    background-image: none;
    background-color: var(--ls-bg);
    color: var(--ls-text);
}

:root[data-theme="dark"] .section-light h1,
:root[data-theme="dark"] .section-light h2,
:root[data-theme="dark"] .section-light h3,
:root[data-theme="dark"] .section-darker h1,
:root[data-theme="dark"] .section-darker h2,
:root[data-theme="dark"] .section-darker h3 {
    color: var(--ls-text);
}

:root[data-theme="dark"] .section-light p,
:root[data-theme="dark"] .section-darker p,
:root[data-theme="dark"] .contact-description,
:root[data-theme="dark"] .section-description,
:root[data-theme="dark"] .about-description {
    color: var(--ls-text-secondary);
}

/* --------------------------------------------------------------------------
   Cards and panels
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .auth-container,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .value-card,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .blog-card,
:root[data-theme="dark"] .help-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .timeline-content {
    background-image: none;
    background-color: var(--ls-surface);
    color: var(--ls-text);
    border-color: var(--ls-border);
}

:root[data-theme="dark"] .auth-container h1,
:root[data-theme="dark"] .auth-container h2,
:root[data-theme="dark"] .auth-title,
:root[data-theme="dark"] .auth-container label,
:root[data-theme="dark"] .auth-card label {
    color: var(--ls-text);
}

:root[data-theme="dark"] .auth-subtitle,
:root[data-theme="dark"] .auth-container .form-help,
:root[data-theme="dark"] .auth-container small {
    color: var(--ls-text-secondary);
}

/* --------------------------------------------------------------------------
   Brand fills — dark ink on the lifted brand
   --------------------------------------------------------------------------
   White on #818cf8 measures 2.4-3.0:1. #0f1117 on the same fill is about 9:1,
   and keeps the brand colour intact.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .hero-badge,
:root[data-theme="dark"] .section-badge,
:root[data-theme="dark"] .step-number,
:root[data-theme="dark"] .blog-chip.is-active,
:root[data-theme="dark"] .help-button,
:root[data-theme="dark"] .help-search-button,
:root[data-theme="dark"] .login-button,
:root[data-theme="dark"] .legal-btn,
:root[data-theme="dark"] .cookie-btn-primary,
:root[data-theme="dark"] .newsletter-form button,
:root[data-theme="dark"] button[type="submit"].button-primary {
    background-image: none;
    background-color: var(--ls-brand-600);
    color: var(--ls-text-inverse);
    border-color: var(--ls-brand-600);
}

:root[data-theme="dark"] .button-primary:hover,
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .help-button:hover,
:root[data-theme="dark"] .login-button:hover,
:root[data-theme="dark"] .cookie-btn-primary:hover {
    background-color: #a5b4fc;
    color: var(--ls-text-inverse);
}

/* Icons inside a filled brand control inherit the same ink. */
:root[data-theme="dark"] .button-primary i,
:root[data-theme="dark"] .btn-primary i,
:root[data-theme="dark"] .hero-badge i,
:root[data-theme="dark"] .section-badge i,
:root[data-theme="dark"] .help-search-button i {
    color: var(--ls-text-inverse);
}

/* --------------------------------------------------------------------------
   Forms on public pages
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .auth-container input,
:root[data-theme="dark"] .auth-container select,
:root[data-theme="dark"] .auth-container textarea,
:root[data-theme="dark"] .contact-form input,
:root[data-theme="dark"] .contact-form select,
:root[data-theme="dark"] .contact-form textarea,
:root[data-theme="dark"] .newsletter-form input {
    background-color: var(--ls-surface-2);
    background-image: none;
    color: var(--ls-text);
    border-color: var(--ls-border-strong);
}

:root[data-theme="dark"] .auth-container input::placeholder,
:root[data-theme="dark"] .contact-form input::placeholder,
:root[data-theme="dark"] .contact-form textarea::placeholder {
    color: var(--ls-text-muted);
}

/* Bare <button> elements default to the UA's light chrome. */
:root[data-theme="dark"] button:not([class]) {
    background-color: var(--ls-surface-3);
    color: var(--ls-text);
    border-color: var(--ls-border-strong);
}

/* --------------------------------------------------------------------------
   Illustrations
   --------------------------------------------------------------------------
   Inline SVG scenery carries its own light fills and cannot be recoloured
   reliably from here; softening it stops it glaring against a dark page.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .about-shape-1 svg,
:root[data-theme="dark"] .about-shape-2 svg,
:root[data-theme="dark"] .hero-illustration svg {
    opacity: .9;
}

/* --------------------------------------------------------------------------
   Photo hero bands
   --------------------------------------------------------------------------
   These sit over a photograph with a heavy colour wash (an 80%-opaque green or
   indigo overlay). The wash is mid-luminance in BOTH themes, so the correct
   ink is white regardless — applying the muted dark-mode body colour here
   dropped the copy to 1.5:1 against the overlay.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .mini-hero-section,
:root[data-theme="dark"] .about-mini-hero-section,
:root[data-theme="dark"] .about-main-hero,
:root[data-theme="dark"] .contact-main-hero,
:root[data-theme="dark"] .page-hero {
    background-color: transparent;
}

:root[data-theme="dark"] .mini-hero-section h1,
:root[data-theme="dark"] .mini-hero-section h2,
:root[data-theme="dark"] .mini-hero-section h3,
:root[data-theme="dark"] .mini-hero-section p,
:root[data-theme="dark"] .about-mini-hero-section h1,
:root[data-theme="dark"] .about-mini-hero-section h2,
:root[data-theme="dark"] .about-mini-hero-section p,
:root[data-theme="dark"] .about-main-hero h1,
:root[data-theme="dark"] .about-main-hero h2,
:root[data-theme="dark"] .about-main-hero p,
:root[data-theme="dark"] .contact-main-hero h1,
:root[data-theme="dark"] .contact-main-hero h2,
:root[data-theme="dark"] .contact-main-hero p,
:root[data-theme="dark"] .page-hero h1,
:root[data-theme="dark"] .page-hero p {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   About page tabs
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .about-tabs-container,
:root[data-theme="dark"] .about-tab-content-container,
:root[data-theme="dark"] .about-tab-content {
    background-color: var(--ls-surface);
    background-image: none;
    color: var(--ls-text);
}

:root[data-theme="dark"] .about-tabs-navigation {
    background-color: var(--ls-surface-2);
}

:root[data-theme="dark"] .about-tab {
    background-color: transparent;
    background-image: none;
    color: var(--ls-text-secondary);
}

:root[data-theme="dark"] .about-tab:hover {
    background-color: var(--ls-surface-hover);
    color: var(--ls-text);
}

/* Same lifted-brand fill as the buttons: dark ink, not white. */
:root[data-theme="dark"] .about-tab.active,
:root[data-theme="dark"] .about-tab.active span,
:root[data-theme="dark"] .about-tab.active i {
    background-color: var(--ls-brand-600);
    color: var(--ls-text-inverse);
}

:root[data-theme="dark"] .about-tab.active span {
    background-color: transparent;
}

/* Timeline markers carry the brand fill too. */
:root[data-theme="dark"] .timeline-marker,
:root[data-theme="dark"] .timeline-marker span,
:root[data-theme="dark"] .value-icon,
:root[data-theme="dark"] .story-icon {
    color: var(--ls-text-inverse);
}