/* =======================================================
   THEME TOKENS — Natiive Digital

   ✅ SAFE: plain CSS — NEVER overwritten by SCSS pipeline.

   ── HOW TO USE IN NEW SECTIONS ─────────────────────────
   Headings:   color: var(--color-heading);
               -webkit-text-fill-color: var(--color-heading-fill);
   Body text:  color: var(--text-primary);
   Muted text: color: var(--text-secondary);
   Background: background: var(--dark-primary);

   ── HOW TO PIN A SECTION DARK ──────────────────────────
   If a section is intentionally always-dark, add its outer
   selector here with local variable resets (see example below).
   ======================================================= */

/* ── Example dark-pin (uncomment to use) ─────────────────
.light-theme .my-dark-section {
    --dark-primary: #0f1419; --dark-secondary: #1c2127;
    --text-primary: #e2e6ea; --color-heading: #ffffff;
    background: #0f1419;
}
──────────────────────────────────────────────────────── */

/* ── Polaroid hero — light mode ────────────────────────── */
.light-theme #stage {
    background-color: var(--dark-primary);
}

.light-theme #stage::before {
    background-image:
        linear-gradient(rgba(0, 0, 0, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .08) 1px, transparent 1px);
    background-size: 40px 40px;
}

.light-theme .hero-headline h1 {
    color: #676767;
    -webkit-text-fill-color: #676767;
    background: none;
}

.light-theme .hero-headline p {
    color: #3d4756;
}

.light-theme #info-panel {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(46, 125, 50, 0.2);
}

.light-theme #info-sector,
.light-theme #info-title {
    color: #0f1419;
    -webkit-text-fill-color: #0f1419;
    background: none;
}

.light-theme #info-body {
    color: #3d4756;
}

.light-theme .info-cta {
    color: #2e7d32;
    border-color: #2e7d32;
    -webkit-text-fill-color: #2e7d32;
}

.light-theme .scroll-hint {
    color: #6c757d;
}

.light-theme .polaroid {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

/* ── Split-hero — light mode contrast fixes ────────────────
   Backgrounds adapt automatically via --dark-primary etc.
   These rules fix internal elements that use rgba(white)
   overlays which are invisible on a light background.
   ─────────────────────────────────────────────────────── */

/* Nav progress bar track: was rgba(white, 0.08) — invisible on cream */
.light-theme .split-nav-bar-track {
    background: rgba(0, 0, 0, 0.1);
}

/* Nav labels: were light-grey, now use site text colour */
.light-theme .split-nav-label {
    color: var(--text-secondary, #3d4756);
}

.light-theme .split-nav-item.active .split-nav-label {
    color: var(--text-accent-green, #66bb6a);
}

/* Left panel border */
.light-theme .split-left {
    border-right-color: rgba(0, 0, 0, 0.08);
}

/* Slide pills: dark-tertiary bg becomes a muted cream — add a border */
.light-theme .slide-pill {
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-primary, #0f1419);
}

/* Stat cards */
.light-theme .slide-stat {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Dots on right panel */
.light-theme .split-dot {
    background: rgba(0, 0, 0, 0.12);
}

/* ── Google Ads section — light mode contrast fixes ────────
   Dashboard card: browser chrome needs visible contrast
   ─────────────────────────────────────────────────────── */

/* Browser bar URL field: was rgba(white, 0.06) — invisible on cream */
.light-theme .ads-browser-url {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted, #6c757d);
}

/* Metric cards border */
.light-theme .ads-metric {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Chart wrap border */
.light-theme .ads-chart-wrap {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Section radial glow — reduce for light backgrounds */
.light-theme .sem-section::before {
    background: radial-gradient(ellipse at center,
            rgba(46, 125, 50, 0.06) 0%, transparent 70%);
}