/* ============================================================
   BizBot — Shared elevation + hover-lift primitive
   App design-uplift loop · L1 (2026-06-14)

   The portfolio's #1 design defect (15/16 verticals) is "flat /
   shadowless / one z-plane" — cards are a fill + 1px hairline with
   shadow only on hover, so the eye gets no help separating primary
   content from chrome. This file is the shared recipe every vertical
   can adopt to gain a real 2-step elevation ladder.

   THEME-AWARE. Light surfaces are the default. Dark-surface values
   kick in when ANY of these is true:
     • an ancestor has [data-theme="dark"], .cockpit, or .elev-dark
     • the OS is in dark mode and the page hasn't opted out
       (add .elev-light / [data-theme="light"] to opt a light app out).

   USAGE — two ways, mix freely:
     1. Tokens in component CSS:
          .card { box-shadow: var(--bb-elev-1); }
          .card:hover { box-shadow: var(--bb-elev-2); }
     2. Utility classes on elements:
          <div class="card bb-elev-1 bb-elevate"> … </div>
   --bb-elev-hi is a 1px top-edge highlight (use inside a box-shadow
   list so cards "catch light"); the dark tokens already include it.

   Reduced-motion safe: .bb-elevate disables transform/transition
   under prefers-reduced-motion.
   ============================================================ */

:root {
  --bb-elev-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --bb-elev-2: 0 6px 16px -4px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .08);
  --bb-elev-hi: inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* Dark surfaces — explicit opt-in (works regardless of OS pref) */
[data-theme="dark"], .cockpit, .elev-dark {
  --bb-elev-1: 0 1px 2px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .045);
  --bb-elev-2: 0 10px 28px -8px rgba(0, 0, 0, .60), 0 3px 8px -2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  --bb-elev-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Dark surfaces — automatic when the OS is dark and the page hasn't
   declared itself a light app. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.elev-light) {
    --bb-elev-1: 0 1px 2px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .045);
    --bb-elev-2: 0 10px 28px -8px rgba(0, 0, 0, .60), 0 3px 8px -2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    --bb-elev-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}

/* Utility classes */
.bb-elev-1 { box-shadow: var(--bb-elev-1); }
.bb-elev-2 { box-shadow: var(--bb-elev-2); }

.bb-elevate {
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
  will-change: transform;
}
.bb-elevate:hover { box-shadow: var(--bb-elev-2); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .bb-elevate { transition: none; will-change: auto; }
  .bb-elevate:hover { transform: none; }
}