/* ZABLEY — permanent dark theme
   Generated 2026-08-04. Loaded AFTER each page's inline <style>, so equal-specificity
   rules win on source order.

   Why this is an override and not a rewrite: the inline CSS uses --white and --primary
   for BOTH text and backgrounds, so neither token can simply be inverted.
     --primary  is text in 142 rules, background in 8 selectors  -> flip token, pin the 8
     --white    is text in 17 selectors, background in 14        -> keep token, pin the 14
   Flipping backgrounds explicitly is the safer failure mode: a missed selector shows a
   light panel (visible, fixable) rather than invisible text.

   To revert the whole site to light: delete the <link> to this file from each page. */

:root {
    /* text tokens — safe to invert, these are never used as backgrounds */
    --primary:          #eaeff7;   /* was #1a2d4a */
    --dark-gray:        #dbe3ee;   /* was #2a3d55 */
    --gray:             #a6b4c8;   /* was #5a6778 */

    /* background-only token — no `color:` usage anywhere in the site */
    --light:            #0a111d;   /* was #f4f5f7 */

    /* gold, brightened for dark surfaces */
    --accent:           #e6bd52;   /* was #d4a020 */
    --accent-dark:      #d4a020;
    --accent-contrast:  #e6bd52;   /* light-bg text gold is no longer needed */

    /* --white deliberately left #ffffff: it is TEXT on navy in 17 selectors */

    --shadow:    0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 16px 44px rgba(0,0,0,.5);
}

/* ---- surfaces that were painted with --white ---- */
#about,
#blog-preview,
#contact,
.area-tag,
.blog-card,
.clients-section,
.faq-item,
.form-group input, .form-group textarea, .form-group select,
.hamburger span,
.related-services,
.service-card,
.service-item,
.use-cases,
body {
    background: #05090f;
}

/* the page itself and the raised panels want to differ */
body { background: #05090f; color: var(--dark-gray); }

/* ---- panels/cards get a lifted surface + a visible edge ---- */
.service-item,
.use-cases,
.related-services,
.service-card,
.blog-card,
.faq-item,
.clients-section,
.area-tag,
.blog-preview-card,
.related-card,
.stat-box,
.highlight-box,
.use-case,
.client-type,
.contact-form {
    background: #111a2c;
    border: 1px solid #1c2840;
}

/* ---- selectors where --primary was a BACKGROUND: keep them dark navy ---- */
.compare-table thead,
.comparison-table th,
.cookie-banner,
.dropdown-menu,
.dropdown-menu::before,
.nav-links.active,
.skip-link,
footer {
    background: #0a1220;
}
.dropdown-menu::before { background: #0a1220; }

/* nav bar is a bare <nav> with a translucent navy; keep it translucent but darker */
nav { background: rgba(8, 14, 24, 0.92); }

/* ---- form controls ---- */
.form-group input,
.form-group textarea,
.form-group select {
    background: #151f33;
    border-color: #1c2840;
    color: #eaeff7;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #7b8a9f; }

/* ---- borders & rules that assumed a light page ---- */
hr, .divider { border-color: #1c2840; }

/* ---- native control rendering (scrollbars, date pickers, autofill) ---- */
:root { color-scheme: dark; }

/* ---- prose links ----
   The inline CSS never styles bare <a> inside copy, so they fall through to the UA
   default (pale blue under color-scheme: dark). Put them on brand gold.
   Deliberately kept at element-only specificity (0,0,2) so that ANY class-based rule
   -- e.g. .cta-box a at (0,1,1) -- still wins. An earlier version used
   `section a:not([class])` (0,1,2), which beat the button rules and painted CTA
   labels gold-on-gold. */
p a, li a, dd a, td a, blockquote a {
    color: #e6bd52;
    text-underline-offset: 0.18em;
}
p a:hover, li a:hover, dd a:hover, td a:hover { color: #f0cd77; }

/* ---- text that sits ON gold/light fills must stay DARK ----
   --primary was flipped to a light value for the 142 rules where it is body text.
   These 8 selectors use it as a label on a gold button, so they must be pinned back. */
.area-tag.primary,
.blog-view-all a:hover,
.btn-primary,
.btn-submit,
.cookie-accept,
.cta-box a,
.process-step::before {
    color: #0a1220;
}
/* .nav-cta declares `color: var(--primary) !important` on all 27 pages */
.nav-cta { color: #0a1220 !important; }

/* CTA links inside gold boxes carry no class, so the prose-link rule above would
   otherwise paint them gold-on-gold. Pinned here, after it, to win on source order. */
.cta-box a,
.cta-section a.btn,
a.btn-primary,
a.btn-submit,
.area-cta a,
.article-cta a {
    color: #0a1220;
}