/*
 * Morphing nav dropdown — SKIN.
 *
 * This is the file you edit per project. `morphing-nav-dropdown.css` is
 * structure and stays byte-identical to the library forever (THEMING.md).
 *
 * Values are scoped to the element's own root class rather than :root, so a
 * host app that happens to define --surface or --border cannot leak into the
 * component. That scoping is the whole point of this file — do not "simplify"
 * it to :root.
 *
 * The element ships two skins because it is used two ways: over imagery (the
 * default — a light bar and a near-black panel) and on a plain page
 * (`.sp-mnav--on-surface` — Soft Product ink on white).
 */

.sp-mnav {
  /* Bar: sits on top of a photo or video, so it is white with a dimmed rest state. */
  --sp-mnav-bar-ink: #ffffff;
  --sp-mnav-dim: 0.45;
  --sp-mnav-focus: rgba(255, 255, 255, 0.9);
  --sp-mnav-cta-bg: #ffffff;
  --sp-mnav-cta-bg-hover: rgba(255, 255, 255, 0.86);
  --sp-mnav-cta-ink: #111111;

  /* Panel: near-black, faintly warm — it reads as glass over warm imagery
     without costing a backdrop-filter. */
  --sp-mnav-panel-bg: #121011;
  --sp-mnav-panel-border: rgba(255, 255, 255, 0.08);
  --sp-mnav-panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.52), 0 2px 10px rgba(0, 0, 0, 0.4);
  --sp-mnav-ink: #f5f5f7;
  --sp-mnav-ink-dim: rgba(238, 238, 242, 0.62);
  --sp-mnav-pill-bg: rgba(255, 255, 255, 0.055);
  --sp-mnav-frame-bg: rgba(255, 255, 255, 0.04);
  --sp-mnav-card-ink: #ffffff;
  --sp-mnav-card-ink-dim: rgba(255, 255, 255, 0.68);
  --sp-mnav-card-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 28%, rgba(0, 0, 0, 0.3) 56%, rgba(0, 0, 0, 0.8) 100%);

  /* Geometry — measured, see README */
  --sp-mnav-shell: 1100px;
  --sp-mnav-panel-radius: 18px;
  --sp-mnav-pill-radius: 12px;
  --sp-mnav-pill-radius-sm: 10px;
  --sp-mnav-split-w: 720px;
  --sp-mnav-split-h: 392px;
  --sp-mnav-cards-w: 464px;
  --sp-mnav-cards-h: 326px;
  --sp-mnav-list-menu-w: 220px;
  --sp-mnav-list-menu-h: 226px;
  --sp-mnav-list-w: 252px;
  --sp-mnav-row-h: 96px;
  --sp-mnav-item-h: 54px;

  /* Motion — measured off the reference clip, see README */
  --sp-mnav-morph: 0.54s;
  --sp-mnav-ease-morph: cubic-bezier(0.32, 0.72, 0, 1);
}

/* On a plain page rather than over imagery. */
.sp-mnav--on-surface {
  --sp-mnav-bar-ink: #292929;
  --sp-mnav-dim: 0.55;
  --sp-mnav-focus: #292929;
  --sp-mnav-cta-bg: #292929;
  --sp-mnav-cta-bg-hover: #3d3d3d;
  --sp-mnav-cta-ink: #ffffff;

  --sp-mnav-panel-bg: #ffffff;
  --sp-mnav-panel-border: #e5e5e5;
  --sp-mnav-panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.06);
  --sp-mnav-ink: #292929;
  --sp-mnav-ink-dim: #5d5d5d;
  --sp-mnav-pill-bg: #f3f3f3;
  --sp-mnav-frame-bg: #f7f7f7;
}

/* Dark mode: only the on-surface skin needs restating — the default skin is
   already a dark panel, and a light bar over imagery stays light in both. */
.dark .sp-mnav--on-surface,
[data-theme="dark"] .sp-mnav--on-surface {
  --sp-mnav-bar-ink: #f5f5f7;
  --sp-mnav-focus: rgba(255, 255, 255, 0.9);
  --sp-mnav-cta-bg: #f5f5f7;
  --sp-mnav-cta-ink: #141414;
  --sp-mnav-cta-bg-hover: rgba(245, 245, 247, 0.86);

  --sp-mnav-panel-bg: #121011;
  --sp-mnav-panel-border: rgba(255, 255, 255, 0.08);
  --sp-mnav-panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.45);
  --sp-mnav-ink: #f5f5f7;
  --sp-mnav-ink-dim: rgba(238, 238, 242, 0.62);
  --sp-mnav-pill-bg: rgba(255, 255, 255, 0.055);
  --sp-mnav-frame-bg: rgba(255, 255, 255, 0.04);
}

/* ---- Brassword site skin (project override). Bar sits inside the floating
   header island, so the measured 30px top pad drops to 10px; CTA is ink. */
.sp-mnav.sp-mnav--on-surface {
  --sp-mnav-bar-pad-y: 12px;
  --sp-mnav-bar-pad-x: 14px;
  --sp-mnav-bar-ink: var(--ink, #292929);
  --sp-mnav-cta-bg: var(--ink, #292929);
  --sp-mnav-cta-bg-hover: var(--ink-muted, #3d3d3d);
  --sp-mnav-cta-ink: var(--surface, #fffdfa);
  --sp-mnav-panel-bg: var(--surface, #fffdfa);
  --sp-mnav-panel-border: var(--border, #e3dccd);
  --sp-mnav-ink: var(--ink, #292929);
  --sp-mnav-ink-dim: var(--ink-muted, #5d5d5d);
  --sp-mnav-pill-bg: var(--surface-hover, #f1ece1);
  --sp-mnav-frame-bg: var(--surface-subtle, #f6f1e8);
  --sp-mnav-focus: var(--fingerprint, #4f86b8);
}