/* BooCode (Ember) polish layer — a restrained refinement of the default
   theme, NOT a redesign. Keeps the orange-on-charcoal identity; just gives
   the flat chrome gentle depth, the primary action a warm glow, a crisp
   keyboard focus ring, and a hair tighter title tracking. Calm enough to
   live in for hours — no background animation, no scanlines, no canvas.

   SCOPE DISCIPLINE (the cross-theme regression trap): EVERY rule below is
   scoped under `.theme-ember`, so the other 22 themes are byte-for-byte
   unaffected. No global body, html, universal, or heading rule; no global
   line-height or letter-spacing change (those reflow every theme). The few
   `.theme-ember.dark` rules are still ember-only — both classes must be
   present — so they never leak either.

   This sheet is imported UNLAYERED (globals.css, after the tailwindcss
   import), so these rules win over Tailwind's layered utilities. A bare
   box-shadow therefore REPLACES a component's `ring-1` hairline — so every
   elevation below composes the hairline back in via --ember-hairline (except
   the composer, which already has a real CSS `border`).

   Hooks are the same stable ones BooCode+ uses: [data-slot=card],
   [data-slot=dialog-content], the menu [data-slot=*-content]s, the composer's
   unique `.focus-within:ring-primary/15` box, and the primary
   [data-slot=button][data-variant=default]. */

.theme-ember {
  /* Hairline = the stock `ring-foreground/10` edge, re-expressed as a shadow
     so it can ride alongside the elevation shadows in one box-shadow list. */
  --ember-hairline: 0 0 0 1px color-mix(in oklab, var(--foreground) 9%, transparent);

  /* Consistent elevation scale. Resting surfaces (cards, composer) → 1;
     floating chrome (menus) → 2; the modal layer (dialog) → 3. Drop shadows
     are the primary depth cue in light mode; tuned calm (Material-ish alphas),
     never loud. */
  --ember-shadow-1: 0 1px 2px -1px rgb(0 0 0 / 0.40), 0 3px 8px -3px rgb(0 0 0 / 0.28);
  --ember-shadow-2: 0 3px 8px -3px rgb(0 0 0 / 0.44), 0 12px 28px -8px rgb(0 0 0 / 0.36);
  --ember-shadow-3: 0 6px 14px -4px rgb(0 0 0 / 0.50), 0 24px 56px -14px rgb(0 0 0 / 0.44);

  /* Edge-light: a no-op in light mode (drop shadows do the work there). */
  --ember-edge: 0 0 transparent;

  /* Restrained warm glow for the PRIMARY action only. Rest = a faint orange
     rim + soft drop; hover blooms. Colored shadows read on dark charcoal where
     black shadows fade, so the primary stays legible as "the" action. */
  --ember-glow-rest:
    0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent),
    0 2px 8px -3px color-mix(in oklab, var(--primary) 32%, transparent),
    0 1px 2px -1px rgb(0 0 0 / 0.40);
  --ember-glow-hover:
    0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent),
    0 5px 18px -4px color-mix(in oklab, var(--primary) 55%, transparent),
    0 1px 2px -1px rgb(0 0 0 / 0.40);

  /* A gentle decel curve (no overshoot) — intentionally calmer than
     BooCode+'s spring, to suit a theme meant for long sessions. */
  --ember-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* On near-black, drop shadows barely read — a hair of warm top edge-light is
   the real "lifted" cue in dark mode. Tinted to the warm foreground so it
   stays on-brand and never cool. */
.theme-ember.dark {
  --ember-edge: inset 0 1px 0 0 color-mix(in oklab, var(--foreground) 7%, transparent);
}

/* ── Elevation ────────────────────────────────────────────────────────────
   Each surface keeps its edge (hairline, re-composed) and gains depth. */

/* Cards — resting elevation. */
.theme-ember [data-slot="card"] {
  box-shadow: var(--ember-edge), var(--ember-hairline), var(--ember-shadow-1);
}

/* The composer message box (ChatInput) — its own unique focus-within hook.
   It already has a real CSS `border`, so NO hairline here (that would double
   the edge). Only at rest: on focus-within the stock orange ring/border takes
   over, so we step aside with :not(:focus-within). */
.theme-ember .focus-within\:ring-primary\/15:not(:focus-within) {
  box-shadow: var(--ember-edge), var(--ember-shadow-1);
}

/* Floating menus — dropdown / context / their submenus. (Replaces the stock
   shadow-md/lg with the consistent themed scale.) */
.theme-ember [data-slot="dropdown-menu-content"],
.theme-ember [data-slot="dropdown-menu-sub-content"],
.theme-ember [data-slot="context-menu-content"],
.theme-ember [data-slot="context-menu-sub-content"] {
  box-shadow: var(--ember-edge), var(--ember-hairline), var(--ember-shadow-2);
}

/* Dialog — the modal layer, strongest depth to separate it from the (light)
   scrim. */
.theme-ember [data-slot="dialog-content"] {
  box-shadow: var(--ember-edge), var(--ember-hairline), var(--ember-shadow-3);
}

/* ── Primary action glow ──────────────────────────────────────────────────
   The default-variant Button only (Send, primary confirm). box-shadow /
   transform / filter only — never a layout-triggering prop, so no shift. */
.theme-ember [data-slot="button"][data-variant="default"] {
  box-shadow: var(--ember-glow-rest);
  transition:
    box-shadow 0.26s var(--ember-ease),
    transform 0.18s var(--ember-ease),
    filter 0.18s var(--ember-ease);
}
.theme-ember [data-slot="button"][data-variant="default"]:not([disabled]):hover {
  box-shadow: var(--ember-glow-hover);
  filter: brightness(1.04);
}
.theme-ember [data-slot="button"][data-variant="default"]:not([disabled]):active {
  transform: translateY(0.5px) scale(0.99);
}

/* ── Keyboard focus ring ──────────────────────────────────────────────────
   A crisp, fully-opaque 2px orange outline replaces the stock soft 3px/50%
   ring — cleaner and more visible for keyboard nav. The outline follows each
   control's border-radius automatically. Form fields are intentionally left
   alone (the composer owns its focus-within ring; inputs keep theirs). */
.theme-ember button:focus-visible,
.theme-ember [data-slot="button"]:focus-visible,
.theme-ember a:focus-visible,
.theme-ember [role="switch"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* Drop the stock soft box-shadow ring on non-primary buttons so only the crisp
   outline shows. (The primary button keeps its glow box-shadow on focus.) */
.theme-ember [data-slot="button"]:not([data-variant="default"]):focus-visible {
  box-shadow: none;
}

/* ── Type rhythm ──────────────────────────────────────────────────────────
   The only safe scoped tightening: a hair of negative tracking on display /
   title text. NO line-height changes and nothing global — body copy, chat
   text, and code keep their exact metrics, so reading rhythm and the other
   themes are untouched. */
.theme-ember .boocode-display,
.theme-ember [data-slot="dialog-title"],
.theme-ember [data-slot="card-title"] {
  letter-spacing: -0.01em;
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   The glow/shadows/outline are static; only the primary button transitions.
   Disable them (and the press transform) when the user asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  .theme-ember [data-slot="button"][data-variant="default"] {
    transition: none;
  }
  .theme-ember [data-slot="button"][data-variant="default"]:not([disabled]):active {
    transform: none;
  }
}
