/* BluQube public landing — shared chrome layer (Art Director's Jobs pass).
 *
 * QW-05: the full dark surface layer, promoted out of index.html so all five
 *        landing pages paint a complete dark page instead of a dark tab bar
 *        floating on a light body.
 * QW-09: the scroll affordance for the horizontally scrolling page-level tab
 *        bar (edge fades; the bar itself stays non-wrapping).
 *
 * Colour discipline (DESIGN.md): every literal colour value lives in :root.
 * Rules below reference tokens only. Loaded after tailwind.css on all five
 * pages; `html.dark` is applied by landing-ui.js before first paint.
 */

:root {
    /* Dark surfaces */
    --surface-dark: #1a1f2e;
    --surface-card-dark: #2d3348;
    --surface-raised-dark: #3d4460;
    --surface-deep-dark: #0f172a;
    --surface-chip-dark: #243049;
    --surface-light-on-dark: #ffffff;

    /* Dark text */
    --text-muted-dark: #d1d5db;
    --text-strong-dark: #f3f4f6;
    --text-subtle-dark: #9ca3af;
    --brand-ink: #193962;

    /* Dark borders */
    --border-strong-dark: #1e293b;
    --border-button-dark: #4b5563;

    /* Brand accents */
    --brand-teal: #4EE2D0;
    --brand-teal-light: #6EE7D9;

    /* Header band */
    --nav-dark-bg: rgba(26, 31, 46, 0.95);
    --nav-dark-line: rgba(55, 65, 81, 0.5);
    --logo-reverse: #ffffff;
}

/* ══ QW-09 — tab-bar scroll affordance ═══════════════════════════════════
 * .nx-pagebar is sticky, so it is the containing block for these overlays.
 * landing-ui.js injects the two spans and flags which edge still has tabs
 * hidden beyond it; both fades stay transparent until there is something to
 * reveal, so a bar that fits never shows a phantom gradient.
 */
.nx-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}
.nx-fade-left { left: 0; background-image: linear-gradient(to right, var(--nx-tab-bg) 0%, transparent 100%); }
.nx-fade-right { right: 0; background-image: linear-gradient(to left, var(--nx-tab-bg) 0%, transparent 100%); }
html.dark .nx-fade-left { background-image: linear-gradient(to right, var(--nx-tab-bg-dark) 0%, transparent 100%); }
html.dark .nx-fade-right { background-image: linear-gradient(to left, var(--nx-tab-bg-dark) 0%, transparent 100%); }
.nx-pagebar[data-more-left] .nx-fade-left,
.nx-pagebar[data-more-right] .nx-fade-right { opacity: 1; }

/* ══ QW-05 — dark surface layer ═════════════════════════════════════════ */

/* Page and card surfaces */
html.dark body { background-color: var(--surface-dark); color: var(--text-muted-dark); }
html.dark [class*="F7F8F5"] { background-color: var(--surface-dark); }
html.dark .bg-white { background-color: var(--surface-card-dark); }
html.dark .bg-slate-900 { background-color: var(--surface-deep-dark); }

/* Header band. The wordmark is an <img>, so its ink paths cannot be recoloured
   from a stylesheet; the lockup is reversed to white instead, which costs the
   teal mark in dark mode. A dedicated reverse SVG would keep both colours. */
html.dark .glass-nav { background-color: var(--nav-dark-bg); border-bottom-color: var(--nav-dark-line); }
html.dark .glass-nav img[alt="BluQube"] { filter: brightness(0) invert(1); }

/* Text */
html.dark .text-ink { color: var(--text-strong-dark); }
html.dark .text-ink-muted { color: var(--text-muted-dark); }
html.dark .text-slate-400, html.dark .text-slate-500, html.dark .text-slate-600 { color: var(--text-subtle-dark); }
html.dark [class*="placeholder-slate-500"]::placeholder { color: var(--text-subtle-dark); }

/* Borders and dividers */
html.dark .border-slate-50, html.dark .border-slate-100, html.dark .border-slate-200,
html.dark .border-gray-100, html.dark .border-brand-100, html.dark .border-brand-200 { border-color: var(--surface-raised-dark); }
html.dark .border-slate-700 { border-color: var(--border-button-dark); }
html.dark .border-slate-800 { border-color: var(--border-strong-dark); }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--surface-raised-dark); }

/* Hover surfaces that were pale tints */
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-brand-50:hover,
html.dark .hover\:bg-brand-100:hover,
html.dark [class*="f5f4f0"]:hover { background-color: var(--surface-raised-dark); }
html.dark .hover\:text-brand-700:hover { color: var(--brand-teal); }
html.dark .hover\:text-brand-500:hover { color: var(--brand-teal); }
html.dark .hover\:text-brand-800:hover { color: var(--brand-teal-light); }

/* Brand-tinted light panels become raised dark chips */
html.dark .bg-brand-50, html.dark .bg-brand-100, html.dark .bg-brand-200 { background-color: var(--surface-chip-dark); }
html.dark .border-brand-700 { border-color: var(--brand-teal); }

/* Icon tiles and status pills that were pale-tinted. The colour is set on the
   tile itself so the glyph it inherits stays legible on the dark chip. */
html.dark :is(.bg-blue-100, .bg-indigo-100, .bg-teal-100, .bg-rose-100, .bg-amber-100, .bg-cyan-100) {
    background-color: var(--surface-chip-dark);
    color: var(--text-muted-dark);
}
html.dark [class*="193962"] { background-color: var(--surface-chip-dark); color: var(--text-muted-dark); }

/* Accent ink (eyebrows, links, headings). Elements that carry their own
   background — primary buttons, chips — are excluded here and paired below,
   so no state ever moves text closer to its own background. */
html.dark .text-brand-700:not([class*="bg-"]),
html.dark .text-brand-800:not([class*="bg-"]) { color: var(--brand-teal); }
html.dark :is(.bg-brand-50, .bg-brand-100, .bg-brand-200).text-brand-700,
html.dark :is(.bg-brand-50, .bg-brand-100, .bg-brand-200).text-brand-800 { color: var(--brand-teal); }
html.dark :is(.bg-brand-50, .bg-brand-100, .bg-brand-200) :is(.text-brand-700, .text-brand-800) { color: var(--text-strong-dark); }

/* Controls */
html.dark .bg-white:is(.text-ink, .text-brand-700, .text-brand-800) { color: var(--text-strong-dark); }
html.dark .bg-white.text-ink.border {
    background-color: var(--surface-raised-dark);
    color: var(--text-strong-dark);
    border-color: var(--border-button-dark);
}
/* Inside the Ink Blue CTA band a white primary control stays white, and the
   demo-request card becomes a raised dark panel so its inputs stay legible. */
html.dark .bg-brand-700 a.bg-white { background-color: var(--surface-light-on-dark); color: var(--brand-ink); }
html.dark .bg-brand-700 form.bg-white { background-color: var(--surface-raised-dark); }

/* Nested in-section tab bars (ld-/hl-/ab-) are styled per page with light-only
   values; lift their ink and rules here so they match the page bar. */
html.dark :is(.ld-tab, .hl-tab, .ab-tab) { color: var(--text-muted-dark); }
html.dark :is(.ld-tab, .hl-tab, .ab-tab):hover,
html.dark :is(.ld-tab, .hl-tab, .ab-tab)[aria-selected="true"] { color: var(--text-strong-dark); }
html.dark :is(.ld-tabbar, .hl-tabbar, .ab-tabbar) { border-bottom-color: var(--surface-raised-dark); }

/* Recommended tier outline and focus rings need to read on dark ground */
html.dark .pricing-card.popular { border-color: var(--brand-teal); }
html.dark :focus-visible { outline-color: var(--brand-teal); }

@media (prefers-reduced-motion: reduce) {
    .nx-fade { transition: none; }
}