/* Cream, ivory and champagne. Optics belong to the glass material. */
@layer themes {
:root[data-theme="liquid-pearl"],
:root[data-theme="liquid-pearl"] body {
  color-scheme: light;
  --sys-bg-base: #fff8eb;
  --sys-bg-raised: #fffdf6;
  --sys-bg-high: #f3e7d2;
  --sys-bg-overlay: #fffbf2;
  --sys-on-surface: #302b23;
  --sys-on-surface-variant: #514735;
  --sys-on-surface-muted: #655a49;
  --sys-accent: #745326;
  --sys-accent-strong: #755329;
  --sys-accent-alt: #a17c40;
  --sys-accent-gradient: linear-gradient(135deg, #876235, #6b4d27);
  --sys-accent-gradient-hover: linear-gradient(135deg, #77532b, #5c4021);
  --sys-surface: rgba(255, 253, 246, .2);
  --sys-border: rgba(255, 255, 255, .72);
  --sys-border-strong: rgba(255, 255, 255, .94);
  --sys-surface-hover: rgba(255, 255, 255, .38);
  --sys-blur: 8px;
  --sys-surface-shell: linear-gradient(135deg, rgba(255, 255, 252, .36), rgba(255, 249, 234, .16) 60%, rgba(255, 253, 247, .28));
  --sys-surface-plate: linear-gradient(145deg, rgba(255, 253, 246, .96), rgba(249, 241, 224, .95));
  --sys-surface-control: linear-gradient(135deg, rgba(255, 255, 252, .44), rgba(255, 248, 230, .18));
  --sys-elevation-2: inset 0 1px 0 rgba(255, 255, 255, .9), inset 1px 0 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(128, 98, 51, .11), 0 10px 30px rgba(109, 82, 41, .08);
  --sys-elevation-1: inset 0 1px 0 rgba(255, 255, 255, .86), inset 0 -1px 0 rgba(128, 98, 51, .08), 0 3px 10px rgba(109, 82, 41, .06);
  --sys-refraction: blur(10px) saturate(105%);
  --sys-refraction-subtle: blur(7px) saturate(105%);
  --comp-bubble-own-bg: linear-gradient(135deg, rgba(232, 206, 155, .30), rgba(246, 231, 198, .16));
  --comp-bubble-own-border: rgba(174, 136, 73, .3);
  --comp-bubble-other-bg: linear-gradient(135deg, rgba(255, 255, 253, .38), rgba(255, 252, 242, .18));
  --comp-bubble-other-border: rgba(255, 255, 255, .86);
  --comp-glass-bubble-filter: blur(4px) saturate(104%);
  --comp-glass-bubble-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 -1px 0 rgba(128, 98, 51, .08), 0 4px 16px rgba(109, 82, 41, .06);
  --comp-glass-bubble-own-solid: #f2e4c8;
  --comp-glass-bubble-other-solid: #fffaf0;
  --comp-glass-rim: linear-gradient(130deg, rgba(255, 255, 255, .26), transparent 30%, transparent 76%, rgba(255, 255, 255, .1));
  --comp-message-user-filter: none;
  /* Replace the legacy violet interaction hooks as well as the main accent. */
  --ref-pearl-accent-soft: rgba(161, 124, 64, .14);
  --ref-pearl-accent-line: rgba(116, 83, 38, .42);
  --ref-pearl-accent-ring: 0 0 0 3px rgba(161, 124, 64, .18);
  --comp-pill-mine-bg: var(--ref-pearl-accent-soft);
  --comp-pill-active-bg: var(--ref-pearl-accent-soft);
  --comp-pill-active-border: var(--ref-pearl-accent-line);
  --comp-input-type-text-focus-border: var(--sys-accent);
  --comp-input-type-text-focus-bg: var(--ref-glass-input);
  --comp-input-type-text-focus-shadow: var(--ref-pearl-accent-ring);
  --comp-input-type-text-focus-bg-2: var(--ref-glass-input);
  --comp-input-type-text-focus-shadow-2: var(--ref-pearl-accent-ring);
  --comp-message-highlight-shadow: var(--ref-pearl-accent-ring);
  --comp-message-link-color: var(--sys-accent);
  --comp-message-link-hover-color: var(--sys-on-surface);
  --comp-summary-hover-color: var(--sys-accent);
  --comp-message-more-open-summary-background: var(--ref-pearl-accent-soft);
  --comp-message-action-hover-bg: var(--ref-pearl-accent-soft);
  --comp-message-action-hover-border: var(--ref-pearl-accent-line);
  --comp-message-menu-item-hover-bg: var(--ref-pearl-accent-soft);
  --comp-message-menu-item-hover-border: var(--ref-pearl-accent-line);
  --comp-emoji-suggestion-aria-selected-true-bg: var(--ref-pearl-accent-soft);
  --comp-poll-option-progress-background: linear-gradient(90deg, rgba(161, 124, 64, .22), rgba(209, 178, 121, .14));
  --comp-poll-option-is-selected-shadow: var(--sys-elevation-1);
  --comp-message-mention-color: var(--sys-accent);
  --comp-message-mention-background: var(--ref-pearl-accent-soft);
  --comp-message-mention-border: 1px solid var(--ref-pearl-accent-line);
  --comp-button-hover-bg: var(--ref-pearl-accent-soft);
  --comp-theme-option-card-is-selected-bg: var(--ref-pearl-accent-soft);
  --comp-button-mini-hover-shadow: var(--sys-elevation-2);
  --comp-button-send-shadow: var(--sys-elevation-1);
  --comp-button-send-hover-shadow: var(--sys-elevation-2);
  --comp-button-cta-shadow: var(--sys-elevation-1);
  --comp-button-cta-hover-shadow: var(--sys-elevation-2);
  --comp-button-dialog-primary-shadow: var(--sys-elevation-1);
  --comp-button-dialog-primary-hover-shadow: var(--sys-elevation-2);
  --sys-status-online: #226745;
  --sys-status-danger: #ae303e;
  --sys-status-warning: #825a17;
  --ref-glass-regular: rgba(255, 250, 237, .93);
  --ref-glass-input: rgba(255, 253, 245, .24);
  --ref-glass-shadow: rgba(109, 82, 41, .08);
  --ref-glass-texture: rgba(110, 88, 48, .005);
  --ref-glass-scene: url("crystal-pearl-scene.svg");
}
:root[data-theme="liquid-pearl"] :is(.theme-option-card, .reaction-pill) {
  color: var(--sys-on-surface);
}
}