@lucasvu/scope-ui 0.0.8 → 0.1.1

package/dist/themes/theme-ui-siraya-vii-light.css

@@ -0,0 +1,603 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Lato:wght@300;400;700;900&display=swap');
+
+/* Siraya VIS 2024 light theme
+   Source reference: SIRAYA-VII_light.pdf cover palette + typography direction.
+*/
+
+:root[data-client-theme='siraya-vii-light'] {
+  color-scheme: light;
+
+  --brand-tiger: #f15a2b;
+  --brand-fire-brick: #d82328;
+  --brand-asphalt: #171415;
+  --brand-cobalt: #6d6866;
+  --brand-amethyst: #b24d57;
+  --brand-canary: #c88d59;
+  --brand-moon-spot: #8a7f78;
+  --brand-lemonade: #f4ddd4;
+  --brand-blush: #f9efea;
+  --brand-champagne: #fffdfb;
+  --brand-dolphin: #d8cac2;
+  --brand-smoke: #ebe1da;
+  --brand-silver: #f6efea;
+
+  --font-family-base: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+  --font-family-heading: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
+
+  --bg: #f6f1ed;
+  --surface: #fffdfb;
+  --surface-strong: #f2ebe6;
+  --surface-elevated: rgba(255, 253, 251, 0.94);
+  --grey: #f2ebe6;
+  --grey-strong: #e5dbd4;
+  --border: #ddd1c8;
+  --border-strong: #ccbcb1;
+
+  --text: #403735;
+  --text-strong: #171415;
+  --muted: #756a65;
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  --accent: #d82328;
+  --accent-soft: rgba(216, 35, 40, 0.1);
+  --accent-strong: #f15a2b;
+  --accent-2: #171415;
+  --danger: #c61b22;
+  --danger-soft: rgba(198, 27, 34, 0.12);
+  --success-strong: #5e7b6c;
+  --success-soft: rgba(94, 123, 108, 0.16);
+  --info: #7f6b60;
+  --info-soft: rgba(127, 107, 96, 0.14);
+
+  --shadow: 0 24px 50px -34px rgba(36, 18, 17, 0.24);
+  --shadow-sm: 0 16px 32px -26px rgba(36, 18, 17, 0.18);
+  --menu-shadow: 0 28px 60px -34px rgba(36, 18, 17, 0.28);
+  --focus-ring: rgba(216, 35, 40, 0.18);
+
+  --confirm: 149 18% 43%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 26 37% 97%;
+  --tw-foreground: 355 7% 9%;
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 355 7% 9%;
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 355 7% 9%;
+  --tw-primary: 359 72% 49%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 25 29% 92%;
+  --tw-secondary-foreground: 355 7% 9%;
+  --tw-muted: 28 23% 93%;
+  --tw-muted-foreground: 22 8% 42%;
+  --tw-accent: 15 88% 56%;
+  --tw-accent-foreground: 0 0% 100%;
+  --tw-destructive: 359 72% 44%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 26 23% 84%;
+  --tw-input: 26 23% 84%;
+  --tw-ring: 359 72% 49%;
+  --tw-success: 149 18% 43%;
+
+  --primary: 359 72% 49%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 359 72% 49%;
+  --primary-grad-to: 15 88% 56%;
+  --primary-ring: 359 72% 49%;
+
+  --input-bg: rgba(255, 253, 251, 0.96);
+  --input-border-main: #d9ccc3;
+  --input-border-hover: #c9b8ae;
+  --input-border-focus: var(--accent);
+  --input-placeholder: #9b8f89;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #f4eeea;
+  --table-row-hover: #fcf7f3;
+
+  --tab-track: #efe6e1;
+  --tab-indicator: #fffdfb;
+  --tab-text: #756a65;
+  --tab-text-active: #171415;
+
+  --menu-surface: rgba(255, 253, 251, 0.98);
+  --menu-border: #e4d8d0;
+  --header-glass: rgba(255, 253, 251, 0.86);
+  --header-text: #171415;
+  --header-subtle-text: #756a65;
+  --header-transparent-text: #fffaf8;
+  --header-transparent-subtle-text: rgba(255, 250, 248, 0.78);
+  --header-transparent-hover-bg: rgba(255, 255, 255, 0.14);
+  --header-transparent-avatar-bg: rgba(255, 255, 255, 0.18);
+  --header-transparent-avatar-fg: #fffaf8;
+
+  --shell-main-bg:
+    radial-gradient(circle at top right, rgba(241, 90, 43, 0.12), transparent 24%),
+    radial-gradient(circle at top left, rgba(216, 35, 40, 0.08), transparent 20%),
+    linear-gradient(180deg, #fbf8f6 0%, #f4efeb 100%);
+  --shell-hero-bg: linear-gradient(135deg, #171415 0%, #7c121b 38%, #d82328 70%, #f15a2b 100%);
+  --public-overlay-bg: rgba(22, 18, 19, 0.62);
+  --auth-card-bg: rgba(255, 253, 251, 0.92);
+  --card-bg: rgba(255, 253, 251, 0.9);
+  --page-title-bg: linear-gradient(135deg, rgba(255, 253, 251, 0.98) 0%, rgba(249, 240, 234, 0.96) 100%);
+  --section-icon-bg: linear-gradient(135deg, #fff2ed 0%, #f7dfd6 100%);
+  --avatar-bg: #fff2ed;
+  --menu-item-hover-bg: #f8efea;
+  --menu-item-active-bg: #f4e6df;
+
+  --sidebar-bg: linear-gradient(180deg, rgba(255, 253, 251, 0.96) 0%, rgba(248, 241, 236, 0.98) 100%);
+  --sidebar-text: #433734;
+  --sidebar-foreground: #433734;
+  --sidebar-active-text: #171415;
+  --sidebar-muted: rgba(67, 55, 52, 0.72);
+  --sidebar-icon: #d82328;
+  --sidebar-icon-active: #9e131e;
+  --sidebar-hover: rgba(216, 35, 40, 0.06);
+  --sidebar-active: linear-gradient(135deg, rgba(216, 35, 40, 0.1) 0%, rgba(241, 90, 43, 0.18) 100%);
+  --sidebar-divider: rgba(23, 20, 21, 0.06);
+  --sidebar-submenu-border: rgba(23, 20, 21, 0.1);
+  --sidebar-brand-label: #171415;
+  --brand-badge-bg: linear-gradient(135deg, #d82328 0%, #f15a2b 100%);
+  --brand-badge-fg: #ffffff;
+
+  --shell-hero-from: #171415;
+  --shell-hero-mid: #d82328;
+  --shell-hero-to: #f15a2b;
+
+  --button-primary-bg: linear-gradient(135deg, #d82328 0%, #f15a2b 100%);
+  --button-primary-fg: #ffffff;
+  --button-primary-shadow: 0 16px 30px -18px rgba(216, 35, 40, 0.42);
+  --button-confirm-bg: linear-gradient(135deg, #587567 0%, #6f8d7e 100%);
+  --button-confirm-fg: #ffffff;
+  --button-confirm-shadow: 0 16px 30px -18px rgba(88, 117, 103, 0.34);
+  --button-destructive-bg: linear-gradient(135deg, #b1121b 0%, #d82328 100%);
+  --button-destructive-fg: #ffffff;
+  --button-destructive-shadow: 0 16px 30px -18px rgba(177, 18, 27, 0.34);
+  --button-outline-bg: rgba(255, 253, 251, 0.9);
+  --button-secondary-bg: #efe6e1;
+  --button-ghost-hover-bg: #f5ede8;
+
+  --datatable-bg: rgba(255, 253, 251, 0.94);
+  --empty-icon-bg: #fff0ea;
+  --empty-icon-fg: #d82328;
+  --tabs-shadow: rgba(23, 20, 21, 0.04);
+  --tab-indicator-shadow: rgba(23, 20, 21, 0.08);
+
+  --stat-sky-bg: linear-gradient(135deg, #fffaf7 0%, #f6eeea 100%);
+  --stat-emerald-bg: linear-gradient(135deg, #f2f5f2 0%, #e7efe9 100%);
+  --stat-violet-bg: linear-gradient(135deg, #fff3ef 0%, #f7e4de 100%);
+  --stat-rose-bg: linear-gradient(135deg, #fff0ea 0%, #f8ddd3 100%);
+  --stat-icon-bg: rgba(255, 253, 251, 0.94);
+
+  --switch-track-bg: #eadfd8;
+  --switch-active-bg: #d82328;
+
+  --detail-cell-bg: rgba(255, 253, 251, 0.94);
+  --detail-cell-hover-bg: #fcf7f3;
+  --code-card-bg: #f6efea;
+  --code-panel-bg: #171415;
+  --code-copy-hover-bg: #312829;
+  --results-badge-bg: #fff1eb;
+  --spending-card-bg: linear-gradient(135deg, #fffaf7 0%, #f5eeea 100%);
+  --message-success-bg: #eef4ef;
+  --message-error-bg: #fff0ef;
+
+  --balance-value-color: #b11721;
+  --spending-value-color: #171415;
+  --success-text: #456353;
+  --sidebar-active-border: rgba(216, 35, 40, 0.18);
+
+  --tone-emerald: #587567;
+  --tone-emerald-soft: rgba(88, 117, 103, 0.14);
+  --tone-sky: #7f6b60;
+  --tone-sky-soft: rgba(127, 107, 96, 0.14);
+  --tone-violet: #b24d57;
+  --tone-violet-soft: rgba(178, 77, 87, 0.14);
+  --tone-rose: #d82328;
+  --tone-rose-soft: rgba(216, 35, 40, 0.14);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-vii-light'] {
+  color-scheme: dark;
+
+  --brand-asphalt: #0f0c0d;
+  --brand-cobalt: #b4a9a4;
+  --brand-amethyst: #cf7682;
+  --brand-moon-spot: #8d7e78;
+  --brand-dolphin: #5a4b48;
+
+  --bg: #110e0f;
+  --surface: #181415;
+  --surface-strong: #211b1d;
+  --surface-elevated: rgba(24, 20, 21, 0.96);
+  --grey: #140f10;
+  --grey-strong: #2a2224;
+  --border: #32282a;
+  --border-strong: #47393c;
+
+  --text: #e8dfdb;
+  --text-strong: #fffaf8;
+  --muted: #b4a6a0;
+
+  --accent: #ff6250;
+  --accent-soft: rgba(255, 98, 80, 0.14);
+  --accent-strong: #ff9b65;
+  --accent-2: #fffaf8;
+  --danger: #ff6250;
+  --danger-soft: rgba(255, 98, 80, 0.16);
+  --success-strong: #84a692;
+  --success-soft: rgba(132, 166, 146, 0.16);
+  --info: #b9a39a;
+  --info-soft: rgba(185, 163, 154, 0.16);
+
+  --shadow: 0 28px 56px -34px rgba(0, 0, 0, 0.78);
+  --shadow-sm: 0 18px 36px -28px rgba(0, 0, 0, 0.64);
+  --menu-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.72);
+  --focus-ring: rgba(255, 98, 80, 0.24);
+
+  --confirm: 149 17% 59%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 0 0% 6%;
+  --tw-foreground: 24 27% 96%;
+  --tw-card: 0 0% 10%;
+  --tw-card-foreground: 24 27% 96%;
+  --tw-popover: 0 0% 10%;
+  --tw-popover-foreground: 24 27% 96%;
+  --tw-primary: 8 100% 66%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 10 11% 17%;
+  --tw-secondary-foreground: 24 27% 96%;
+  --tw-muted: 8 10% 14%;
+  --tw-muted-foreground: 20 10% 68%;
+  --tw-accent: 25 100% 70%;
+  --tw-accent-foreground: 355 7% 9%;
+  --tw-destructive: 8 100% 66%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 8 12% 22%;
+  --tw-input: 8 12% 22%;
+  --tw-ring: 8 100% 66%;
+  --tw-success: 149 17% 59%;
+
+  --primary: 8 100% 66%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 8 100% 66%;
+  --primary-grad-to: 25 100% 70%;
+  --primary-ring: 8 100% 66%;
+
+  --input-bg: #211b1d;
+  --input-border-main: #3b3033;
+  --input-border-hover: #564548;
+  --input-placeholder: #8d7f79;
+
+  --table-head-bg: #1a1517;
+  --table-row-hover: #211b1d;
+
+  --tab-track: #171214;
+  --tab-indicator: #2a2325;
+  --tab-text: #b4a6a0;
+  --tab-text-active: #fffaf8;
+
+  --menu-surface: rgba(24, 20, 21, 0.98);
+  --menu-border: #372d2f;
+  --header-glass: rgba(24, 20, 21, 0.92);
+  --header-text: #fffaf8;
+  --header-subtle-text: #cabdb8;
+  --header-transparent-text: #fffaf8;
+  --header-transparent-subtle-text: rgba(255, 250, 248, 0.78);
+  --header-transparent-hover-bg: rgba(255, 255, 255, 0.08);
+  --header-transparent-avatar-bg: rgba(255, 255, 255, 0.12);
+  --header-transparent-avatar-fg: #fffaf8;
+
+  --shell-main-bg:
+    radial-gradient(circle at top right, rgba(255, 98, 80, 0.12), transparent 22%),
+    radial-gradient(circle at top left, rgba(255, 155, 101, 0.06), transparent 20%),
+    linear-gradient(180deg, #120f10 0%, #0f0c0d 100%);
+  --shell-hero-bg: linear-gradient(135deg, #0f0c0d 0%, #391317 34%, #9f1621 68%, #ff6e4c 100%);
+  --public-overlay-bg: rgba(8, 6, 6, 0.72);
+  --auth-card-bg: rgba(24, 20, 21, 0.94);
+  --card-bg: rgba(24, 20, 21, 0.92);
+  --page-title-bg: linear-gradient(135deg, rgba(24, 20, 21, 0.96) 0%, rgba(30, 24, 26, 0.98) 100%);
+  --section-icon-bg: linear-gradient(135deg, rgba(255, 98, 80, 0.18) 0%, rgba(255, 155, 101, 0.14) 100%);
+  --avatar-bg: #241d1f;
+  --menu-item-hover-bg: #241d1f;
+  --menu-item-active-bg: #2c2325;
+
+  --sidebar-bg: linear-gradient(180deg, #181314 0%, #110e0f 100%);
+  --sidebar-text: #e5dcda;
+  --sidebar-foreground: #e5dcda;
+  --sidebar-active-text: #fffaf8;
+  --sidebar-muted: rgba(229, 220, 218, 0.72);
+  --sidebar-icon: #ff7b68;
+  --sidebar-icon-active: #ffd3c5;
+  --sidebar-hover: rgba(255, 98, 80, 0.12);
+  --sidebar-active: linear-gradient(135deg, rgba(255, 98, 80, 0.18) 0%, rgba(255, 155, 101, 0.16) 100%);
+  --sidebar-divider: rgba(255, 255, 255, 0.08);
+  --sidebar-submenu-border: rgba(255, 255, 255, 0.1);
+  --sidebar-brand-label: #fffaf8;
+  --brand-badge-bg: linear-gradient(135deg, #ff6250 0%, #ff9b65 100%);
+  --brand-badge-fg: #fffaf8;
+
+  --shell-hero-from: #0f0c0d;
+  --shell-hero-mid: #9f1621;
+  --shell-hero-to: #ff6e4c;
+
+  --button-primary-bg: linear-gradient(135deg, #ff6250 0%, #ff9b65 100%);
+  --button-primary-fg: #fffaf8;
+  --button-primary-shadow: 0 18px 32px -18px rgba(255, 98, 80, 0.34);
+  --button-confirm-bg: linear-gradient(135deg, #6f8d7e 0%, #84a692 100%);
+  --button-confirm-fg: #0f0c0d;
+  --button-confirm-shadow: 0 16px 30px -18px rgba(111, 141, 126, 0.3);
+  --button-destructive-bg: linear-gradient(135deg, #f24c4c 0%, #ff6250 100%);
+  --button-destructive-fg: #fffaf8;
+  --button-destructive-shadow: 0 16px 30px -18px rgba(242, 76, 76, 0.3);
+  --button-outline-bg: #1f191b;
+  --button-secondary-bg: #241d1f;
+  --button-ghost-hover-bg: #251f21;
+
+  --datatable-bg: rgba(24, 20, 21, 0.94);
+  --empty-icon-bg: rgba(255, 98, 80, 0.14);
+  --empty-icon-fg: #ff9b65;
+  --tabs-shadow: rgba(0, 0, 0, 0.26);
+  --tab-indicator-shadow: rgba(0, 0, 0, 0.28);
+
+  --stat-sky-bg: linear-gradient(135deg, #1f1a1b 0%, #171314 100%);
+  --stat-emerald-bg: linear-gradient(135deg, #18211d 0%, #141a17 100%);
+  --stat-violet-bg: linear-gradient(135deg, #281b1d 0%, #201517 100%);
+  --stat-rose-bg: linear-gradient(135deg, #311617 0%, #231112 100%);
+  --stat-icon-bg: #251f21;
+
+  --switch-track-bg: #32282a;
+  --switch-active-bg: #ff6250;
+
+  --detail-cell-bg: rgba(24, 20, 21, 0.94);
+  --detail-cell-hover-bg: #221c1e;
+  --code-card-bg: #1b1617;
+  --code-panel-bg: #0d0a0b;
+  --code-copy-hover-bg: #2a2325;
+  --results-badge-bg: #261a1b;
+  --spending-card-bg: linear-gradient(135deg, #1f1a1b 0%, #171314 100%);
+  --message-success-bg: #17201c;
+  --message-error-bg: #2b1718;
+
+  --balance-value-color: #ff8d77;
+  --spending-value-color: #fffaf8;
+  --success-text: #a9c3b4;
+  --sidebar-active-border: rgba(255, 98, 80, 0.22);
+
+  --tone-emerald: #84a692;
+  --tone-emerald-soft: rgba(132, 166, 146, 0.16);
+  --tone-sky: #b9a39a;
+  --tone-sky-soft: rgba(185, 163, 154, 0.16);
+  --tone-violet: #cf7682;
+  --tone-violet-soft: rgba(207, 118, 130, 0.16);
+  --tone-rose: #ff6250;
+  --tone-rose-soft: rgba(255, 98, 80, 0.16);
+}
+
+:root[data-client-theme='siraya-vii-light'] body,
+:root[data-client-theme='siraya-vii-light'] input,
+:root[data-client-theme='siraya-vii-light'] button,
+:root[data-client-theme='siraya-vii-light'] select,
+:root[data-client-theme='siraya-vii-light'] textarea {
+  font-family: var(--font-family-base);
+  letter-spacing: 0.01em;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='main-layout'] {
+  background-attachment: fixed;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-card],
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-page-title],
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-datatable],
+:root[data-client-theme='siraya-vii-light'] [data-client-dashboard='page'] [data-slot='filters'],
+:root[data-client-theme='siraya-vii-light'] [data-client-dashboard='page'] [data-slot='chart-card'],
+:root[data-client-theme='siraya-vii-light'] [data-client-models='filters'],
+:root[data-client-theme='siraya-vii-light'] [data-client-models='page'] [data-slot='empty-state'],
+:root[data-client-theme='siraya-vii-light'] [data-client-credit='history'] [data-slot='filters'],
+:root[data-client-theme='siraya-vii-light'] [data-client-credit='topup'] [data-slot='redeem-panel'],
+:root[data-client-theme='siraya-vii-light'] [data-client-credit='topup'] [data-slot='notice'],
+:root[data-client-theme='siraya-vii-light'] [data-client-credit='overview'] [data-slot='stats-shell'],
+:root[data-client-theme='siraya-vii-light'] [data-client-models='model-card'] {
+  border-radius: 28px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-page-title] [data-slot='title'] {
+  font-family: var(--font-family-heading);
+  font-size: clamp(1.9rem, 1.55rem + 0.95vw, 2.5rem) !important;
+  font-weight: 400 !important;
+  letter-spacing: -0.03em;
+  line-height: 1.02;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-page-title] [data-slot='subtitle'] {
+  max-width: 54ch;
+  font-size: 0.95rem !important;
+  line-height: 1.55;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-section-title] [data-slot='title'],
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-card] [data-slot='card-title'] {
+  font-family: var(--font-family-heading);
+  font-size: 1.05rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.02em;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-section-title] [data-slot='subtitle'],
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-card-description] {
+  font-size: 0.9rem !important;
+  line-height: 1.55;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-section-title] [data-slot='icon'] {
+  border-radius: 20px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-button] {
+  text-transform: none !important;
+  letter-spacing: 0.04em !important;
+  font-size: 0.78rem !important;
+  font-weight: 700 !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-button][data-size='lg'] {
+  font-size: 0.92rem !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-input] [data-slot='control'],
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-combobox] [data-slot='control'],
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-date-range] [data-slot='trigger'],
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-date-time] [data-slot='trigger'] {
+  border-radius: 18px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-tabs],
+:root[data-client-theme='siraya-vii-light'] [data-client-credit='wallet'] [data-slot='tabs'] {
+  border-radius: 999px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-tabs] [data-slot='indicator'] {
+  border-radius: 999px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-sidebar] {
+  border-radius: 32px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-main-fe-sidebar-item] [data-slot='row'] {
+  border-radius: 18px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'] {
+  border-radius: 24px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header']:not(.bg-transparent) {
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--surface-elevated) 86%, var(--accent-soft) 14%) 0%,
+      color-mix(in srgb, var(--surface-elevated) 94%, var(--surface-strong) 6%) 100%
+    ) !important;
+  border-color: transparent !important;
+  box-shadow:
+    0 24px 48px -34px rgba(20, 10, 9, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
+  backdrop-filter: blur(18px) saturate(1.05) !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'].bg-transparent {
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--shell-hero-from) 82%, transparent) 0%,
+      color-mix(in srgb, var(--shell-hero-mid) 66%, transparent) 58%,
+      color-mix(in srgb, var(--shell-hero-to) 48%, transparent) 100%
+    ) !important;
+  border: 1px solid transparent !important;
+  box-shadow:
+    0 24px 48px -34px rgba(0, 0, 0, 0.58),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(18px) saturate(1.06) !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'] [data-slot='title'] {
+  font-family: var(--font-family-heading);
+  font-size: 0.82rem !important;
+  font-weight: 900 !important;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'] [data-slot='toggle'],
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'] [data-slot='user-trigger'] {
+  border: 1px solid transparent;
+  border-radius: 14px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header']:not(.bg-transparent) [data-slot='toggle'],
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header']:not(.bg-transparent) [data-slot='user-trigger'] {
+  background: color-mix(in srgb, var(--surface-strong) 82%, transparent) !important;
+  border-color: transparent !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header']:not(.bg-transparent) [data-slot='toggle']:hover,
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header']:not(.bg-transparent) [data-slot='user-trigger']:hover {
+  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface-strong)) !important;
+  border-color: transparent !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'].bg-transparent [data-slot='toggle'],
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'].bg-transparent [data-slot='user-trigger'] {
+  background: rgba(255, 255, 255, 0.04) !important;
+  border-color: transparent !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'].bg-transparent [data-slot='toggle']:hover,
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'].bg-transparent [data-slot='user-trigger']:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border-color: transparent !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'] [data-slot='timezone'] {
+  font-size: 0.72rem !important;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'] [data-slot='avatar'] {
+  border: 1px solid transparent !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-theme-settings] [data-slot='theme-option'] {
+  border-radius: 24px !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-theme-settings] [data-slot='theme-option'][aria-pressed='true'] {
+  border-color: transparent !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-brand='siraya-badge'] {
+  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
+  background:
+    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.86), transparent 34%),
+    linear-gradient(135deg, rgba(255, 253, 251, 0.98) 0%, rgba(247, 231, 224, 0.94) 100%) !important;
+  color: var(--brand-asphalt) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    0 12px 24px -16px rgba(216, 35, 40, 0.2) !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-brand='siraya-label'] {
+  color: var(--sidebar-brand-label, var(--text-strong)) !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-brand='siraya-wordmark'] {
+  font-family: var(--font-family-heading);
+  letter-spacing: 0.22em !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-brand='siraya-subtitle'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-brand-tone='inverted'][data-brand='siraya-badge'] {
+  border-color: rgba(255, 255, 255, 0.16) !important;
+  background:
+    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.26), transparent 34%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
+  color: rgba(255, 250, 248, 0.86) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-brand-tone='inverted'][data-brand='siraya-label'] {
+  color: #fffaf8 !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-brand-tone='inverted'] [data-brand='siraya-subtitle'] {
+  color: rgba(255, 250, 248, 0.72) !important;
+}