/* ============================================================
   DBM Landing — Tweak overrides
   Re-binds the design's glow halos, grain overlays, grids and
   surface tokens to CSS variables + [data-*] attributes so the
   Tweaks panel can reshape the whole feel without touching markup.
   Loaded AFTER dbm-landing.css so it wins on equal specificity.
   ============================================================ */

:root {
  /* signal-keyed glow stops — every halo on the page reads from these */
  --glow-strong: color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-mid:    color-mix(in srgb, var(--accent) 33%, transparent);
  --glow-soft:   color-mix(in srgb, var(--accent) 20%, transparent);
  /* texture controls */
  --scan-color:  rgba(16, 35, 26, 0.022);
  --noise-op:    0.025;
  --grid-op:     1;
  --grid-color:  color-mix(in srgb, var(--accent) 9%, transparent);
}

/* ── glow halos → follow signal colour + atmosphere intensity ───────────── */
.hero h1 .acc            { text-shadow: 0 0 32px var(--glow-strong); }
.btn-primary             { box-shadow: 0 0 24px var(--glow-mid); }
.nav .cta                { box-shadow: 0 0 14px var(--glow-mid); }
.nav .cta:hover          { box-shadow: 0 0 26px var(--glow-strong); }
.s-company .cmp-mark     { filter: drop-shadow(0 0 22px var(--glow-soft)); }
.s-company .cmp-bracket  { filter: drop-shadow(0 0 4px var(--glow-strong)); }
.s-company .arrow        { filter: drop-shadow(0 0 6px var(--glow-strong)); }
.s-contact .info .flow-steps li:first-child::before { box-shadow: 0 0 8px var(--glow-strong); }
.s-contact form input:focus,
.s-contact form textarea:focus,
.s-contact form select:focus { box-shadow: 0 0 14px var(--glow-soft); }
.s-contact form .submit  { box-shadow: 0 0 22px var(--glow-mid); }
.s-contact form .submit:hover { box-shadow: 0 0 34px var(--glow-strong); }

/* ── grain + grid overlays → variable-driven ────────────────────────────── */
.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    var(--scan-color) 0,
    var(--scan-color) 1px,
    transparent 1px,
    transparent 3px
  );
}
.noise { opacity: var(--noise-op); }
.grid-bg {
  opacity: var(--grid-op);
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
}
.cust-grid-bg { opacity: calc(var(--grid-op) * 0.3); }

/* ════════════════════════════════════════════════════════════════════════
   ATMOSPHERE
   ════════════════════════════════════════════════════════════════════════ */

/* Clean — strip the HUD grit: a calm, modern product surface */
html[data-atmos="clean"] {
  --glow-strong: color-mix(in srgb, var(--accent) 16%, transparent);
  --glow-mid:    color-mix(in srgb, var(--accent) 11%, transparent);
  --glow-soft:   transparent;
  --noise-op:    0;
  --grid-op:     0.32;
}
html[data-atmos="clean"] .scanlines { display: none; }

/* Maxed — push the signal-grain terminal look */
html[data-atmos="max"] {
  --glow-strong: color-mix(in srgb, var(--accent) 72%, transparent);
  --glow-mid:    color-mix(in srgb, var(--accent) 56%, transparent);
  --glow-soft:   color-mix(in srgb, var(--accent) 38%, transparent);
  --scan-color:  rgba(16, 35, 26, 0.05);
  --noise-op:    0.06;
  --grid-op:     1.35;
}

/* ════════════════════════════════════════════════════════════════════════
   SURFACE — Blackout (dark HUD)
   token swap; the design is token-driven so this cascades site-wide
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:    #07090c;
  --bg-2:  #0c1015;
  --bg-3:  #14171c;
  --panel: #0f141b;
  --line:  #1c2530;
  --line-2:#2a3644;
  --ink:   #e6f1ff;
  --ink-2: #8aa0b8;
  --ink-3: #4a5a6e;
  --ink-4: #2c3946;
  --scan-color: rgba(230, 241, 255, 0.03);
  --grid-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
html[data-theme="dark"] body { background: var(--bg); }
/* in Blackout the signal reads brighter, so soften the baseline grain a touch */
html[data-theme="dark"][data-atmos="max"] { --scan-color: rgba(230, 241, 255, 0.055); }

/* dark-surface fixes for a few light-baked decorative fills */
html[data-theme="dark"] .hero .vignette {
  background: radial-gradient(ellipse at 60% 40%, transparent 40%, rgba(0,0,0,0.55) 100%);
}
html[data-theme="dark"] .nav {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .mat-swatch.s-low::after  { background: #1b2733; color: rgba(70,200,255,0.35); }
html[data-theme="dark"] .mat-swatch.s-mid::after  { background: #20303d; color: rgba(70,200,255,0.30); }
html[data-theme="dark"] .mat-swatch.s-high::after { background: #243845; color: rgba(70,200,255,0.30); }

/* Smooth the surface/signal transition so toggles feel like a dimmer, not a cut */
body, .nav, .section, .footer,
.s-company, .s-product, .s-materials, .s-cases,
.s-pipeline, .s-specs, .s-customers, .s-faq, .s-contact,
.mat-card, .case-card, .pl-step, .oem-card,
.cust-feat, .spec-table, .s-contact form, .channels {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}