/* ============================================================
   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;

  /* Height of the studio top bar (.studio-topbar). Copycat pages offset their
     own sticky headers by this so both bars stack cleanly. */
  --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 (purse, 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 — a full-width bar in the Immersive Studio style that sits
   ABOVE a copycat page's own website. Used on pages that have their own look
   (purse, agentic-ai): the bar is the studio "frame", the custom site lives
   under it. Sticky so the back affordance is always available. Self-contained
   (literal colours, own font) so the host page's styles can't distort it. */
.studio-topbar {
  position: sticky;
  top: 0;
  z-index: 3000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  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);
}
.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;
}
.studio-topbar__back .ico {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.studio-topbar__back:hover .ico { background: #fff; color: #000; transform: translateX(-2px); }
.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; }