/*
 * Theme tokens
 * System light is the default first-paint theme.
 * Components should use semantic tokens, not raw colors.
 */

:root {
    color-scheme: light;

    --theme-mode: light;
    --browser-theme-color: #f8f9fb;

    --app-bg: linear-gradient(180deg, #f8f9fb 0%, #f0f3f7 54%, #e7ebf1 100%);
    --app-bg-fixed: fixed;

    --text-primary: rgba(23, 26, 32, 0.94);
    --text-secondary: rgba(37, 44, 55, 0.66);
    --text-muted: rgba(37, 44, 55, 0.44);
    --text-faint: rgba(37, 44, 55, 0.25);
    --text-inverse: #ffffff;
    --text-danger: #b42318;
    --text-warning: #9a5b00;
    --text-success: #146c2e;

    --surface-page: #f6f7f9;
    --surface-topbar: rgba(247, 249, 252, 0.78);
    --surface-panel: rgba(255, 255, 255, 0.62);
    --surface-card: rgba(255, 255, 255, 0.70);
    --surface-elevated: rgba(255, 255, 255, 0.86);
    --surface-modal: rgba(255, 255, 255, 0.94);
    --surface-popover: rgba(255, 255, 255, 0.96);
    --surface-control: rgba(31, 39, 52, 0.060);
    --surface-control-hover: rgba(31, 39, 52, 0.095);
    --surface-control-active: rgba(31, 39, 52, 0.130);
    --surface-input: rgba(255, 255, 255, 0.76);
    --surface-selected: rgba(11, 107, 203, 0.12);
    --surface-danger: rgba(180, 35, 24, 0.10);
    --surface-warning: rgba(154, 91, 0, 0.12);
    --surface-success: rgba(20, 108, 46, 0.10);

    --border-subtle: rgba(31, 39, 52, 0.105);
    --border-control: rgba(31, 39, 52, 0.135);
    --border-strong: rgba(31, 39, 52, 0.22);
    --border-focus: rgba(11, 107, 203, 0.42);

    --accent: #0b6bcb;
    --accent-hover: #075aa9;
    --accent-active: #064d91;
    --accent-soft: rgba(11, 107, 203, 0.12);
    --accent-text: #ffffff;

    --danger: #d92d20;
    --warning: #b26a00;
    --success: #1f8f43;

    --shadow-sm: 0 2px 8px rgba(35, 45, 63, 0.08);
    --shadow-md: 0 14px 38px rgba(35, 45, 63, 0.13);
    --shadow-lg: 0 24px 64px rgba(35, 45, 63, 0.18);
    --shadow-popover: 0 18px 48px rgba(35, 45, 63, 0.18);
    --shadow-color: rgba(35, 45, 63, 0.18);

    --overlay-backdrop: rgba(16, 20, 28, 0.38);
    --topbar-hero-bg: var(--surface-topbar);
    --brand-gradient-bg: var(--button-primary-bg);
    --accent-strong-bg: var(--button-primary-bg);
    --edge-fade-start: linear-gradient(90deg, var(--shadow-color), transparent);
    --edge-fade-end: linear-gradient(270deg, var(--shadow-color), transparent);
    --glass-blur: 22px;
    --glass-saturate: 160%;

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --radius-full: 9999px;

    --button-primary-bg: linear-gradient(180deg, #3a8ce2, #0b6bcb);
    --button-primary-bg-hover: linear-gradient(180deg, #4b99e9, #0a75df);
    --button-primary-text: #ffffff;
    --button-secondary-bg: rgba(31, 39, 52, 0.075);
    --button-secondary-bg-hover: rgba(31, 39, 52, 0.115);
    --button-secondary-text: var(--text-primary);
    --button-danger-bg: linear-gradient(180deg, #ef6258, #d92d20);
    --button-danger-bg-hover: linear-gradient(180deg, #f7746b, #e33a2d);
    --button-danger-text: #ffffff;

    --input-bg: rgba(255, 255, 255, 0.76);
    --input-bg-focus: rgba(255, 255, 255, 0.94);
    --input-border: rgba(31, 39, 52, 0.13);
    --input-placeholder: var(--text-muted);

    --topbar-bg: var(--surface-topbar);
    --shell-canvas-color: var(--surface-page);
    --shell-canvas-bg: var(--app-bg);
    --shell-divider: var(--border-subtle);
    --shell-region-bg: transparent;
    --modal-bg: var(--surface-modal);
    --popover-bg: var(--surface-popover);
    --card-bg: var(--surface-card);
    --planner-task-bg: rgba(255, 255, 255, 0.64);
    --shortcut-bg: rgba(255, 255, 255, 0.58);

    --avatar-color-1: #ff6b6b;
    --avatar-color-2: #4ecdc4;
    --avatar-color-3: #45b7d1;
    --avatar-color-4: #96ceb4;
    --avatar-color-5: #ffeaa7;
    --avatar-color-6: #dda0dd;
    --avatar-color-7: #98d8c8;
    --avatar-color-8: #f7dc6f;
    --avatar-color-9: #bb8fce;
    --avatar-color-10: #85c1e9;
    --avatar-color-11: #f8b500;
    --avatar-color-12: #00ced1;
    --avatar-color-13: #ff7f50;
    --avatar-color-14: #9fe2bf;
    --avatar-color-15: #de3163;
    --avatar-text-color: rgba(255, 255, 255, 0.95);

    --brand-google-blue: #4285f4;
    --brand-google-green: #34a853;
    --brand-google-yellow: #fbbc05;
    --brand-google-red: #ea4335;
}

html[data-theme-mode="dark"] {
    color-scheme: dark;
    --theme-mode: dark;
    --browser-theme-color: #062233;

    --app-bg: linear-gradient(180deg, #062233 0%, #0a354b 50%, #041722 100%);

    --text-primary: rgba(250, 252, 255, 0.96);
    --text-secondary: rgba(235, 241, 250, 0.66);
    --text-muted: rgba(235, 241, 250, 0.43);
    --text-faint: rgba(235, 241, 250, 0.25);
    --text-danger: #ffb4af;
    --text-warning: #ffe0b2;
    --text-success: #a8f0ba;

    --surface-page: #062233;
    --surface-topbar: rgba(6, 34, 51, 0.76);
    --surface-panel: rgba(255, 255, 255, 0.028);
    --surface-card: rgba(255, 255, 255, 0.040);
    --surface-elevated: rgba(255, 255, 255, 0.055);
    --surface-modal: rgba(29, 33, 41, 0.95);
    --surface-popover: rgba(29, 33, 41, 0.97);
    --surface-control: rgba(255, 255, 255, 0.075);
    --surface-control-hover: rgba(255, 255, 255, 0.12);
    --surface-control-active: rgba(255, 255, 255, 0.16);
    --surface-input: rgba(255, 255, 255, 0.075);
    --surface-selected: rgba(38, 210, 220, 0.20);
    --surface-danger: rgba(255, 69, 58, 0.14);
    --surface-warning: rgba(255, 159, 10, 0.14);
    --surface-success: rgba(48, 209, 88, 0.14);

    --border-subtle: rgba(255, 255, 255, 0.118);
    --border-control: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.24);
    --border-focus: rgba(38, 210, 220, 0.48);

    --accent: #26d2dc;
    --accent-hover: #5be3ea;
    --accent-active: #8befef;
    --accent-soft: rgba(38, 210, 220, 0.19);

    --danger: #ff453a;
    --warning: #ff9f0a;
    --success: #30d158;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 12px 38px rgba(0, 0, 0, 0.46);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.58);
    --shadow-popover: 0 20px 54px rgba(0, 0, 0, 0.56);
    --shadow-color: rgba(0, 0, 0, 0.44);

    --overlay-backdrop: rgba(0, 0, 0, 0.62);
    --button-primary-bg: linear-gradient(180deg, #27d2dc, #0f8fb8);
    --button-primary-bg-hover: linear-gradient(180deg, #55e2e9, #139dc8);
    --button-secondary-bg: rgba(255, 255, 255, 0.085);
    --button-secondary-bg-hover: rgba(255, 255, 255, 0.135);
    --button-danger-bg: linear-gradient(180deg, #ff756d, #ff453a);
    --button-danger-bg-hover: linear-gradient(180deg, #ff8982, #ff5a50);
    --input-bg: rgba(255, 255, 255, 0.075);
    --input-bg-focus: rgba(255, 255, 255, 0.105);
    --input-border: rgba(255, 255, 255, 0.15);
    --planner-task-bg: rgba(255, 255, 255, 0.10);
    --shortcut-bg: rgba(255, 255, 255, 0.075);
}

html[data-theme-mode="user"] {
    color-scheme: dark;
    --theme-mode: user;
    --text-primary: rgba(255, 255, 255, 0.96);
    --text-secondary: rgba(245, 248, 255, 0.68);
    --text-muted: rgba(245, 248, 255, 0.46);
    --text-faint: rgba(245, 248, 255, 0.26);
    --text-danger: #ffd0cc;
    --text-warning: #ffe3bd;
    --text-success: #c5f7d0;
    --surface-panel: rgba(255, 255, 255, 0.080);
    --surface-card: rgba(255, 255, 255, 0.100);
    --surface-elevated: rgba(255, 255, 255, 0.135);
    --surface-modal: rgba(24, 28, 38, 0.95);
    --surface-popover: rgba(24, 28, 38, 0.97);
    --surface-control: rgba(255, 255, 255, 0.088);
    --surface-control-hover: rgba(255, 255, 255, 0.140);
    --surface-control-active: rgba(255, 255, 255, 0.190);
    --surface-input: rgba(255, 255, 255, 0.090);
    --border-subtle: rgba(255, 255, 255, 0.125);
    --border-control: rgba(255, 255, 255, 0.160);
    --border-strong: rgba(255, 255, 255, 0.260);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.54);
    --shadow-popover: 0 20px 54px rgba(0, 0, 0, 0.50);
    --shadow-color: rgba(0, 0, 0, 0.40);
    --overlay-backdrop: rgba(0, 0, 0, 0.60);
    --button-primary-text: #ffffff;
    --button-secondary-bg: rgba(255, 255, 255, 0.095);
    --button-secondary-bg-hover: rgba(255, 255, 255, 0.145);
    --input-bg: rgba(255, 255, 255, 0.090);
    --input-bg-focus: rgba(255, 255, 255, 0.125);
    --input-border: rgba(255, 255, 255, 0.165);
    --planner-task-bg: rgba(255, 255, 255, 0.095);
    --shortcut-bg: rgba(255, 255, 255, 0.085);
}

html[data-theme-mode="user"][data-user-theme="aurora"] {
    --browser-theme-color: #17142b;
    --app-bg: linear-gradient(180deg, #17142b 0%, #221a48 54%, #111526 100%);
    --surface-page: #17142b;
    --surface-topbar: rgba(24, 20, 45, 0.76);
    --accent: #9b8cff;
    --accent-hover: #b2a8ff;
    --accent-active: #c9c2ff;
    --accent-soft: rgba(155, 140, 255, 0.20);
    --surface-selected: rgba(155, 140, 255, 0.20);
    --button-primary-bg: linear-gradient(180deg, #9b8cff, #6d5dfc);
    --button-primary-bg-hover: linear-gradient(180deg, #afa6ff, #7d70ff);
}

html[data-theme-mode="user"][data-user-theme="midnight"] {
    --browser-theme-color: #090b12;
    --app-bg: linear-gradient(180deg, #090b12 0%, #121723 58%, #070910 100%);
    --surface-page: #090b12;
    --surface-topbar: rgba(12, 15, 24, 0.78);
    --accent: #a8b3cf;
    --accent-hover: #c0c9df;
    --accent-active: #d7deef;
    --accent-soft: rgba(168, 179, 207, 0.18);
    --surface-selected: rgba(168, 179, 207, 0.18);
    --button-primary-bg: linear-gradient(180deg, #9faac4, #65718d);
    --button-primary-bg-hover: linear-gradient(180deg, #b4bfd7, #74819d);
}

html[data-theme-mode="user"][data-user-theme="ocean"] {
    --browser-theme-color: #062233;
    --app-bg: linear-gradient(180deg, #062233 0%, #0b3b52 56%, #041722 100%);
    --surface-page: #062233;
    --surface-topbar: rgba(6, 34, 51, 0.76);
    --accent: #26d2dc;
    --accent-hover: #5be3ea;
    --accent-active: #8befef;
    --accent-soft: rgba(38, 210, 220, 0.19);
    --surface-selected: rgba(38, 210, 220, 0.20);
    --button-primary-bg: linear-gradient(180deg, #27d2dc, #0f8fb8);
    --button-primary-bg-hover: linear-gradient(180deg, #55e2e9, #139dc8);
}

html[data-theme-mode="user"][data-user-theme="forest"] {
    --browser-theme-color: #0d2418;
    --app-bg: linear-gradient(180deg, #0d2418 0%, #173b25 56%, #07170f 100%);
    --surface-page: #0d2418;
    --surface-topbar: rgba(13, 36, 24, 0.76);
    --accent: #5bd689;
    --accent-hover: #80e5a5;
    --accent-active: #a6f0c0;
    --accent-soft: rgba(91, 214, 137, 0.18);
    --surface-selected: rgba(91, 214, 137, 0.20);
    --button-primary-bg: linear-gradient(180deg, #65dc91, #239b58);
    --button-primary-bg-hover: linear-gradient(180deg, #82e8a8, #2aaa65);
}

html[data-theme-mode="user"][data-user-theme="sunset"] {
    --browser-theme-color: #351725;
    --app-bg: linear-gradient(180deg, #351725 0%, #52233d 56%, #1d1018 100%);
    --surface-page: #351725;
    --surface-topbar: rgba(53, 23, 37, 0.76);
    --accent: #ff8b6d;
    --accent-hover: #ffa085;
    --accent-active: #ffb9a4;
    --accent-soft: rgba(255, 139, 109, 0.19);
    --surface-selected: rgba(255, 139, 109, 0.20);
    --button-primary-bg: linear-gradient(180deg, #ff9478, #e35c68);
    --button-primary-bg-hover: linear-gradient(180deg, #ffa78f, #ef6d78);
}

html[data-theme-mode="user"][data-user-theme="fire"] {
    --browser-theme-color: #321006;
    --app-bg: linear-gradient(180deg, #321006 0%, #5a1f0d 56%, #1a0804 100%);
    --surface-page: #321006;
    --surface-topbar: rgba(50, 16, 6, 0.76);
    --accent: #ff7043;
    --accent-hover: #ff8a61;
    --accent-active: #ffa482;
    --accent-soft: rgba(255, 112, 67, 0.20);
    --surface-selected: rgba(255, 112, 67, 0.22);
    --button-primary-bg: linear-gradient(180deg, #ff7a50, #dd3e22);
    --button-primary-bg-hover: linear-gradient(180deg, #ff916c, #eb5137);
}

html[data-theme-mode="user"][data-user-theme="autumn"] {
    --browser-theme-color: #2d1c09;
    --app-bg: linear-gradient(180deg, #2d1c09 0%, #493116 56%, #171006 100%);
    --surface-page: #2d1c09;
    --surface-topbar: rgba(45, 28, 9, 0.76);
    --accent: #e89a36;
    --accent-hover: #f0b05a;
    --accent-active: #f6c47e;
    --accent-soft: rgba(232, 154, 54, 0.19);
    --surface-selected: rgba(232, 154, 54, 0.21);
    --button-primary-bg: linear-gradient(180deg, #eba342, #b86d1d);
    --button-primary-bg-hover: linear-gradient(180deg, #f2b862, #c77b29);
}

html[data-theme-mode="user"][data-user-theme="cherry"] {
    --browser-theme-color: #341222;
    --app-bg: linear-gradient(180deg, #341222 0%, #531d39 56%, #190a11 100%);
    --surface-page: #341222;
    --surface-topbar: rgba(52, 18, 34, 0.76);
    --accent: #ff5a92;
    --accent-hover: #ff78a8;
    --accent-active: #ff98bd;
    --accent-soft: rgba(255, 90, 146, 0.19);
    --surface-selected: rgba(255, 90, 146, 0.21);
    --button-primary-bg: linear-gradient(180deg, #ff649a, #d82f70);
    --button-primary-bg-hover: linear-gradient(180deg, #ff81ae, #e24480);
}

html[data-theme-mode="user"][data-user-theme="arctic"] {
    --browser-theme-color: #102734;
    --app-bg: linear-gradient(180deg, #102734 0%, #1b4254 56%, #081821 100%);
    --surface-page: #102734;
    --surface-topbar: rgba(16, 39, 52, 0.76);
    --accent: #a8e7ff;
    --accent-hover: #c4efff;
    --accent-active: #def7ff;
    --accent-soft: rgba(168, 231, 255, 0.18);
    --surface-selected: rgba(168, 231, 255, 0.20);
    --button-primary-bg: linear-gradient(180deg, #a8e7ff, #4aa3cf);
    --button-primary-bg-hover: linear-gradient(180deg, #c3efff, #5ab3dc);
    --button-primary-text: rgba(6, 23, 32, 0.92);
}

html[data-theme-mode="user"][data-user-theme="space"] {
    --browser-theme-color: #0c0b24;
    --app-bg: linear-gradient(180deg, #0c0b24 0%, #17133d 56%, #060613 100%);
    --surface-page: #0c0b24;
    --surface-topbar: rgba(12, 11, 36, 0.76);
    --accent: #7d7aff;
    --accent-hover: #9694ff;
    --accent-active: #b1b0ff;
    --accent-soft: rgba(125, 122, 255, 0.20);
    --surface-selected: rgba(125, 122, 255, 0.21);
    --button-primary-bg: linear-gradient(180deg, #817eff, #514de3);
    --button-primary-bg-hover: linear-gradient(180deg, #9997ff, #625ff0);
}

html[data-theme-mode="user"][data-user-theme="tropical"] {
    --browser-theme-color: #062b28;
    --app-bg: linear-gradient(180deg, #062b28 0%, #0b4b41 56%, #031916 100%);
    --surface-page: #062b28;
    --surface-topbar: rgba(6, 43, 40, 0.76);
    --accent: #30d1b4;
    --accent-hover: #58dfc8;
    --accent-active: #86ead8;
    --accent-soft: rgba(48, 209, 180, 0.19);
    --surface-selected: rgba(48, 209, 180, 0.21);
    --button-primary-bg: linear-gradient(180deg, #37d8be, #149c89);
    --button-primary-bg-hover: linear-gradient(180deg, #60e5ce, #1ca997);
}

/*
 * 2026 product system baseline.
 * Keep all visible surfaces calm, dense and predictable across light, dark and
 * user themes. Component CSS should consume these tokens instead of hard-coded
 * visual choices.
 */
:root {
    --app-bg: linear-gradient(180deg, #f8f9fb 0%, #f2f5f8 48%, #e9eef4 100%);
    --surface-page: #f5f7fa;
    --surface-topbar: rgba(248, 250, 253, 0.86);
    --surface-panel: rgba(255, 255, 255, 0.56);
    --surface-card: rgba(255, 255, 255, 0.68);
    --surface-elevated: rgba(255, 255, 255, 0.88);
    --surface-modal: rgba(255, 255, 255, 0.96);
    --surface-popover: rgba(255, 255, 255, 0.98);
    --surface-control: rgba(31, 39, 52, 0.064);
    --surface-control-hover: rgba(31, 39, 52, 0.105);
    --surface-control-active: rgba(31, 39, 52, 0.150);
    --input-bg: rgba(255, 255, 255, 0.82);
    --input-bg-focus: rgba(255, 255, 255, 0.98);
    --border-subtle: rgba(31, 39, 52, 0.120);
    --border-control: rgba(31, 39, 52, 0.150);
    --shadow-sm: 0 1px 2px rgba(35, 45, 63, 0.07), 0 6px 18px rgba(35, 45, 63, 0.055);
    --shadow-md: 0 1px 2px rgba(35, 45, 63, 0.08), 0 14px 34px rgba(35, 45, 63, 0.105);
    --shadow-lg: 0 1px 2px rgba(35, 45, 63, 0.09), 0 28px 72px rgba(35, 45, 63, 0.17);
    --shadow-popover: 0 1px 2px rgba(35, 45, 63, 0.08), 0 18px 46px rgba(35, 45, 63, 0.15);
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --control-height: 40px;
    --control-height-lg: 44px;
    --control-pad-x: 13px;
    --panel-pad: 24px;
    --button-primary-bg: linear-gradient(180deg, #2f86dd 0%, #0b6bcb 100%);
    --button-primary-bg-hover: linear-gradient(180deg, #3d92e6 0%, #0977de 100%);
    --button-danger-bg: linear-gradient(180deg, #ef5147 0%, #d92d20 100%);
    --button-danger-bg-hover: linear-gradient(180deg, #f4655d 0%, #e33a2d 100%);
    --shell-canvas-color: var(--surface-page);
    --shell-canvas-bg: var(--app-bg);
    --shell-divider: var(--border-subtle);
    --shell-region-bg: transparent;
}

html[data-theme-mode="dark"] {
    --app-bg: linear-gradient(180deg, #062233 0%, #0a354b 50%, #041722 100%);
    --surface-page: #062233;
    --surface-topbar: rgba(6, 34, 51, 0.76);
    --surface-panel: rgba(255, 255, 255, 0.028);
    --surface-card: rgba(255, 255, 255, 0.040);
    --surface-elevated: rgba(255, 255, 255, 0.055);
    --surface-modal: rgba(4, 23, 34, 0.97);
    --surface-popover: rgba(4, 23, 34, 0.98);
    --surface-control: rgba(255, 255, 255, 0.078);
    --surface-control-hover: rgba(255, 255, 255, 0.126);
    --surface-control-active: rgba(255, 255, 255, 0.170);
    --input-bg: rgba(255, 255, 255, 0.082);
    --input-bg-focus: rgba(255, 255, 255, 0.118);
}

html[data-theme-mode="user"] {
    --surface-panel: rgba(255, 255, 255, 0.028);
    --surface-card: rgba(255, 255, 255, 0.040);
    --surface-elevated: rgba(255, 255, 255, 0.055);
    --surface-modal: rgba(4, 23, 34, 0.97);
    --surface-popover: rgba(4, 23, 34, 0.98);
}

html[data-theme-mode="user"][data-user-theme="aurora"] { --app-bg: linear-gradient(180deg, #17142b 0%, #211b42 50%, #111526 100%); }
html[data-theme-mode="user"][data-user-theme="midnight"] { --app-bg: linear-gradient(180deg, #090b12 0%, #111622 50%, #070910 100%); }
html[data-theme-mode="user"][data-user-theme="ocean"] { --app-bg: linear-gradient(180deg, #062233 0%, #0a354b 50%, #041722 100%); }
html[data-theme-mode="user"][data-user-theme="forest"] { --app-bg: linear-gradient(180deg, #0d2418 0%, #163522 50%, #07170f 100%); }
html[data-theme-mode="user"][data-user-theme="sunset"] { --app-bg: linear-gradient(180deg, #351725 0%, #492138 50%, #1d1018 100%); }
html[data-theme-mode="user"][data-user-theme="fire"] { --app-bg: linear-gradient(180deg, #321006 0%, #4d1b0c 50%, #1a0804 100%); }
html[data-theme-mode="user"][data-user-theme="autumn"] { --app-bg: linear-gradient(180deg, #2d1c09 0%, #422d14 50%, #171006 100%); }
html[data-theme-mode="user"][data-user-theme="cherry"] { --app-bg: linear-gradient(180deg, #341222 0%, #4a1b34 50%, #190a11 100%); }
html[data-theme-mode="user"][data-user-theme="arctic"] { --app-bg: linear-gradient(180deg, #102734 0%, #1a3c4d 50%, #081821 100%); }
html[data-theme-mode="user"][data-user-theme="space"] { --app-bg: linear-gradient(180deg, #0c0b24 0%, #161238 50%, #060613 100%); }
html[data-theme-mode="user"][data-user-theme="tropical"] { --app-bg: linear-gradient(180deg, #062b28 0%, #0a423b 50%, #031916 100%); }

/*
 * Shell topbar — soft frosted strip, slightly denser than transparent columns.
 * No black tint (too harsh in light); uses palette surface-page opacity only.
 */
html[data-theme-mode="light"] {
    --shell-topbar-bg: color-mix(in srgb, var(--surface-page) 72%, transparent);
    --shell-topbar-blur: 10px;
    --shell-topbar-saturate: 118%;
    --shell-topbar-shadow: 0 1px 0 var(--shell-divider);
}

html[data-theme-mode="dark"],
html[data-theme-mode="user"] {
    --shell-topbar-bg: color-mix(in srgb, var(--surface-page) 58%, transparent);
    --shell-topbar-blur: 14px;
    --shell-topbar-saturate: 142%;
    --shell-topbar-shadow: 0 1px 0 var(--shell-divider);
}