/* Rules shared by the holiday themes (christmas e newyear): their common tokens and the
   component rules that have no token yet. Each theme file sets its own palette. */
@layer themes {
/* Component tokens: the theme values of hooks that base rules read. */
html:is([data-theme="christmas"], [data-theme="newyear"]),
html:is([data-theme="christmas"], [data-theme="newyear"]) body {
  --comp-chat-screen-background: var(--ref-theme-body-bg);
}
html:is([data-theme="christmas"], [data-theme="newyear"]),
html:is([data-theme="christmas"], [data-theme="newyear"]) body {
  color-scheme: dark;
  --sys-bg-base: var(--ref-holiday-bg);
  --sys-bg-raised: var(--ref-holiday-secondary);
  --sys-bg-high: var(--ref-holiday-elevated);
  --sys-bg-overlay: var(--ref-holiday-elevated);
  --sys-surface: color-mix(in srgb, var(--ref-holiday-secondary) 80%, transparent);
  --sys-border: var(--ref-holiday-border);
  --sys-border-strong: color-mix(in srgb, var(--ref-holiday-accent) 50%, transparent);
  --sys-surface-hover: color-mix(in srgb, var(--ref-holiday-accent) 10%, transparent);
  --sys-surface-shell: linear-gradient(155deg, var(--ref-holiday-secondary), var(--ref-holiday-bg));
  --sys-surface-plate: linear-gradient(145deg, var(--ref-holiday-elevated), var(--ref-holiday-secondary));
  --sys-surface-control: color-mix(in srgb, var(--ref-holiday-secondary) 90%, transparent);
  --sys-elevation-2: inset 0 1px 0 #fff3d914, 0 12px 32px #02060c66;
  --sys-elevation-1: inset 0 1px 0 #fff3d912, 0 4px 14px #02060c44;
  --sys-refraction: blur(10px) saturate(110%);
  --sys-refraction-subtle: blur(8px) saturate(110%);
  --sys-accent: var(--ref-holiday-accent);
  --sys-accent-strong: var(--ref-holiday-button);
  --sys-accent-alt: var(--ref-holiday-secondary-accent);
  --sys-accent-gradient: linear-gradient(135deg, var(--ref-holiday-button-hover), var(--ref-holiday-button));
  --sys-accent-gradient-hover: linear-gradient(135deg, var(--ref-holiday-button), var(--ref-holiday-button-hover));
  --sys-on-surface: var(--ref-holiday-text);
  --sys-on-surface-variant: var(--ref-holiday-muted);
  --sys-on-surface-muted: var(--ref-holiday-muted);
  --comp-bubble-own-bg: var(--ref-holiday-own);
  --comp-bubble-own-border: var(--ref-holiday-own-border);
  --comp-bubble-other-bg: var(--ref-holiday-other);
  --comp-bubble-other-border: var(--ref-holiday-border);
  --sys-status-online: #95d4ae;
  --sys-status-warning: #edc987;
  --sys-status-danger: #f497a6;
  --ref-theme-accent: var(--ref-holiday-accent);
  --ref-theme-own-author: var(--ref-holiday-accent);
  --ref-theme-body-bg: radial-gradient(ellipse at 86% 4%, var(--ref-holiday-halo), transparent 55%), linear-gradient(165deg, var(--ref-holiday-bg), var(--ref-holiday-secondary));
  --ref-theme-own-bubble: var(--comp-bubble-own-bg);
  --ref-theme-own-border: var(--comp-bubble-own-border);
  --ref-theme-popover-bg: var(--ref-holiday-secondary);
  --liquid-glass-surface: color-mix(in srgb, var(--ref-holiday-secondary) 90%, transparent);
  --liquid-glass-plate: var(--ref-holiday-secondary);
  --liquid-glass-control: var(--sys-surface-control);
  --liquid-glass-border: var(--ref-holiday-border);
  --liquid-glass-border-strong: var(--sys-border-strong);
  --liquid-refraction: blur(10px) saturate(110%);
  --vscode-foreground: var(--ref-holiday-text);
  --vscode-editor-foreground: var(--ref-holiday-text);
  --vscode-editor-background: var(--ref-holiday-bg);
  --vscode-descriptionForeground: var(--ref-holiday-muted);
  --vscode-input-foreground: var(--ref-holiday-text);
  --vscode-input-placeholderForeground: var(--ref-holiday-muted);
  --vscode-focusBorder: var(--ref-holiday-accent);
  --comp-message-text-link: var(--ref-holiday-accent);
  --vscode-textLink-activeForeground: var(--ref-holiday-text);
  --vscode-textBlockQuote-border: var(--ref-holiday-accent);
  --vscode-button-background: var(--ref-holiday-button);
  --vscode-button-hoverBackground: var(--ref-holiday-button-hover);
  --vscode-button-foreground: var(--ref-holiday-button-text);
  --vscode-list-hoverBackground: var(--ref-holiday-elevated);
  --vscode-list-activeSelectionForeground: var(--ref-holiday-accent);
  --vscode-list-activeSelectionBackground: var(--ref-holiday-elevated);
  --vscode-toolbar-hoverBackground: var(--ref-holiday-elevated);
  --vscode-badge-background: var(--ref-holiday-button);
  --vscode-badge-foreground: var(--ref-holiday-button-text);
  --vscode-menu-background: var(--ref-holiday-secondary);
  --vscode-dropdown-background: var(--ref-holiday-secondary);
  color: var(--ref-holiday-text);
}
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.chat-bg-orbs, .login-bg-orbs) { display: none; }
html:is([data-theme="christmas"], [data-theme="newyear"]) .message.other { background: var(--comp-bubble-other-bg); border-color: var(--comp-bubble-other-border); }
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.btn-send) { color: var(--ref-holiday-button-text); background: var(--sys-accent-gradient); border-color: var(--sys-border-strong); }
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.btn-send):hover { background: var(--sys-accent-gradient-hover); box-shadow: 0 0 14px color-mix(in srgb, var(--ref-holiday-accent) 20%, transparent); }
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.message-action, .reaction-pill, .message-more > summary) { color: var(--ref-holiday-text); background: var(--ref-holiday-secondary); border-color: var(--ref-holiday-border); }
html:is([data-theme="christmas"], [data-theme="newyear"]) .reaction-pill.selected { color: var(--ref-holiday-accent); background: var(--ref-holiday-elevated); border-color: var(--ref-holiday-accent); }
html:is([data-theme="christmas"], [data-theme="newyear"]) .message.own > .message-author { color: var(--ref-holiday-accent) !important; }
html:is([data-theme="christmas"], [data-theme="newyear"]) ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ref-holiday-accent) 35%, transparent); }
}