@import url('./brand-modules.css');

/* One palette for the public experience and its workspaces. Accent remains
   owned by experience-context, so the Men world keeps its violet identity. */
:root {
  --brand-bg: #292A33;
  --brand-surface: #343440;
  --brand-surface-raised: #3D3C4B;
  --brand-text: #F3F4FA;
  --brand-muted: #B8B7CA;
  --brand-silver: #E4E5F0;
  --brand-lilac: #C5B5F4;
  --brand-accent: var(--pink, #FF00A8);
  --brand-on-accent: #211522;
  --brand-line: #E4E5F01A;
  --charcoal: var(--brand-bg);
  --coal: var(--brand-bg);
  --white: var(--brand-text);
  --paper: var(--brand-text);
  --surface: var(--brand-surface);
  --surface-2: var(--brand-surface-raised);
  --panel: var(--brand-surface);
  --muted: var(--brand-muted);
  --quiet: #A9A8BC;
  --line: var(--brand-line);
  --soft: var(--brand-silver);
}

html:not([data-brand-page="world"]):not([data-brand-page="shop"]):not([data-brand-page="app"]) {
  background: var(--brand-bg);
  color: var(--brand-text);
}

::selection {
  color: var(--brand-bg);
  background: var(--brand-lilac);
}

/* Cold glass and a narrow specular edge. No continuously moving decoration. */
.home-page .site-header,
.create-page .site-header {
  background: #292A33D9;
  border: 1px solid #E4E5F022;
  box-shadow: inset 0 1px 0 #FFFFFF08, 0 10px 35px #17182224;
  backdrop-filter: blur(24px) saturate(1.12);
}

.home-page .floating-pill {
  background: #343440CB;
  border-color: #E4E5F032;
  color: var(--brand-silver);
  box-shadow: inset 0 1px 0 #FFFFFF15, 0 14px 40px #16172030;
}

.home-page .orbit { border-color: #C5B5F426; }
.home-page .portrait-category { color: var(--brand-silver); }
.home-page .portrait-card { border-color: #E4E5F038; }
.home-page .portrait-card::after {
  background: linear-gradient(transparent, #292A33E8);
}

.home-page .creator-card,
.home-page .collection-card {
  background: var(--brand-surface);
  box-shadow: inset 0 0 0 1px #FFFFFF06, 0 10px 28px #16172016;
}

.home-page .card-image { filter: saturate(.86); }
.home-page .card-info { color: var(--brand-text); }
.home-page .card-info-bottom { color: var(--brand-silver); }

.home-page .world-preview,
.home-page .home-app-preview,
.home-page .home-create-entry {
  background-image: linear-gradient(125deg, #FFFFFF04, transparent 48%);
  box-shadow: inset 0 1px 0 #FFFFFF06, 0 14px 40px #1718220A;
}

/* The mobile demo is part of the same world, with pill controls rather than
   pale rows inherited from the first concept. */
.home-page .experience-tab,
.home-page .experience-tab:last-child {
  padding: 18px 20px;
  border: 1px solid #E4E5F019;
  border-radius: 24px;
  background: #292A3359;
  color: var(--brand-muted);
  margin-bottom: 10px;
}

.home-page .experience-tab.active {
  color: var(--brand-text);
  border-color: #C5B5F450;
  background: linear-gradient(120deg, #C5B5F40D, transparent 75%), var(--brand-surface-raised);
  box-shadow: inset 0 1px 0 #FFFFFF0A;
}

.home-page .experience-tab .tab-number { color: var(--brand-lilac); }
.home-page .experience-tab small { color: var(--brand-muted); }
.home-page .experience .button-dark:hover {
  background: var(--brand-text);
  color: var(--brand-bg);
}

.home-page .button-pink {
  color: var(--brand-on-accent);
  box-shadow: inset 0 1px 0 #FFFFFF2B, 0 7px 25px color-mix(in srgb, var(--pink) 12%, transparent);
}

.home-page .button-pink:hover {
  background: color-mix(in srgb, var(--pink) 87%, white);
  box-shadow: inset 0 1px 0 #FFFFFF36, 0 9px 30px color-mix(in srgb, var(--pink) 18%, transparent);
}
html[data-brand-page="create"] :is(.create-account--model .create-primary, .create-close .create-primary, .crew-invite .recruit-button) {
  color: var(--brand-on-accent);
}
html[data-brand-page="create"] .crew-invite .recruit-button:hover {
  background: color-mix(in srgb, var(--pink) 87%, white);
}

.home-page .demo-dock { box-shadow: inset 0 1px 0 #FFFFFF0C, 0 12px 40px #15151F33; }
.demo-surface-bar { background: #E4E5F008; color: var(--brand-silver); }
.demo-surface-bar .demo-menu-link { background: var(--brand-silver); color: var(--brand-bg); }

/* Age/preferences entry and shared navigation use the same graphite. */
.entry-dialog { background: var(--brand-bg); color: var(--brand-text); }
.entry-dialog::backdrop { background: var(--brand-bg); }
.entry-aura {
  background:
    radial-gradient(ellipse at 12% 25%, #FF00A80A, transparent 50%),
    radial-gradient(ellipse at 90% 85%, #C5B5F40E, transparent 50%);
}
.entry-panel {
  background: linear-gradient(140deg, #FFFFFF06, transparent), var(--brand-surface);
  box-shadow: inset 0 1px 0 #E4E5F00E, 0 30px 100px #17182222;
}
.entry-choice { color: var(--brand-text); }
.entry-exit, .entry-cancel { color: var(--brand-muted); }
.entry-denied button { background: var(--brand-silver); color: var(--brand-bg); }
.world-segments { background: #E4E5F008; box-shadow: inset 0 0 0 1px #E4E5F017; }
.world-segments button[aria-pressed="true"], .entry-enter { color: var(--brand-on-accent); }

/* App presentation chrome, separate from the phone's dark interface. */
html[data-brand-page="app"] body { background: var(--brand-silver); }
html[data-brand-page="app"] .desktop-note h1 span { color: #77738B; }
html[data-brand-page="app"] :is(.desktop-note p, .desktop-note-bottom, .desktop-caption) { color: #666576; }
html[data-brand-page="app"] .device {
  border-color: #3D3C4B;
  box-shadow: 0 32px 80px #292A3324, 0 4px 12px #292A331F, inset 0 0 0 1px #E4E5F026;
}

html.web-experience .desktop-stage {
  background: radial-gradient(ellipse at 50% 0, #C5B5F408, transparent 65%), #24252E;
}
html.web-experience .device { box-shadow: 0 20px 65px #1718222B, inset 0 0 0 1px #E4E5F008; }
html.web-experience :is(.app-header, .bottom-nav) { background: #E4E5F003; }
html.web-experience .surface-switch { background: #E4E5F008; color: var(--brand-muted); }
html.web-experience .surface-switch :is(a[aria-current], a.active) { background: var(--brand-silver); color: var(--brand-bg); }
html.web-experience .app-scroll { scrollbar-color: #C5B5F440 transparent; }
html.web-experience .app-scroll::-webkit-scrollbar-thumb { background: #C5B5F440; }

html:is([data-brand-page="app"], [data-brand-page="profiles"]) :is(.demo-badge, .website-link) { color: var(--brand-silver); }
html:is([data-brand-page="app"], [data-brand-page="profiles"]) .finder-input-wrap {
  background: var(--brand-surface);
  box-shadow: inset 0 0 0 1px #E4E5F018;
}
html:is([data-brand-page="app"], [data-brand-page="profiles"]) .finder-result { background: var(--brand-surface); }
html:is([data-brand-page="app"], [data-brand-page="profiles"]) .finder-result.exact-match {
  background: color-mix(in srgb, var(--app-accent) 6%, var(--brand-surface));
}
html:is([data-brand-page="app"], [data-brand-page="profiles"]) .profile-hero::after {
  background: linear-gradient(180deg, #292A3326 5%, transparent 32%, #292A3355 58%, var(--brand-bg) 100%);
}
html:is([data-brand-page="app"], [data-brand-page="profiles"]) :is(
  .button:not(.secondary):not(.ghost):not(.danger), .filter-chip.active, .discovery-switch button.active,
  .slide-open, .profile-tabs button.active, .reminder-button.active,
  .finder-input-wrap button, .bubble-row.me .bubble, .chat-compose button,
  .nav-counter, .spaces-shortcut-icon, .spaces-hero
) { color: var(--brand-on-accent); }

/* Light interaction sheets retain their own contrast, now in cool silver. */
html:is([data-brand-page="app"], [data-brand-page="profiles"]) .sheet {
  --muted: #666576;
  --quiet: #75748B;
  --line: #292A331A;
  background: var(--brand-text);
  color: var(--brand-bg);
}
html:is([data-brand-page="app"], [data-brand-page="profiles"]) :is(
  .checkout-creator, .checkout-total, .gallery-controls>button,
  .demo-form input, .demo-form textarea, .demo-form select
) { background: var(--brand-silver); color: var(--brand-bg); }
html:is([data-brand-page="app"], [data-brand-page="profiles"]) .gallery-controls { border-color: #292A3318; }

/* Creator-selected world moods remain independent. Velvet adopts the brand
   base; Paper becomes cool silver, while Afterglow and Chrome retain theirs. */
html[data-brand-page="world"]:not([data-vibe]),
html[data-brand-page="world"][data-vibe="velvet"] {
  --world-bg: var(--brand-bg);
  --world-surface: var(--brand-surface);
  --world-text: var(--brand-text);
  --world-muted: var(--brand-muted);
  --world-tint: var(--brand-lilac);
  --world-ink: var(--brand-bg);
}
html[data-brand-page="world"][data-vibe="paper"] {
  --world-bg: var(--brand-text);
  --world-surface: var(--brand-silver);
  --world-text: var(--brand-bg);
  --world-muted: #666576;
  --world-tint: #AAA1C8;
}
html[data-brand-page="world"][data-vibe="paper"] .world-header { background: var(--brand-bg); }
html[data-brand-page="world"][data-vibe="paper"] .world-room-nav { background: #E4E5F0EB; }
html[data-brand-page="world"][data-vibe="paper"] :is(.world-outro, .backstage-note) { background: #D6D1E6; }

.motion-atmosphere { background: var(--brand-bg); }
.motion-atmosphere--fallback {
  background:
    radial-gradient(ellipse at 65% 52%, color-mix(in srgb, var(--pink) 8%, transparent), transparent 48%),
    radial-gradient(ellipse at 28% 45%, #C5B5F40A, transparent 55%),
    linear-gradient(160deg, #292A33, #252630);
}

@media (hover: hover) and (pointer: fine) {
  .home-page :is(.creator-card, .collection-card, .world-preview-stage) {
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .home-page :is(.creator-card, .collection-card, .world-preview-stage):hover {
    border-color: #C5B5F463;
    box-shadow: inset 0 0 0 1px #FFFFFF0D, 0 14px 34px #17182226;
  }
  .home-page .portrait-front:hover { box-shadow: 0 30px 70px #17182245, 0 0 0 1px #C5B5F440; }
}

@media (max-width: 600px) {
  html[data-brand-page="app"] body { background: var(--brand-bg); }
  html[data-brand-page="app"] .device { box-shadow: none; }
  html.web-experience .desktop-stage { background: var(--brand-bg); }
  .home-page .experience-tab,
  .home-page .experience-tab:last-child { padding: 16px; border-radius: 21px; }
}

html[data-motion="off"] .home-page :is(.creator-card, .collection-card, .world-preview-stage, .portrait-card),
.reduce-motion .home-page :is(.creator-card, .collection-card, .world-preview-stage, .portrait-card) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .home-page :is(.creator-card, .collection-card, .world-preview-stage, .portrait-card) { transition: none; }
}