/* Shared appearance tokens for the settings, face-to-face view and mode container. */
:root {
  --body-leading: 1.75;
}
body {
  color: var(--ink);
  --appearance-paper-image: url("/assets/cotton-paper-warm.webp");
}
body:not([data-theme="warm"]) {
  --appearance-paper-image:
    linear-gradient(
      color-mix(in srgb, var(--paper) 94%, transparent),
      color-mix(in srgb, var(--paper) 94%, transparent)
    ),
    url("/assets/cotton-paper-warm.webp");
}
body.face-to-face {
  --card: var(--surface);
  --sage-pale: var(--assist);
  --lg-fill: var(--soft);
  --lg-fill-strong: var(--surface);
  background-color: var(--paper);
  background-image: var(--appearance-paper-image);
}
/* Reading surfaces keep the themed fill; the original glass rims and shadows remain. */
body.face-to-face
  :is(.composer, .communication-card, .completion-actions, dialog) {
  background: var(--card);
}
body .standard-return-ring stop:first-child {
  stop-color: var(--surface);
}
body .standard-return-ring stop:last-child {
  stop-color: var(--soft);
}
body .mode-flow {
  background: var(--paper) var(--appearance-paper-image) center / cover;
}
body :is(.mode-panel, .mode-panel iframe) {
  background: var(--paper);
}
body .flow-status {
  background: var(--surface);
  font-size: 0.875rem;
}
/* Text follows the reading settings. The controls retain their touch targets. */
.face-to-face
  :is(
    textarea,
    .card-text,
    .original-text,
    .history-entry p,
    .history-footnote
  ) {
  line-height: var(--body-leading);
}
.face-to-face :is(.composer, .communication-card, .card-tools, .original-text) {
  border-color: var(--line);
}
.face-to-face
  :is(.end-button, .reading-note, .feedback, .speaker-switch button),
.face-to-face textarea::placeholder {
  color: var(--muted);
}
.face-to-face .speaker-switch {
  background: var(--soft);
}
.face-to-face .speaker-switch .glass-lens {
  background: var(--card);
}
.face-to-face .speaker-switch button[aria-pressed="true"] {
  color: var(--face-accent);
}
.face-to-face
  [data-speaker="other"]
  .speaker-switch
  button[aria-pressed="true"] {
  color: var(--sage);
}
.face-to-face :is(.communication-card, .completion-actions) {
  --lg-tint: var(--card);
  --lg-tint: color-mix(in srgb, var(--card) 94%, transparent);
}
.face-to-face
  :is(.send-button, .explore-link, .completion-actions .restart-button) {
  background-color: var(--accent);
  color: var(--accent-ink);
}
.face-to-face .completion-actions .restart-button {
  background: linear-gradient(180deg, #ffffff17, #ffffff00 78%), var(--accent);
}
.face-to-face :is(.next-button, .voice-button),
.face-to-face [data-speaker="other"] #sendButton {
  background: var(--sage);
  color: var(--sage-ink);
}
.face-to-face [data-speaker="other"] .next-button {
  background: var(--accent);
  color: var(--accent-ink);
}
.face-to-face
  [data-speaker="other"][data-has-text="true"][data-recording="false"]
  .voice-button {
  background: var(--sage-pale);
  color: var(--sage);
}
.face-to-face .voice-button.recording {
  background: var(--assist);
  color: var(--record-ink);
}
.face-to-face .recording-panel {
  color: var(--record-ink);
}
.face-to-face #sendButton:disabled,
.face-to-face [data-speaker="other"] #sendButton:disabled {
  background: var(--soft);
  color: var(--muted);
}
.face-to-face .completion-actions .skip-button {
  background: var(--lg-fill);
}
.face-to-face .history-entry span {
  color: var(--face-accent);
}
@media (hover: hover) {
  .face-to-face .quiet-button:hover {
    background: var(--soft);
  }
  .face-to-face
    :is(.send-button, .explore-link, .completion-actions .restart-button):not(
      :disabled
    ):hover {
    background: var(--accent-hover);
    color: var(--accent-ink);
  }
  .face-to-face :is(.next-button, .voice-button):not(:disabled):hover {
    background: var(--sage);
    color: var(--sage-ink);
  }
  .face-to-face [data-speaker="other"] .next-button:hover {
    background: var(--accent-hover);
    color: var(--accent-ink);
  }
}
body.face-to-face[data-theme="contrast"] {
  background-image: none;
}
body.face-to-face.high-contrast
  :is(.composer, .communication-card, .completion-button, .speaker-switch) {
  border: 2px solid var(--ink);
}
body.face-to-face.reduce-motion *,
body.face-to-face.reduce-motion *::before,
body.face-to-face.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (forced-colors: active) {
  body.face-to-face {
    background: Canvas;
    color: CanvasText;
  }
  body.face-to-face
    :is(
      .send-button,
      .next-button,
      .voice-button,
      .completion-button,
      .explore-link
    ) {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
}
body[data-theme="warm"] {
  --paper: #f7f1e8;
  --sidebar: #f5f3ef;
  --surface: #ffffff;
  --ink: #242321;
  --muted: #37332e;
  --line: #d8d4cc;
  --accent: #a64e35;
  --accent-hover: #8b402d;
  --accent-ink: #ffffff;
  --accent-strong: #5b250f;
  --paper-deep: #f2f0eb;
  --peach: #f7e8de;
  --soft: #f4f1ec;
  --assist: #f3efe9;
  --expression: #fff1e8;
  --success: #3f5a3f;
  --original: #ffffff;
  --source-highlight: #ffe8cc;
  --state-pending: #8e452e;
  --state-confirmed: #315e48;
  --state-disputed: #93382c;
}
body[data-theme="bright"] {
  --paper: #fbfcfe;
  --sidebar: #f6f8fb;
  --surface: #ffffff;
  --ink: #101820;
  --muted: #4f5c68;
  --line: #c8d2dd;
  --accent: #0b6be0;
  --accent-hover: #0a5cc2;
  --accent-ink: #ffffff;
  --accent-strong: #0a4e93;
  --paper-deep: #f4f5f6;
  --peach: #e8eef8;
  --soft: #f4f6f9;
  --assist: #f4f6f9;
  --expression: #fff1e8;
  --success: #2f6b4f;
  --original: #ffffff;
  --source-highlight: #ffe8cc;
  --state-pending: #0a4e93;
  --state-confirmed: #2f6b4f;
  --state-disputed: #883a31;
}
body[data-theme="mist"] {
  --paper: #e9f2f8;
  --sidebar: #dfebf4;
  --surface: #ffffff;
  --ink: #18232e;
  --muted: #4d5a68;
  --line: #c3d0da;
  --accent: #c0553a;
  --accent-hover: #a6462d;
  --accent-ink: #ffffff;
  --accent-strong: #9c3f26;
  --paper-deep: #e6ebf1;
  --peach: #ede0da;
  --soft: #edf0f4;
  --assist: #e5eff5;
  --expression: #fff0e7;
  --success: #33544f;
  --original: #ffffff;
  --source-highlight: #ffe8cc;
  --state-pending: #9c3f26;
  --state-confirmed: #33544f;
  --state-disputed: #883a31;
}
body[data-theme="contrast"] {
  --paper: #ffffff;
  --sidebar: #f4f4f0;
  --surface: #ffffff;
  --ink: #171713;
  --muted: #393a33;
  --line: #555c52;
  --accent: #80351f;
  --accent-hover: #632713;
  --accent-ink: #ffffff;
  --accent-strong: #92412c;
  --paper-deep: #f2f0eb;
  --peach: #ecd8c9;
  --soft: #f4f1ec;
  --assist: #efefe4;
  --expression: #f5e3d3;
  --success: #244b24;
  --original: #ffffff;
  --source-highlight: #ffe8cc;
  --state-pending: #8e452e;
  --state-confirmed: #315e48;
  --state-disputed: #93382c;
}
body[data-theme="dark"] {
  --paper: #202725;
  --sidebar: #252d29;
  --surface: #303a34;
  --ink: #f6f5ef;
  --muted: #d5ddd6;
  --line: #87988a;
  --accent: #f0b397;
  --accent-hover: #ffd1b5;
  --accent-ink: #171b18;
  --accent-strong: #f0b397;
  --paper-deep: #f2f0eb;
  --peach: #514238;
  --soft: #3a463e;
  --assist: #354039;
  --expression: #473d35;
  --success: #b5dfc0;
  --original: #303a34;
  --source-highlight: #d8ba80;
  --state-pending: #f4d292;
  --state-confirmed: #b5dfc0;
  --state-disputed: #ffc7bd;
}