/*
 * Shade stairs — from private gist 4937ac61… (paddle.skylence.be)
 * Nested surfaces step away from the page. Shells are opaque.
 *
 * Light: outer/darker → inner/lighter (page darkest, fields lightest)
 * Dark:  page darkest → elevated lighter grays
 *
 * Nav stack (both modes):
 *   page (0) → expanded bottom nest (darker) → bar / elevated cards (lighter up)
 */

/* ===== Tokens (gist) ===== */

:root,
html.scheme-light {
  --shade-page: #e6e6e8;
  --shade-step-1: #f0f0f1;
  --shade-form-outer: #f0f0f1;
  --shade-step-2: #f4f4f5;
  --shade-form-card: #f4f4f5;
  --shade-surface: #fcfcfc;
  --shade-field: #ffffff;
  --shade-button: #ffffff;
  --shade-button-hover: #fafafa;
  --shade-content: #1e2328;
  --shade-muted: rgb(30 35 40 / 0.55);
  --shade-surface-border: #ffffff;
  --shade-surface-shadow: 0 4px 48px rgb(120 120 120 / 0.09);
  --shade-hairline: rgb(30 35 40 / 0.12);
  /*
   * Bouncy tabs (light):
   * topbar = step-1 #f0f0f1
   * group track = lighter than topbar (surface #fcfcfc)
   * hover ghost = between track and pill (slightly darker than white, not darker than track)
   * active pill = white (highest / lightest)
   * active text = content dark
   */
  --shade-nav-track: #fcfcfc;
  --shade-nav-ghost: color-mix(in srgb, #ffffff 65%, #fcfcfc 35%);
  --shade-nav-indicator: #ffffff;
  --shade-nav-tab: rgb(30 35 40 / 0.55);
  --shade-nav-tab-active: #1e2328;
  --shade-accent: #6840ff;
  --shade-accent-soft: #ece8ff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shade-page: #171717;
    --shade-step-1: #212121;
    --shade-form-outer: #212121;
    --shade-step-2: #2a2a2a;
    --shade-form-card: #2a2a2a;
    --shade-surface: #212121;
    --shade-field: #404040;
    --shade-button: #525252;
    --shade-button-hover: #636363;
    --shade-content: #f0f4f8;
    --shade-surface-border: rgb(255 255 255 / 0.1);
    --shade-surface-shadow: none;
    --shade-muted: rgb(240 244 248 / 0.55);
    --shade-hairline: rgb(255 255 255 / 0.1);
    --shade-nav-track: rgb(240 244 248 / 0.12);
    --shade-nav-ghost: rgb(240 244 248 / 0.14);
    --shade-nav-indicator: #f0f4f8;
    --shade-nav-tab: rgb(240 244 248 / 0.7);
    --shade-nav-tab-active: #171717;
    --shade-accent: #8b6fff;
    --shade-accent-soft: #2a2640;
  }
}

html.scheme-dark {
  --shade-page: #171717;
  --shade-step-1: #212121;
  --shade-form-outer: #212121;
  --shade-step-2: #2a2a2a;
  --shade-form-card: #2a2a2a;
  --shade-surface: #212121;
  --shade-field: #404040;
  --shade-button: #525252;
  --shade-button-hover: #636363;
  --shade-content: #f0f4f8;
  --shade-surface-border: rgb(255 255 255 / 0.1);
  --shade-surface-shadow: none;
  --shade-muted: rgb(240 244 248 / 0.55);
  --shade-hairline: rgb(255 255 255 / 0.1);
  --shade-nav-track: rgb(240 244 248 / 0.12);
  --shade-nav-ghost: rgb(240 244 248 / 0.14);
  --shade-nav-indicator: #f0f4f8;
  --shade-nav-tab: rgb(240 244 248 / 0.7);
  --shade-nav-tab-active: #171717;
  --shade-accent: #8b6fff;
  --shade-accent-soft: #2a2640;
}

html.shade-system,
html.shade-system body {
  background-color: var(--shade-page);
  color: var(--shade-content);
}

/*
 * ===== NAV STAIRS =====
 * Light: top bar + open panel = step-1 nest (#f0f0f1), not white.
 *        Elevated bits (colored cols / cards) step up to step-2 / field.
 * Dark:  bottom nest step-1, bar elevated step-2, cards field.
 */

/* --- Light --- */

[data-nav-theme="light"] .nav-bar__bg,
[data-nav-theme="light"][data-nav-status="active"] .nav-bar__bg {
  background-color: var(--shade-step-1) !important;
}

/* 2px white ring around top bar + open panel shell */
[data-nav-theme="light"] .nav-bar__outline {
  background-color: #ffffff !important;
  opacity: 1 !important;
  inset: -2px;
  border-radius: calc(0.375em + 2px);
}

[data-nav-theme="light"][data-nav-status="active"] .nav-bar__outline {
  border-radius: calc(0.375em + 2px);
}

[data-nav-theme="light"] .nav-bar__bottom,
[data-nav-theme="light"] .nav-bar__bottom-inner,
[data-nav-theme="light"] .nav-bar__bottom-overflow {
  background-color: var(--shade-step-1) !important;
}

[data-nav-theme="light"] .nav-mega-panels {
  background-color: var(--shade-step-1) !important;
  border: none;
  box-shadow: none;
  color: var(--shade-content) !important;
}

[data-nav-theme="light"] .nav-mega-panels .mega-nav__panel-col.is--colored {
  background-color: var(--shade-step-2) !important;
}

[data-nav-theme="light"] .nav-mega-panels .mega-nav__card {
  background-color: var(--shade-field) !important;
  border: 1px solid var(--shade-hairline);
}

[data-nav-theme="light"] .nav-bar__bottom-col.is--products,
[data-nav-theme="light"] .nav-banner {
  background-color: var(--shade-field) !important;
  border: 1px solid var(--shade-hairline);
}

[data-nav-theme="light"] .mega-nav__bar {
  background-color: var(--shade-step-1) !important;
  border-bottom-color: var(--shade-hairline) !important;
}

[data-nav-theme="light"] .mega-nav__bar-inner {
  background-color: var(--shade-step-1) !important;
}

[data-nav-theme="light"] .mega-nav__dropdown-bg,
[data-nav-theme="light"] .mega-nav__dropdown-panel {
  background-color: var(--shade-step-1) !important;
}

[data-nav-theme="light"] .mega-nav__panel-col.is--colored {
  background-color: var(--shade-step-2) !important;
}

[data-nav-theme="light"] .nav__bg {
  background-color: rgb(230 230 232 / 0.5);
}

/* --- Dark --- */

[data-nav-theme="dark"] .nav-bar__bg,
[data-nav-theme="dark"][data-nav-status="active"] .nav-bar__bg {
  /* elevated — up (lighter) */
  background-color: var(--shade-step-2) !important;
}

[data-nav-theme="dark"] .nav-bar__bottom,
[data-nav-theme="dark"] .nav-bar__bottom-inner,
[data-nav-theme="dark"] .nav-bar__bottom-overflow {
  /* darker nest — bottom */
  background-color: var(--shade-step-1) !important;
}

[data-nav-theme="dark"] .nav-mega-panels {
  background-color: var(--shade-field) !important;
  border: 1px solid var(--shade-hairline);
  box-shadow: none;
  color: var(--shade-content) !important;
}

[data-nav-theme="dark"] .nav-mega-panels .mega-nav__panel-col.is--colored {
  background-color: var(--shade-step-2) !important;
}

[data-nav-theme="dark"] .nav-mega-panels .mega-nav__card {
  background-color: var(--shade-button) !important;
  border: 1px solid var(--shade-hairline);
}

[data-nav-theme="dark"] .nav-bar__bottom-col.is--products,
[data-nav-theme="dark"] .nav-banner {
  background-color: var(--shade-field) !important;
  border: 1px solid var(--shade-hairline);
}

[data-nav-theme="dark"] .mega-nav__bar {
  background-color: var(--shade-step-2) !important;
  border-bottom-color: var(--shade-hairline) !important;
}

[data-nav-theme="dark"] .mega-nav__bar-inner {
  background-color: var(--shade-step-1) !important;
}

[data-nav-theme="dark"] .mega-nav__dropdown-bg,
[data-nav-theme="dark"] .mega-nav__dropdown-panel {
  background-color: var(--shade-field) !important;
}

[data-nav-theme="dark"] .mega-nav__panel-col.is--colored {
  background-color: var(--shade-step-2) !important;
}

[data-nav-theme="dark"] .nav__bg {
  background-color: rgb(0 0 0 / 0.45);
}

/* --- Shared chrome (both themes) --- */

[data-nav-theme] .nav-bar__outline {
  background-color: var(--shade-hairline);
  opacity: 1;
}

[data-nav-theme][data-nav-status="active"] .nav-bar__bg,
[data-nav-theme][data-nav-status="active"] .nav-bar__outline {
  border-radius: 0.375em;
}

[data-nav-theme][data-nav-status="active"] .nav-bar__bottom,
[data-nav-theme][data-nav-status="active"] .nav-bar__bottom-overflow {
  border-bottom-left-radius: 0.375em;
  border-bottom-right-radius: 0.375em;
}

[data-nav-theme] .nav-logo,
[data-nav-theme] .nav-lang-link,
[data-nav-theme] .nav-lang-sep,
[data-nav-theme] .nav-bar__big-span,
[data-nav-theme] .eyebrow,
[data-nav-theme] .h-m,
[data-nav-theme] .button-label,
[data-nav-theme] .nav-menu,
[data-nav-theme] .nav-banner,
[data-nav-theme] .square-button,
[data-nav-theme] .button {
  color: var(--shade-content);
}

[data-nav-theme] .nav-lang-link:not(.is--active) {
  color: var(--shade-muted);
}

[data-nav-theme] .nav-menu__hamburger-bar {
  background-color: var(--shade-content);
}

[data-nav-theme] .line.is--nav-transparent,
[data-nav-theme] .nav-bar__line {
  background-color: var(--shade-hairline);
  opacity: 1;
}

[data-nav-theme] [data-wf--button-theme--variant="neutral-600"],
[data-nav-theme] [data-wf--button-theme--variant="neutral-800"],
[data-nav-theme] [data-wf--button-theme--variant="neutral-525"],
[data-nav-theme] [data-wf--button-theme--variant="dark-10"],
[data-nav-theme] .square-button .button-bg,
[data-nav-theme] .button .button-bg {
  background-color: var(--shade-button) !important;
}

[data-nav-theme] .square-button:hover
  [data-wf--button-theme--variant]:not([data-wf--button-theme--variant="electric"]):not(
    [data-wf--button-theme--variant="purple"]
  ):not([data-wf--button-theme--variant="coral"]),
[data-nav-theme] .button:hover
  [data-wf--button-theme--variant]:not([data-wf--button-theme--variant="electric"]):not(
    [data-wf--button-theme--variant="purple"]
  ):not([data-wf--button-theme--variant="coral"]) {
  background-color: var(--shade-button-hover) !important;
}

[data-nav-theme] [data-wf--button-theme--variant="neutral-200"],
[data-nav-theme] [data-wf--button-theme--variant="neutral-300"],
[data-nav-theme] [data-wf--button-theme--variant="light-10"] {
  background-color: var(--shade-step-2) !important;
}

[data-nav-theme] .square-button .button-icon,
[data-nav-theme] .square-button .svg {
  color: var(--shade-content);
}

/* Bouncy tabs */
[data-nav-theme] .bouncy-tabs--nav-bar .bouncy-tabs__nav {
  background-color: var(--shade-nav-track) !important;
}
[data-nav-theme] .bouncy-tabs--nav-bar .bouncy-tabs__ghost {
  background-color: var(--shade-nav-ghost) !important;
}
[data-nav-theme] .bouncy-tabs--nav-bar .bouncy-tabs__indicator {
  background-color: var(--shade-nav-indicator) !important;
}
[data-nav-theme] .bouncy-tabs--nav-bar .bouncy-tabs__button {
  color: var(--shade-nav-tab) !important;
}
[data-nav-theme] .bouncy-tabs--nav-bar [data-bouncy-tabs-button][data-active] {
  color: var(--shade-nav-tab-active) !important;
}

/* Light: track lighter than bar; hover between track and white pill; pill highest */
[data-nav-theme="light"] .bouncy-tabs--nav-bar .bouncy-tabs__nav {
  background-color: var(--shade-surface) !important; /* #fcfcfc */
}
[data-nav-theme="light"] .bouncy-tabs--nav-bar .bouncy-tabs__ghost {
  /* slightly darker than white pill, not darker than track */
  background-color: color-mix(in srgb, #ffffff 65%, #fcfcfc 35%) !important;
  box-shadow: 0 1px 2px rgb(30 35 40 / 0.06);
}
[data-nav-theme="light"] .bouncy-tabs--nav-bar .bouncy-tabs__indicator {
  background-color: var(--shade-field) !important; /* #fff highest */
  box-shadow: 0 1px 3px rgb(30 35 40 / 0.12);
}
[data-nav-theme="light"] .bouncy-tabs--nav-bar .bouncy-tabs__button {
  color: var(--shade-muted) !important;
}
[data-nav-theme="light"] .bouncy-tabs--nav-bar [data-bouncy-tabs-button][data-active] {
  color: var(--shade-content) !important;
}

[data-nav-theme="dark"] .bouncy-tabs--nav-bar .bouncy-tabs__indicator {
  box-shadow: none;
}

/* Mega panel type */
[data-nav-theme] .nav-mega-panels .mega-nav__panel-col,
[data-nav-theme] .mega-nav__panel-col {
  border-right-color: var(--shade-hairline) !important;
  border-bottom-color: var(--shade-hairline) !important;
}

[data-nav-theme] .nav-mega-panels .mega-nav__panel-label,
[data-nav-theme] .mega-nav__panel-label {
  color: var(--shade-muted) !important;
}

[data-nav-theme] .nav-mega-panels .mega-nav__panel-link,
[data-nav-theme] .nav-mega-panels .mega-nav__panel-link-text,
[data-nav-theme] .mega-nav__panel-link,
[data-nav-theme] .mega-nav__panel-link-text {
  color: var(--shade-content) !important;
}

[data-nav-theme] .nav-mega-panels .mega-nav__panel-link-desc,
[data-nav-theme] .mega-nav__panel-link-desc {
  color: var(--shade-muted) !important;
  opacity: 1;
}

[data-nav-theme] .nav-mega-panels .mega-nav__panel-link:hover,
[data-nav-theme] .mega-nav__panel-link:hover {
  background-color: var(--shade-nav-track);
}

[data-nav-theme] .nav-mega-panels .mega-nav__card-cta,
[data-nav-theme] .mega-nav__card-cta {
  background-color: var(--shade-accent) !important;
  color: #f2f2f2 !important;
}

/* Mobile mega chrome */
[data-nav-theme] .mega-nav__bar-link,
[data-nav-theme] .mega-nav__bar-link-label,
[data-nav-theme] .mega-nav__lang-link,
[data-nav-theme] .mega-nav__lang-sep {
  color: var(--shade-content) !important;
}

[data-nav-theme] .mega-nav__lang-link:not(.is--active) {
  opacity: 0.55;
}

[data-nav-theme] .mega-nav__bar-link,
[data-nav-theme] .mega-nav__lang-row {
  border-bottom-color: var(--shade-hairline) !important;
}

[data-nav-theme] .mega-nav__burger {
  background-color: var(--shade-accent-soft) !important;
}

[data-nav-theme] .mega-nav__burger-line {
  background-color: var(--shade-accent) !important;
}

[data-nav-theme] .mega-nav__bar-cta {
  background-color: var(--shade-accent) !important;
  color: #f2f2f2 !important;
}

[data-nav-theme] .mega-nav__bar-cta.is--secondary {
  color: var(--shade-accent) !important;
  background-color: transparent !important;
  border-color: var(--shade-accent) !important;
}

[data-nav-theme] .mega-nav__card {
  background-color: var(--shade-field) !important;
  border-color: var(--shade-hairline);
}