/* Canonical shared palette and theme controls. Export copies with gen_brand_assets.py. */
:root {
  color-scheme: light;
  --ch-bg: #F8F4FF;
  --ch-fg: #24102F;
  --ch-muted: #584660;
  --ch-panel: #E7DAFF;
  --ch-accent: #CDB6FF;
  --ch-line: #A189E6;
  --ch-field: #7C5CC7;
  --ch-brand: #7C5CC7;
  --ch-action: #7C5CC7;
  --ch-action-text: #FFFFFF;
  --ch-hover: #63469F;
  --ch-navigation: #EFE7FC;
  --ch-inset: #F4EEFC;
  --ch-edge: #DFD2F0;
  --ch-selected: #E7DAFF;
  --ch-selected-ink: #63469F;
  --ch-panel-shadow: 0 2px 4px #24102F04, 0 12px 30px #24102F06;
  --ch-action-shadow: 0 2px 4px #24102F12, 0 5px 12px #7C5CC71A;
  --ch-50: #0B0710;
  --ch-100: #24102F;
  --ch-200: #24102F;
  --ch-300: #4A1D5E;
  --ch-400: #584660;
  --ch-500: #6C557F;
  --ch-600: #7C5CC7;
  --ch-700: #CDB6FF;
  --ch-800: #E7DAFF;
  --ch-900: #FFFFFF;
  --ch-950: #F8F4FF;
  --ch-error: #A11D35;
  --ch-warning: #805400;
  --ch-success: #17633C;
  --ch-info-100: #1552A0;
  --ch-info-200: #1552A0;
  --ch-info-300: #1552A0;
  --ch-ticket-ink: #17633C;
  --ch-urgent-ink: #B12726;
  --ch-flagged-ink: #922775;
  --ch-decide-ink: #1552A0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --ch-bg: #0B0710;
  --ch-fg: #F8F4FF;
  --ch-muted: #BFA9C8;
  --ch-panel: #24102F;
  --ch-accent: #BFA9C8;
  --ch-line: #4A1D5E;
  --ch-field: #BFA9C8;
  --ch-brand: #7A4A8C;
  --ch-action: #CDB6FF;
  --ch-action-text: #24102F;
  --ch-hover: #E7DAFF;
  --ch-navigation: #1B1025;
  --ch-inset: #140C1D;
  --ch-edge: #4A315B;
  --ch-selected: #4A1D5E;
  --ch-selected-ink: #E7DAFF;
  --ch-panel-shadow: 0 2px 4px #00000014, 0 12px 30px #0000001A;
  --ch-action-shadow: 0 2px 4px #0000001A, 0 5px 14px #CDB6FF14;
  --ch-50: #FFFFFF;
  --ch-100: #F8F4FF;
  --ch-200: #E7DAFF;
  --ch-300: #DCC7F7;
  --ch-400: #BFA9C8;
  --ch-500: #BFA9C8;
  --ch-600: #7A4A8C;
  --ch-700: #4A1D5E;
  --ch-800: #351640;
  --ch-900: #24102F;
  --ch-950: #0B0710;
  --ch-error: #FCA5A5;
  --ch-warning: #FCD34D;
  --ch-success: #6EE7B7;
  --ch-info-100: #E0F2FE;
  --ch-info-200: #BAE6FD;
  --ch-info-300: #7DD3FC;
  --ch-ticket-ink: oklch(0.72 0.19 145);
  --ch-urgent-ink: oklch(0.70 0.20 25);
  --ch-flagged-ink: oklch(0.72 0.19 320);
  --ch-decide-ink: oklch(0.72 0.19 250);
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ch-bg: #0B0710;
  --ch-fg: #F8F4FF;
  --ch-muted: #BFA9C8;
  --ch-panel: #24102F;
  --ch-accent: #BFA9C8;
  --ch-line: #4A1D5E;
  --ch-field: #BFA9C8;
  --ch-brand: #7A4A8C;
  --ch-action: #CDB6FF;
  --ch-action-text: #24102F;
  --ch-hover: #E7DAFF;
  --ch-navigation: #1B1025;
  --ch-inset: #140C1D;
  --ch-edge: #4A315B;
  --ch-selected: #4A1D5E;
  --ch-selected-ink: #E7DAFF;
  --ch-panel-shadow: 0 2px 4px #00000014, 0 12px 30px #0000001A;
  --ch-action-shadow: 0 2px 4px #0000001A, 0 5px 14px #CDB6FF14;
  --ch-50: #FFFFFF;
  --ch-100: #F8F4FF;
  --ch-200: #E7DAFF;
  --ch-300: #DCC7F7;
  --ch-400: #BFA9C8;
  --ch-500: #BFA9C8;
  --ch-600: #7A4A8C;
  --ch-700: #4A1D5E;
  --ch-800: #351640;
  --ch-900: #24102F;
  --ch-950: #0B0710;
  --ch-error: #FCA5A5;
  --ch-warning: #FCD34D;
  --ch-success: #6EE7B7;
  --ch-info-100: #E0F2FE;
  --ch-info-200: #BAE6FD;
  --ch-info-300: #7DD3FC;
  --ch-ticket-ink: oklch(0.72 0.19 145);
  --ch-urgent-ink: oklch(0.70 0.20 25);
  --ch-flagged-ink: oklch(0.72 0.19 320);
  --ch-decide-ink: oklch(0.72 0.19 250);
}

html, body { background: var(--ch-bg); color: var(--ch-fg); }
.theme-picker { display: inline-flex; align-items: center; border: 0.0625rem solid var(--ch-edge); border-radius: 999rem; padding: 0.25rem; gap: 0.25rem; background: var(--ch-navigation); }
.theme-picker button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ch-muted); cursor: pointer; }
.theme-picker svg { width: 1.125rem; height: 1.125rem; pointer-events: none; }
.theme-picker button[aria-pressed="true"] { background: var(--ch-selected); color: var(--ch-selected-ink); box-shadow: inset 0 0 0 0.0625rem var(--ch-field); }
.theme-picker button:hover { color: var(--ch-fg); }
.theme-picker button:focus-visible { outline: 0.125rem solid var(--ch-field); outline-offset: 0.1875rem; }
.app-theme-tools { display: flex; justify-content: flex-end; padding: 12px 24px 0; background: var(--ch-bg); }
.brand-dark { display: none !important; }
:root[data-theme="dark"] .brand-dark { display: block !important; }
:root[data-theme="dark"] .brand-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-dark { display: block !important; }
  :root:not([data-theme="light"]) .brand-light { display: none !important; }
}