/* Freeside: warm paper, clear ink, and a bright orange point of connection. */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 7%, #fffdfb);
  --accent-soft-strong: color-mix(in srgb, var(--accent) 14%, #fffdfb);
  --accent-line: color-mix(in srgb, var(--accent) 30%, #eee2da);
  --surface-line: #eadbd3;
  --shadow-ink: #653422;
  --on-dark: #fff3e9;
}

/* Quiet navigation; color belongs to the selected story and primary actions. */
.theatre-shell > .theatre {
  box-shadow: 0 14px 50px -28px #6d39251c;
}
.theatre-shell .demo-header .scenario-tabs {
  box-shadow:
    inset 0 1px 0 #fff9,
    0 3px 16px #6d392509;
}
.theatre-shell .demo-header .scenario-tabs button {
  color: var(--muted);
}
.theatre-shell .demo-header .scenario-tabs button[aria-selected="true"] {
  color: var(--ink);
  box-shadow:
    0 1px 5px #65342212,
    0 1px 2px #65342208;
}
.theatre-shell .demo-header .scenario-tabs button:hover:not([aria-selected="true"]) {
  color: var(--ink);
  background: #ffffff9c;
}
.theatre-shell:has(.theatre[data-story="gaming"]) .scenario-tabs {
  background: #fff5ed12;
  border-color: #fff5ed25;
}
.theatre-shell:has(.theatre[data-story="gaming"]) .scenario-tabs button {
  color: #e2d4d0;
}
.theatre-shell:has(.theatre[data-story="gaming"]) .scenario-tabs button[aria-selected="true"] {
  background: #fffaf6;
  color: var(--ink);
}
.media-button {
  background: #5c4840db;
  box-shadow: 0 2px 6px #48271a0d;
}
.media-button:hover {
  background: var(--accent-hover);
}
.media-button:focus-visible {
  box-shadow: 0 0 0 5px var(--accent);
}

/* The same orange conversation UI follows the person into every scenario. */
.story-stage .request-phone {
  border-color: #efe4de;
  outline-color: #d9c7bc;
  background: #fffdfb;
  color: var(--ink);
  box-shadow: 0 18px 40px #61381c0e;
}
.story-stage .phone-chrome > i {
  background: #322723;
}
.story-stage .request-phone-header {
  border-color: var(--surface-line);
}
.story-stage
  :is(.opening-concert, .opening-friends, .opening-incoming, .opening-gaming, .opening-market)
  .phone-user-message {
  background: var(--accent-soft);
}
.story-stage
  :is(.opening-concert, .opening-friends, .opening-incoming, .opening-gaming, .opening-market)
  :is(.phone-user-message > h3, .phone-agent-answer > p) {
  color: #3b2a23;
}
.story-stage .phone-compose {
  border-color: var(--surface-line);
  background: #fffdfb;
  color: var(--muted);
}
.story-stage .phone-compose > b {
  background: var(--accent);
  color: #fff;
}

/* Concert company carries the brand palette, from routing to the agreed plan. */
.film.story-stage[data-story="concert"] {
  background: #fff1e9;
}
.story-stage[data-story="concert"] {
  --scene-ink: #3b2a23;
  --scene-muted: #78665d;
}
.quiet-agent.reached {
  border-color: var(--accent-line);
}
.quiet-network .scene-network-hub > .scene-brand-icon {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 8px var(--accent-soft-strong);
}
.candidate-person.active {
  border-color: var(--accent-line);
  background: #fffdfb;
}
.candidate-dm,
.shortlist-person,
.concert-agenda {
  background: #fffdfb;
  border-color: var(--surface-line);
}
.candidate-question {
  background: var(--accent-soft);
}
.shortlist-person.chosen {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.shortlist-person.chosen .shortlist-person-header > span {
  color: var(--ink);
}
.main-entry > div {
  border-left-color: var(--accent);
}
.concert-agenda-entry > time {
  color: var(--ink);
}

/* Each setting keeps its own atmosphere around the shared conversation UI. */
.film.story-stage[data-story="friends"] {
  background: #f0f2e9;
}
.film.story-stage[data-story="incoming"] {
  background: #f8f1e7;
}
.film.story-stage[data-story="market"] {
  background: #f3ede5;
}
.film.story-stage[data-story="gaming"] {
  background: #261f28;
}
.story-stage[data-story="gaming"],
.film.story-stage[data-story="gaming"] {
  --scene-ink: #fff1e8;
  --scene-muted: #d5bdc3;
}
.opening-gaming .opening-world {
  border-color: #50383b;
}
.gaming-network-agent.reached {
  border-color: #d9835e;
}
.gaming-network-agent.replied {
  border-color: #ff956b;
  background: #fff2e9;
  box-shadow: 0 0 0 3px #ff450024;
}
.story-stage[data-story="gaming"] .gaming-decision > .scene-human-line {
  background: #fff0e6;
  border-color: #e3aa92;
}
.story-stage[data-story="gaming"] .gaming-decision .scene-human-line p {
  color: #3b2a23;
}

/* The rest of the page belongs to the same palette, including its large panels. */
.moment-ticket {
  background: var(--accent-soft-strong);
  color: #713c29;
}
.moment-image > span {
  color: #59493e;
  background: #fffdf3e8;
}
.shared-stream {
  background: linear-gradient(130deg, #fff0e6, #ffe1d0);
  border: 1px solid #f3cebb;
}
.stream-copy h2 {
  color: var(--ink);
}
.stream-copy h2 em {
  color: var(--accent);
}
.stream-copy > p:not(.eyebrow) {
  color: #70584d;
}
.stream-copy .eyebrow {
  color: #8d4a30;
}
.future-label {
  color: #85513d;
  border-color: #dca991;
}
.possibility {
  box-shadow: 0 12px 26px #713d2112;
}
.possibility :is(.post-category, .post-meta),
.possibility p {
  color: #75615a;
}
.possibility .post-meta {
  border-color: #e5d9cc;
}
.principle-number {
  color: var(--ink);
}
.connection-section h2 em {
  color: var(--accent);
}
@media (max-width: 720px) {
  .quiet-network .scene-network-hub > .scene-brand-icon {
    box-shadow: 0 0 0 6px var(--accent-soft-strong);
  }
}