/* Shared by the React app and static homepage. Only explicitly opted-in actions
   receive this palette; cards, status colors and authored story choices do not.
   Color-only !important rules intentionally supersede legacy inline/module colors
   without changing their dimensions, event handlers, animation or border widths. */
:root {
  --cuemo-button-fill: linear-gradient(112deg,#fff 0%,#edf2fc 38%,#c2d5f5 70%,#8bb0ed 100%);
  --cuemo-button-fill-hover: linear-gradient(112deg,#fff 0%,#f5f8ff 38%,#d2e1fa 70%,#a3c2f4 100%);
  --cuemo-button-ink: #172840;
  --cuemo-button-border: #c4d8f8;
  --cuemo-button-outline: rgba(162,191,239,.52);
  --cuemo-button-outline-hover: #bad1f8;
  --cuemo-button-label: #c8daf9;
  --cuemo-button-tint: rgba(150,184,239,.07);
  --cuemo-button-tint-hover: rgba(150,184,239,.14);
  --cuemo-button-focus: #a9c7fa;
  --cuemo-button-shadow: 0 6px 20px rgba(122,161,224,.12);
  --cuemo-button-disabled-fill: #232a35;
  --cuemo-button-disabled-label: #8491a5;
  --cuemo-button-disabled-border: #424e62;
}
html [data-button-tone="primary"] {
  background: var(--cuemo-button-fill) !important;
  color: var(--cuemo-button-ink) !important;
  border-color: var(--cuemo-button-border) !important;
  box-shadow: var(--cuemo-button-shadow) !important;
  filter: none !important;
}
html [data-button-tone="outline"] {
  background: var(--cuemo-button-tint) !important;
  color: var(--cuemo-button-label) !important;
  border-color: var(--cuemo-button-outline) !important;
  filter: none !important;
}
html [data-button-tone="danger"] {
  background: rgba(224,90,74,.85) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html [data-button-tone="primary"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--cuemo-button-fill-hover) !important;
  color: var(--cuemo-button-ink) !important;
}
html [data-button-tone="outline"]:hover:not(:disabled):not([aria-disabled="true"]),
html [data-button-tone="outline"][aria-pressed="true"] {
  background: var(--cuemo-button-tint-hover) !important;
  border-color: var(--cuemo-button-outline-hover) !important;
  color: #e3edff !important;
}
html [data-button-tone]:focus-visible {
  outline: 2px solid var(--cuemo-button-focus) !important;
  outline-offset: 3px;
}
html [data-button-tone="primary"]:is(:disabled,[aria-disabled="true"]),
html [data-button-tone="outline"]:is(:disabled,[aria-disabled="true"]) {
  background: var(--cuemo-button-disabled-fill) !important;
  color: var(--cuemo-button-disabled-label) !important;
  border-color: var(--cuemo-button-disabled-border) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: .65 !important;
}
/* Small text-generation spinners must remain legible on a light primary fill. */
html [data-button-tone="primary"] [data-button-spinner] {
  border-color: currentColor !important;
  border-right-color: transparent !important;
}
@media (forced-colors: active) {
  html [data-button-tone="primary"],html [data-button-tone="outline"] {
    forced-color-adjust: auto;
    background: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonText !important;
    outline-color: Highlight !important;
  }
  html [data-button-tone]:is(:disabled,[aria-disabled="true"]) {color: GrayText !important;border-color: GrayText !important;}
}