/* =========================================================================
   Blue Sky — Fable 5 Bridge (single-palette authority)
   -------------------------------------------------------------------------
   Loaded LAST on every page. This is the file that makes the product render
   from ONE palette: it maps the `--bss-*` engine (bss-tokens.css) onto every
   legacy namespace that predates it.

   Namespaces unified here
     1. contract   --bg / --surface / --text / --line / --shadow ... (styles.css)
     2. nova       --nova-*                                        (panel-2026.css)
     3. customer   --cp-*                                          (customer-panel.css)
     4. visitor    --v-*                                           (visitor/app.css)
     5. legacy     --luxury-* / --premium-v13-*                    (storefront skins)

   Cascade notes
     - Custom properties inherit by DOM proximity, so namespaces declared on a
       descendant (e.g. `.panel-nova`) must be remapped on that same selector.
     - `:root` and `html[data-theme="…"]` target the same element, so the
       attribute selector (0,1,1) intentionally outranks `:root` (0,1,0).
     - Brand rule holds throughout: blue + purple on light, charcoal (never
       navy) on dark, gold only as the warning channel.
   ========================================================================= */

/* =========================================================================
   1 — CONTRACT TOKENS  (theme-contract.json requiredTokens)
   ========================================================================= */

html[data-theme="light"] {
  --bg:            var(--bss-bg);
  --bg-soft:       var(--bss-bg-soft);
  --surface:       var(--bss-surface);
  --surface-2:     var(--bss-primary-subtle);
  --surface-3:     var(--bss-primary-soft);
  --surface-strong: var(--bss-surface-raised);
  --text:          var(--bss-text);
  --text-2:        var(--bss-text-soft);
  --text-3:        var(--bss-text-faint);
  --muted:         var(--bss-text-soft);
  --line:          var(--bss-border);
  --line-strong:   var(--bss-border-strong);
  --shadow:        var(--bss-shadow-lg);
  --shadow-soft:   var(--bss-shadow-sm);

  --accent:        var(--bss-primary);
  --accent-soft:   var(--bss-primary-soft);
  --sky:           var(--bss-blue-600);
  --sky-2:         var(--bss-purple-600);
  --blue:          var(--bss-blue-600);
  --ice:           var(--bss-blue-900);
  --rose:          var(--bss-purple-600);
  --green:         var(--bss-success);
  --yellow:        var(--bss-warning);
  --red:           var(--bss-danger);

  --r-sm:          var(--bss-radius-sm);
  --r:             var(--bss-radius-lg);
  --r-lg:          var(--bss-radius-xl);
}

html[data-theme="dark"] {
  --bg:            var(--bss-bg);
  --bg-soft:       var(--bss-bg-soft);
  --surface:       var(--bss-surface);
  --surface-2:     rgba(255, 255, 255, 0.045);
  --surface-3:     rgba(255, 255, 255, 0.075);
  --surface-strong: var(--bss-surface-raised);
  --text:          var(--bss-text);
  --text-2:        var(--bss-text-soft);
  --text-3:        var(--bss-text-faint);
  --muted:         var(--bss-text-soft);
  --line:          var(--bss-border);
  --line-strong:   var(--bss-border-strong);
  --shadow:        var(--bss-shadow-lg);
  --shadow-soft:   var(--bss-shadow-sm);

  --accent:        var(--bss-primary);
  --accent-soft:   var(--bss-primary-soft);
  --sky:           var(--bss-blue-300);
  --sky-2:         var(--bss-purple-300);
  --blue:          var(--bss-blue-300);
  --ice:           var(--bss-blue-100);
  --rose:          var(--bss-purple-300);
  --green:         var(--bss-success);
  --yellow:        var(--bss-warning);
  --red:           var(--bss-danger);

  --r-sm:          var(--bss-radius-sm);
  --r:             var(--bss-radius-lg);
  --r-lg:          var(--bss-radius-xl);
}

/* Auth / checkout surfaces inherit the same palette instead of a private one. */
html[data-theme="light"] :where(
  body.login-page, body.register-page, body.access-page,
  body.invite-page, body.contract-verify-page, body.payment-page
),
html[data-theme="dark"] :where(
  body.login-page, body.register-page, body.access-page,
  body.invite-page, body.contract-verify-page, body.payment-page
) {
  --accent:         var(--bss-primary);
  --accent-soft:    var(--bss-primary-soft);
  --surface:        var(--bss-surface);
  --surface-2:      var(--bss-primary-subtle);
  --surface-3:      var(--bss-primary-soft);
  --surface-strong: var(--bss-surface-raised);
  --text:           var(--bss-text);
  --text-2:         var(--bss-text-soft);
  --text-3:         var(--bss-text-faint);
  --muted:          var(--bss-text-soft);
  --line:           var(--bss-border);
  --line-strong:    var(--bss-border-strong);
  --input-bg:       var(--bss-surface-sunken);
  --input-focus:    var(--bss-surface);
  --shadow:         var(--bss-shadow-lg);
}

/* =========================================================================
   2 — NOVA (admin workspace) → brand engine
   Declared on `.panel-nova` because custom properties inherit by proximity.
   ========================================================================= */

.panel-nova {
  --nova-canvas:       var(--bss-canvas);
  --nova-canvas-deep:  var(--bss-canvas-deep);
  --nova-panel:        var(--bss-glass-bg);
  --nova-panel-solid:  var(--bss-surface);
  --nova-panel-soft:   var(--bss-surface-muted);
  --nova-glass:        var(--bss-glass-bg);
  --nova-glass-strong: var(--bss-surface-overlay);
  --nova-ink:          var(--bss-text);
  --nova-ink-soft:     var(--bss-text-soft);
  --nova-muted:        var(--bss-text-soft);
  --nova-faint:        var(--bss-text-faint);
  --nova-line:         var(--bss-border);
  --nova-line-strong:  var(--bss-border-strong);
  --nova-white-line:   var(--bss-glass-border);

  --nova-accent:    var(--bss-accent);
  --nova-accent-2:  var(--bss-primary);
  --nova-cyan:      var(--bss-success);
  --nova-pink:      var(--bss-accent);
  --nova-success:   var(--bss-success);
  --nova-warning:   var(--bss-warning);
  --nova-danger:    var(--bss-danger);

  --nova-accent-soft: var(--bss-accent-soft);
  --nova-cyan-soft:   var(--bss-success-soft);

  --nova-shadow-xs:    var(--bss-shadow-xs);
  --nova-shadow-sm:    var(--bss-shadow-sm);
  --nova-shadow-md:    var(--bss-shadow-md);
  --nova-shadow-glass: var(--bss-shadow-lg), var(--bss-shadow-inset);

  --nova-radius-xs: var(--bss-radius-xs);
  --nova-radius-sm: var(--bss-radius-sm);
  --nova-radius-md: var(--bss-radius-md);
  --nova-radius-lg: var(--bss-radius-xl);
  --nova-ease:      var(--bss-ease);

  /* Contract tokens re-derived inside the panel subtree. */
  --surface-2: var(--bss-primary-subtle);
  --surface-3: var(--bss-primary-soft);
  --ice:       var(--bss-text);
}

/* =========================================================================
   3 — CUSTOMER PANEL (--cp-*) → brand engine
   ========================================================================= */

html[data-theme="light"],
html[data-theme="dark"] {
  --cp-bg:              var(--bss-bg);
  --cp-bg-soft:         var(--bss-bg-soft);
  --cp-surface:         var(--bss-glass-bg);
  --cp-surface-strong:  var(--bss-surface);
  --cp-surface-muted:   var(--bss-surface-muted);
  --cp-border:          var(--bss-border);
  --cp-border-strong:   var(--bss-border-strong);
  --cp-text:            var(--bss-text);
  --cp-text-soft:       var(--bss-text-soft);
  --cp-text-faint:      var(--bss-text-faint);
  --cp-primary:         var(--bss-primary);
  --cp-primary-strong:  var(--bss-primary-strong);
  --cp-primary-soft:    var(--bss-primary-soft);
  --cp-primary-border:  var(--bss-primary-muted);
  --cp-success:         var(--bss-success);
  --cp-success-soft:    var(--bss-success-soft);
  --cp-warning:         var(--bss-warning);
  --cp-warning-soft:    var(--bss-warning-soft);
  --cp-danger:          var(--bss-danger);
  --cp-danger-soft:     var(--bss-danger-soft);
  --cp-info:            var(--bss-info);
  --cp-shadow:          var(--bss-shadow-lg);
  --cp-shadow-soft:     var(--bss-shadow-sm);
  --cp-radius-xl:       var(--bss-radius-xl);
  --cp-radius-lg:       var(--bss-radius-lg);
  --cp-radius-md:       var(--bss-radius-md);
  --cp-radius-sm:       var(--bss-radius-sm);

  /* --- Visitor workspace (--v-*) ------------------------------------- */
  --v-bg:    var(--bss-bg);
  --v-card:  var(--bss-surface);
  --v-soft:  var(--bss-surface-muted);
  --v-line:  var(--bss-border);
  --v-blue:  var(--bss-primary);
  --v-blue2: var(--bss-primary-strong);
  --v-text:  var(--bss-text);
  --v-muted: var(--bss-text-soft);

  /* --- Legacy navy aliases: charcoal per brand rule ------------------- */
  --premium-v13-navy:   var(--bss-canvas);
  --premium-v13-navy-2: var(--bss-bg-soft);
  --luxury-navy:        var(--bss-canvas);
  --luxury-navy-2:      var(--bss-surface);
}

/* =========================================================================
   4 — Surface enforcement for legacy hardcoded page backgrounds
   ========================================================================= */

html[data-theme="dark"] body.panel-body,
html[data-theme="dark"] body.store-page,
html[data-theme="dark"] body.login-page,
html[data-theme="dark"] .store-page {
  background-color: var(--bss-bg);
}

html[data-theme="dark"] .visitor-app-body,
html[data-theme="dark"] body.visitor-app-body,
html[data-theme="dark"] .visitor-login-body {
  background-color: var(--bss-bg);
}

html[data-theme="dark"] .visitor-sidebar {
  background: var(--bss-bg-soft);
  border-left-color: var(--bss-border);
}

html[data-theme="dark"] .visitor-topbar,
html[data-theme="dark"] .visitor-bottom-nav {
  background: var(--bss-surface-overlay);
  backdrop-filter: var(--bss-glass-blur);
}

/* Visitor login hero: brand gradient, never navy. */
.visitor-login-body {
  background:
    radial-gradient(circle at 12% 8%, var(--bss-primary-soft), transparent 42%),
    linear-gradient(145deg,
      var(--bss-blue-700) 0%,
      var(--bss-blue-500) 40%,
      var(--bss-purple-400) 52%,
      var(--bss-blue-50) 52%,
      var(--bss-bg) 100%);
}

html[data-theme="dark"] .visitor-login-body {
  background:
    radial-gradient(circle at 12% 8%, var(--bss-primary-soft), transparent 44%),
    linear-gradient(145deg,
      var(--bss-canvas-deep) 0%,
      var(--bss-blue-950) 46%,
      var(--bss-bg-soft) 100%);
}

/* Warning stays a semantic channel; never promoted to brand chrome. */
.badge.yellow,
.badge.warn,
[data-tone="warn"] {
  color: var(--bss-warning);
}

/* =========================================================================
   5 — Shared a11y / responsive guardrails
   ========================================================================= */

.skip-link,
.customer-skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: var(--bss-z-max);
  padding: var(--bss-space-sm) var(--bss-space-md);
  border-radius: var(--bss-radius-pill);
  background: var(--bss-primary);
  color: var(--bss-on-primary);
  font-weight: var(--bss-weight-bold);
  text-decoration: none;
  box-shadow: var(--bss-shadow-lg);
  transition: top var(--bss-dur) var(--bss-ease);
}

.skip-link:focus,
.customer-skip-link:focus {
  top: 1rem;
}

img,
svg,
video {
  max-width: 100%;
}

@media (max-width: 430px) {
  .container,
  .store-nav nav {
    width: min(100% - 20px, 1220px);
  }

  .modal,
  .drawer {
    border-radius: var(--bss-radius-md);
  }

  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 820px) {
  .panel-content,
  .customer-content,
  .visitor-main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}