/* ================================================================
   SUPRBAD NAVIGATION — CSS TOKENS (nav-exclusive)
   SBNav-owned design constants. Nothing visual is hardcoded
   elsewhere in the nav CSS — these properties cascade to every
   nav component.

   The genuinely cross-subsystem tokens (--sb-color-bg, --sb-color-border,
   --sb-font-primary) live in the Shared Design System — since ADR-002 (M1,
   2026-07-13) that is plugins/suprbad-frontend-foundation/assets/css/tokens.css,
   registered by that plugin as 'sb-design-tokens'. This file declares that
   handle as its dependency and must load after it. Ownership model:
   docs/FRONTEND-ARCHITECTURE.md.

   The six --sb-color-button-* properties were repatriated to SB Buttons'
   own sb-buttons.css (Group 0) at migration M3 and removed from this file
   at M4 — closing the follow-up Revision 1 deferred. They are SB Buttons'
   primitive; see docs/BUTTON-SYSTEM-RUNBOOK.md §2.3.
   ================================================================ */

:root {
  /* ── Color (nav-exclusive) ──────────────────────────────────── */

  /* DELIBERATE LITERALS (ADR-003 F1 finding): --sb-color-bg-panel and
     --sb-color-text-on-dark keep literal values even though they equal
     --sb-color-bg. The open-menu header inversion (header.css) locally
     re-points --sb-color-bg/--sb-color-text inside .sb-nav-header, and
     custom properties resolve at the USE site — aliasing these two to
     var(--sb-color-bg) would make the panel/on-dark text go dark exactly
     when the menu opens. Value drift between them and --sb-color-bg is
     caught by npm run audit:design, not by aliasing. */
  --sb-color-bg-panel: #edeae4; /* desktop menu panel (same as page — see note above) */
  --sb-color-bg-dark: #1a1a1a; /* mobile menu + desktop menu top strip (nav-exclusive dark, NOT ink) */
  --sb-color-bg-dark-soft: #242424; /* hover states on dark surfaces */
  --sb-color-text: var(
    --sb-color-ink
  ); /* primary text on light — shared ink since 2026-07-19 (F1) */

  /* --sb-color-text-muted moved to Foundation's tokens.css (sb-design-tokens)
     2026-07-19 (ADR-003 F1) — second consumer: SuprBad UX's pencil-icon
     stroke. Same name, same value; consume as before. */
  --sb-color-text-faint: #b0ada8; /* tertiary / placeholder */
  --sb-color-text-on-dark: #edeae4; /* primary text on dark surfaces (see literals note above) */
  --sb-color-text-muted-on-dark: var(
    --sb-color-text-muted
  ); /* muted on dark — same value by design (F1) */

  /* --sb-color-accent moved to Foundation's tokens.css (sb-design-tokens)
     2026-07-17 — it gained a second real consumer (the Navigation Feedback
     System) and passed the Admission Test; SuprBad UX was already
     referencing it. Consume via var(--sb-color-accent) as before. */
  --sb-color-border-dark: #2e2e2e; /* subtle dividers on dark */
  --sb-color-connector: var(
    --sb-color-ink
  ); /* connector lines and dots — shared ink since 2026-07-19 (F1) */

  --sb-color-connector-inactive: transparent; /* hidden connectors */

  /* The six --sb-color-button-* properties formerly defined here moved to
     SB Buttons' own sb-buttons.css Group 0 (migration M3/M4, ADR-002). */

  /* ── Typography (nav-exclusive) ─────────────────────────────── */

  --sb-font-secondary: 'Libre Baskerville', serif; /* 400 / 400i — tagline, editorial */
  --sb-font-utility: 'Inter', sans-serif; /* 300, 400 — body, strip, utility */
  --sb-weight-black: 900;
  --sb-weight-regular: 400;
  --sb-weight-light: 300;

  /* ── Spacing ─────────────────────────────────────────────────── */

  --sb-header-px: 40px; /* header horizontal padding */
  --sb-header-px-mobile: 20px;
  --sb-menu-top-strip-h: 52px; /* dark top strip height inside desktop menu */
  --sb-panel-px: 48px; /* desktop panel horizontal padding */
  --sb-strip-h: 64px; /* description strip height */
  --sb-strip-px: 40px; /* description strip horizontal padding */

  /* Header heights */
  --sb-header-h-expanded: auto; /* grows to fit content */
  --sb-header-h-compact: 52px;

  /* ── Motion ─────────────────────────────────────────────────── */

  --sb-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --sb-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --sb-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --sb-dur-header: 200ms; /* header state transition */
  --sb-dur-panel-open: 200ms; /* desktop menu panel appear */
  --sb-dur-panel-close: 150ms; /* desktop menu panel disappear */
  --sb-dur-panel-swap: 150ms; /* L3 content cross-fade */
  --sb-dur-strip: 100ms; /* description strip text transition */
  --sb-dur-line: 150ms; /* connector line reveal */
  --sb-dur-mobile: 220ms; /* mobile panel slide */
  --sb-dur-commit: 300ms; /* navigation-commit sweep + recession (M7.6) */

  /* ── Navigation Feedback System (M7.6) ───────────────────────── */

  /* Behaviour lives in JS (SBNav.commitNavigation); appearance lives
     here. The commit accent deliberately DERIVES from the shared
     accent token so palette changes, seasonal themes, or dark mode
     re-skin the feedback system with zero interaction-code changes.
     -soft is the translucent sweep wash (kept as rgb() because the iPad
     Safari 12 support floor rules out color-mix()). MANUAL-SYNC CAVEAT
     RETIRED (ADR-003 F6, 2026-07-19): when the accent is changed through
     the Design System Admin, Foundation's emitter recomputes and emits
     -soft from the published accent automatically (DerivedValues.php).
     This baked literal only needs to change if the BAKED accent default
     in tokens.css changes — i.e. at graduation, in the same commit. */
  --sb-color-nav-commit: var(--sb-color-accent);
  --sb-color-nav-commit-soft: rgb(200 16 46 / 12%);
  --sb-opacity-nav-recede: 0.35; /* non-chosen items while committed */

  /* Sweep shape. The wash is a gradient on a 300%-wide background image;
     the animation slides the visible window across it (100% → 0%), so the
     wash enters at the row's left edge, travels right, and HOLDS with its
     ramp peaking just before the row's right edge — the held right-side
     wash is deliberate (owner-approved composition). These stops are in
     IMAGE coordinates: multiply by 3 for row coordinates at the hold
     (e.g. peak 31% ≈ 93% of the row). Raise -from toward -peak for a
     narrower wash, lower it toward 0% for a wider one. */
  --sb-nav-commit-sweep-from: 15%; /* ramp start (≈45% of row at hold) */
  --sb-nav-commit-sweep-peak: 31%; /* ramp peak  (≈93% of row at hold) */
  --sb-nav-commit-sweep-end: 38%; /* falloff — just past the row edge  */

  /* ── Z-index scale ───────────────────────────────────────────── */

  --sb-z-header: 50;
  --sb-z-menu: 200;
  --sb-z-mobile: 300;
  --sb-z-overlay: 10;

  /* ── Menu drop-down panel ───────────────────────────────────── */

  --sb-menu-panel-h: min(68vh, 680px); /* capped: 68vh can over-extend on tall/large viewports */
  --sb-nav-l2-col-w: 280px; /* L2 column width — used in both l2-col and l3-zone calc */
  --sb-header-h: 52px; /* fallback; JS overrides with actual value */

  /* ── Breakpoints (referenced in JS, duplicated here for docs) ── */

  /* Mobile:  < 768px   */

  /* Desktop: ≥ 768px   */
}

/* ── Reduced motion ─────────────────────────────────────────────
   Override all animation tokens to near-zero. Every transition
   in the system uses these custom properties, so this one block
   covers the entire UI without needing per-rule overrides.
   Hardcoded durations (button hover, bg colour) are intentionally
   left — they are sub-100ms micro-feedback, not layout animation. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --sb-dur-header: 0.01ms;
    --sb-dur-panel-open: 0.01ms;
    --sb-dur-panel-close: 0.01ms;
    --sb-dur-panel-swap: 0.01ms;
    --sb-dur-strip: 0.01ms;
    --sb-dur-line: 0.01ms;
    --sb-dur-mobile: 0.01ms;
    --sb-dur-commit: 0.01ms; /* commit state applies instantly; sweep collapses */
  }
}