/* ============================================================
   IMMERSIVE STUDIO — DESIGN SYSTEM
   Single source of truth for shared tokens and UI components.
   Link this BEFORE any page-level <style> so a page can still
   override a token locally (e.g. the car configurator's bg).
   ============================================================ */

:root {
  /* ── Brand palette ── */
  --bg:            #000000;
  --white:         #FFFFFF;
  --muted:         rgba(255, 255, 255, 0.55);
  --line:          rgba(255, 255, 255, 0.10);

  --purple-mid:    #7B2FFF;
  --purple-hi:     #B264FF;
  --pink:          #D44EFF;

  /* Accent blues — experiences & homepage card glows */
  --blue:          #2E6EFF;
  --blue-hi:       #5A96FF;

  /* ── Glass surfaces (pills, control bars) ── */
  --surface:            rgba(10, 10, 10, 0.55);
  --surface-line:       rgba(255, 255, 255, 0.18);
  --surface-line-hover: rgba(255, 255, 255, 0.45);

  /* ── Shape & motion ── */
  --radius-pill:   100px;
  --blur:          8px;

  /* ── The studio frame's geometry (.studio-topbar) ──

     ONE NUMBER, because the frame's height and the room it takes from the page
     are now the same thing: the bar is permanently out, so the twelve offsets
     that read this across perfume/, fashion/, jewelry/, poste.css and
     configurator.css are all clearing a bar that is really there.

     It was 0 for as long as the bar folded to a line — the bar was out of flow
     and a revealed one overlaid the top of the page rather than pushing it
     down, which is the fullscreen-browser idiom and was affordable because the
     overlap lasted two seconds. It does not fold any more (common/docs/025), so
     that same overlap would now last the whole experience — which is not a
     thing to accept, it is a bar sitting on fashion's nav for good. The second
     token that used to hold the bar's real height (--is-topbar-bar-h) went with
     the distinction.

     The bar is still `position: fixed` — every page's chrome under it is
     positioned rather than flowed, and perfume needs it out of flow for
     reasons of its own (perfume/css/layout.css). What reserves the space is the
     one `body:has(> .studio-topbar)` rule below. */
  --is-topbar-h: 46px;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Home link — the "Immersive Studio" wordmark pinned top-left, returning to
   the homepage. This is the ONE element that persists across every page,
   including the copycat brand pages (fashion, agentic-ai) that otherwise adopt a
   real site's look and do NOT use the rest of this design system.

   It is therefore fully self-contained: it declares its own box model, font,
   and LITERAL colours (no themeable tokens a host page could override), and
   carries its own frosted-glass surface so it stays legible on any background —
   light or dark — without the host page doing anything. */
.studio-home {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 2000;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 12, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);

  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition: background 0.2s ease, border-color 0.2s ease;
}
.studio-home:hover {
  background: rgba(20, 20, 24, 0.72);
  border-color: rgba(255, 255, 255, 0.42);
}

/* ── Studio top bar — the frame ─────────────────────────────────────────────

   A full-width bar in the Immersive Studio style that sits ABOVE a page's own
   website. The bar is the studio "frame"; the experience lives under it. It is
   the one element every experience carries, so it is fully self-contained:
   literal colours (no themeable token a host page could override), its own font
   and its own box model, so a copycat page's styles cannot distort it.

   IT DOES NOT FOLD. It used to slide up to a 3px line a couple of seconds
   after the experience arrived and come back when the cursor reached the top
   of the screen — the reach strip, the `data-folded` attribute, the two hover
   thresholds and the slide are all gone, and so is the wrapper element that
   existed to be a hover zone of constant height. `.studio-topbar` IS the bar
   now. See common/docs/025.

   `__back` goes up ONE level and is labelled with wherever that is. Since
   product-configuration.html was deleted, the grid on the homepage is the only
   way into an experience, so every page's back link is "Immersive Studio"
   pointing at `/`. Keep the rule, not the uniformity: if a page ever sits under
   another page again, its back link follows the click that got you there.

   FIXED, and the page is padded to clear it by the rule below rather than the
   bar being flowed. Two reasons it is not simply `position: sticky` in flow,
   which would reserve its own space and need no second rule: the configurators
   and splat are `height: 100%` compositions whose every layer is positioned
   against the VIEWPORT, so 46px of flow at the top of their body buys nothing
   and adds a scrollbar; and on perfume, `overflow-x: hidden` on body makes body
   a scroll container that never scrolls, so a sticky child rides off the top of
   the screen after 46px (perfume/css/layout.css). Fixed is the one behaviour
   that is right on all seven pages. */
.studio-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--is-topbar-h);
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffffff;
}

/* Subtle studio-purple glow line along the bottom edge */
.studio-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(178, 100, 255, 0.55), transparent);
}

/* THE ROOM THE FRAME TAKES, and the only rule here that touches a host page's
   layout. Keyed on the bar's own presence, so it lands on exactly the pages
   that mount it and not on the homepage, which loads this file and has no
   frame. The script always inserts the bar as a direct child of <body>, which
   is what makes `> ` safe to require — and requiring it is what keeps a nested
   `.studio-topbar` inside some page's own scroller from silently padding the
   document.

   A page whose composition is positioned against the viewport rather than
   flowed can override this to 0 and clear the bar its own way; perfume is the
   one that does. */
body:has(> .studio-topbar) { padding-top: var(--is-topbar-h); }

.studio-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
/* No arrow in here any more. The ringed ← used to sit a centimetre from the
   configurator's own back chevron, one going home and one going to the
   catalog, and the two read as a pair. The wordmark on its own is still the
   way out — it is the studio's name in the corner of the page, which is the
   oldest link there is — and it dims on hover rather than sliding. */
.studio-topbar__back:hover { color: rgba(255, 255, 255, 0.72); }
.studio-topbar__tag {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Glass pill — floating control / label chip (back buttons, hints,
   toggles). Compose with utility markup as needed. */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-line);
  background: var(--surface);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ui-pill:hover { border-color: var(--surface-line-hover); color: #fff; }

/* ── Dev-mode marker ──
   The purple pill that says the unfinished pages are reachable. Added by
   common/js/dev-mode.js on every page, so it is never a guess whether the
   flag took. Lives here rather than on the homepage because it is site-wide.
   z-index sits above the experiences' own overlays; pointer-events: none so it
   can never eat a click meant for the page underneath. */
.dev-marker {
  position: fixed;
  bottom: 1.1rem;
  left: 1.1rem;
  z-index: 2147483647;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(178, 100, 255, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Literal purple, NOT var(--purple-hi): pages retint that token for their own
     theme (car.css turns it blue), and this marker must look the same on every
     page to be recognisable at a glance. */
  color: #B264FF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}