/* Light editorial sections use the existing brand's Deck White and navy.
   Brand anchors remain in base.css; only semantic surface and ink roles vary.
   Product mockups retain their dark palette inside a light chapter. */

.landing {
  --lp-paper: color-mix(in srgb, var(--lp-current) 2%, var(--surface-bg));
  --lp-paper-soft: color-mix(in srgb, var(--lp-current) 6%, var(--surface-bg));
  --lp-accent: var(--lp-cyan);
}

.landing__section--light {
  --lp-bg: var(--lp-paper);
  --lp-panel: var(--surface-bg);
  --lp-panel-raised: var(--surface-bg);
  --lp-panel-sunken: var(--lp-paper-soft);
  --lp-ink-strong: var(--lp-hull);
  --lp-ink: color-mix(in srgb, var(--lp-hull) 86%, var(--lp-paper));
  --lp-mute: color-mix(in srgb, var(--lp-hull) 76%, var(--lp-paper));
  --lp-faint: color-mix(in srgb, var(--lp-hull) 68%, var(--lp-paper));
  --lp-line: color-mix(in srgb, var(--lp-hull) 16%, var(--lp-paper));
  --lp-line-strong: color-mix(in srgb, var(--lp-hull) 28%, var(--lp-paper));
  --lp-line-faint: color-mix(in srgb, var(--lp-hull) 9%, var(--lp-paper));
  --lp-accent: var(--lp-current);
  --lp-shadow-panel: 0 18px 48px -24px color-mix(in srgb, var(--lp-hull) 18%, transparent);
  --lp-shadow-float: 0 30px 72px -30px color-mix(in srgb, var(--lp-hull) 24%, transparent);

  background: var(--lp-bg);
  color: var(--lp-ink);
  color-scheme: light;
}

.landing-surface--dark {
  --lp-bg: var(--lp-abyss);
  --lp-panel: #0b1130;
  --lp-panel-raised: #101a44;
  --lp-panel-sunken: #070c22;
  --lp-ink-strong: #fff;
  --lp-ink: #dbe7f5;
  --lp-mute: #8fa3c7;
  --lp-faint: #5b6785;
  --lp-line: rgb(255 255 255 / 12%);
  --lp-line-strong: rgb(255 255 255 / 18%);
  --lp-line-faint: rgb(255 255 255 / 7%);
  --lp-accent: var(--lp-cyan);
  --lp-shadow-panel: 0 30px 80px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 10%);
  --lp-shadow-float: 0 50px 120px rgb(0 0 0 / 65%), inset 0 1px 0 rgb(255 255 255 / 12%);

  color: var(--lp-ink);
  color-scheme: dark;
}

.landing__section--light .landing__eyebrow,
.landing__section--light .landing__text-link i,
.landing__section--light .landing-onboarding__number,
.landing__section--light .landing-faq__toggle {
  color: var(--lp-accent);
}

.landing__section--light .landing__text-link:hover,
.landing__section--light .landing-faq__question:hover .landing-faq__toggle,
.landing__section--light .landing-faq__item[open] .landing-faq__toggle {
  color: var(--lp-accent);
  border-color: var(--lp-accent);
}

.landing__section--light :focus-visible {
  outline-color: var(--lp-current);
}

.landing__section--light .landing-surface--dark :focus-visible {
  outline-color: var(--lp-cyan);
}