@lucasvu/scope-ui 0.1.0 → 0.1.2

package/dist/themes/theme-ui-solstice-pop.css

@@ -0,0 +1,1020 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
+
+/* Warm stone editorial theme with mineral neutrals and charcoal depth. */
+
+:root[data-client-theme='solstice-pop'] {
+  color-scheme: light;
+  --brand-tiger: #a8a29e;
+  --brand-fire-brick: #57534e;
+  --brand-asphalt: #1c1917;
+  --brand-cobalt: #78716c;
+  --brand-amethyst: #d6d3d1;
+  --brand-canary: #e7e5e4;
+  --brand-moon-spot: #78716c;
+  --brand-lemonade: #f5f5f4;
+  --brand-blush: #fafaf9;
+  --brand-champagne: #ffffff;
+  --brand-dolphin: #d6d3d1;
+  --brand-smoke: #e7e5e4;
+  --brand-silver: #f5f5f4;
+
+  --font-family-base: 'Space Grotesk', 'Noto Sans', 'Segoe UI',
+    sans-serif;
+  --font-family-heading: 'Outfit', 'Space Grotesk', 'Noto Sans', 'Segoe UI',
+    sans-serif;
+  --font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
+
+  --bg: #f5f5f4;
+  --surface: #fcfbfa;
+  --surface-strong: #eeecea;
+  --surface-elevated: #ffffff;
+  --grey: #ece9e7;
+  --grey-strong: #e7e5e4;
+  --border: #d6d3d1;
+  --border-strong: #c1bab4;
+
+  --text: #44403c;
+  --text-strong: #1c1917;
+  --muted: #78716c;
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  --accent: #16a34a;
+  --accent-soft: rgba(22, 163, 74, 0.12);
+  --accent-strong: #4ade80;
+  --accent-2: #15803d;
+  --danger: #dc2626;
+  --danger-soft: rgba(220, 38, 38, 0.14);
+  --success-strong: #15803d;
+  --success-soft: rgba(21, 128, 61, 0.16);
+  --info: #22c55e;
+  --info-soft: rgba(34, 197, 94, 0.16);
+
+  --shadow: 0 20px 42px rgba(28, 25, 23, 0.12);
+  --shadow-sm: 0 12px 24px rgba(28, 25, 23, 0.08);
+  --menu-shadow: 0 24px 44px rgba(28, 25, 23, 0.16);
+  --focus-ring: rgba(22, 163, 74, 0.18);
+
+  --confirm: 142 71% 32%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 30 10% 98%;
+  --tw-foreground: 24 10% 15%;
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 24 10% 15%;
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 24 10% 15%;
+  --tw-primary: 142 76% 36%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 30 9% 96%;
+  --tw-secondary-foreground: 24 10% 15%;
+  --tw-muted: 30 8% 96%;
+  --tw-muted-foreground: 25 5% 45%;
+  --tw-accent: 141 73% 85%;
+  --tw-accent-foreground: 24 10% 15%;
+  --tw-destructive: 0 72% 51%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 30 7% 88%;
+  --tw-input: 30 7% 88%;
+  --tw-ring: 142 76% 36%;
+  --tw-success: 142 71% 32%;
+
+  --primary: 142 76% 36%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 142 76% 30%;
+  --primary-grad-to: 142 71% 45%;
+  --primary-ring: 142 76% 36%;
+
+  --input-bg: #ffffff;
+  --input-border-main: #e7e5e4;
+  --input-border-hover: #d6d3d1;
+  --input-border-focus: var(--accent);
+  --input-placeholder: #a8a29e;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #ece9e7;
+  --table-row-hover: #f9f8f7;
+
+  --tab-track: #ece9e7;
+  --tab-indicator: #ffffff;
+  --tab-text: #78716c;
+  --tab-text-active: #1c1917;
+
+  --menu-surface: #fcfbfa;
+  --menu-border: #d6d3d1;
+  --header-glass: rgba(248, 247, 246, 0.84);
+  --header-text: #1c1917;
+  --header-transparent-text: #292524;
+  --header-transparent-avatar-bg: rgba(255, 255, 255, 0.78);
+  --header-transparent-avatar-fg: #292524;
+  --header-transparent-hover-bg: rgba(68, 64, 60, 0.06);
+
+  --shell-main-bg: #efedeb;
+  --shell-hero-bg:
+    radial-gradient(circle at top right, rgba(214, 211, 209, 0.88) 0%, rgba(214, 211, 209, 0) 40%),
+    linear-gradient(180deg, #d6d3d1 0%, #e7e5e4 52%, #efedeb 100%);
+  --public-overlay-bg: rgba(28, 25, 23, 0.44);
+  --auth-card-bg: rgba(255, 255, 255, 0.96);
+  --card-bg: rgba(255, 255, 255, 0.98);
+  --page-title-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 247, 246, 0.98) 100%);
+  --section-icon-bg: #dcfce7;
+  --section-icon-fg: #15803d;
+  --avatar-bg: #ece9e7;
+  --avatar-fg: #292524;
+  --menu-item-hover-bg: #f1efee;
+  --menu-item-active-bg: #e7e5e4;
+
+  --sidebar-bg: linear-gradient(180deg, #44403c 0%, #292524 62%, #1c1917 100%);
+  --sidebar-text: #fafaf9;
+  --sidebar-foreground: #fafaf9;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(250, 250, 249, 0.76);
+  --sidebar-icon: #e7e5e4;
+  --sidebar-icon-active: #ffffff;
+  --sidebar-hover: rgba(255, 255, 255, 0.08);
+  --sidebar-active: rgba(255, 255, 255, 0.15);
+  --sidebar-divider: rgba(255, 255, 255, 0.08);
+  --sidebar-submenu-border: rgba(255, 255, 255, 0.12);
+  --brand-badge-bg: rgba(255, 255, 255, 0.14);
+  --brand-badge-fg: #fafaf9;
+
+  --shell-hero-from: #d6d3d1;
+  --shell-hero-mid: #e7e5e4;
+  --shell-hero-to: #a8a29e;
+
+  --button-primary-bg: linear-gradient(135deg, #166534 0%, #22c55e 100%);
+  --button-primary-shadow: 0 16px 30px -18px rgba(22, 163, 74, 0.32);
+  --button-confirm-bg: linear-gradient(135deg, #15803d 0%, #4ade80 100%);
+  --button-confirm-shadow: 0 12px 26px -18px rgba(21, 128, 61, 0.28);
+  --button-destructive-bg: #dc2626;
+  --button-destructive-shadow: 0 10px 24px -16px rgba(220, 38, 38, 0.28);
+  --button-outline-bg: #fcfbfa;
+  --button-secondary-bg: #ece9e7;
+  --button-ghost-hover-bg: #f1efee;
+
+  --datatable-bg: #fcfbfa;
+  --empty-icon-bg: #dcfce7;
+  --empty-icon-fg: #15803d;
+  --tabs-shadow: rgba(28, 25, 23, 0.04);
+  --tab-indicator-shadow: rgba(28, 25, 23, 0.08);
+
+  --stat-sky-bg: #ece9e7;
+  --stat-emerald-bg: #ecfdf5;
+  --stat-violet-bg: #f5f5f4;
+  --stat-rose-bg: #dcfce7;
+  --stat-icon-bg: #ffffff;
+  --icon-sky: #57534e;
+  --icon-emerald: #16a34a;
+  --icon-violet: #78716c;
+  --icon-rose: #15803d;
+
+  --switch-track-bg: #c7c1bc;
+  --switch-active-bg: #16a34a;
+
+  --detail-cell-bg: #fcfbfa;
+  --detail-cell-hover-bg: #f7f5f4;
+  --code-card-bg: #ece9e7;
+  --code-panel-bg: #1c1917;
+  --code-copy-hover-bg: #292524;
+  --results-badge-bg: #dcfce7;
+  --spending-card-bg: #efedeb;
+  --message-success-bg: #ecfdf5;
+  --message-error-bg: #ece9e7;
+
+  --balance-value-color: #15803d;
+  --spending-value-color: #1c1917;
+  --success-text: #166534;
+  --sidebar-active-border: rgba(255, 255, 255, 0.18);
+
+  --tone-emerald: #16a34a;
+  --tone-emerald-soft: rgba(22, 163, 74, 0.14);
+  --tone-sky: #78716c;
+  --tone-sky-soft: rgba(120, 113, 108, 0.14);
+  --tone-violet: #a8a29e;
+  --tone-violet-soft: rgba(168, 162, 158, 0.14);
+  --tone-rose: #15803d;
+  --tone-rose-soft: rgba(21, 128, 61, 0.16);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] {
+  color-scheme: dark;
+  --brand-asphalt: #0c0a09;
+  --brand-cobalt: #d6d3d1;
+  --brand-amethyst: #e7e5e4;
+  --brand-moon-spot: #a8a29e;
+  --brand-dolphin: #57534e;
+
+  --bg: #0c0a09;
+  --surface: #1c1917;
+  --surface-strong: #292524;
+  --surface-elevated: #292524;
+  --grey: #161311;
+  --grey-strong: #44403c;
+  --border: #3c3734;
+  --border-strong: #57534e;
+
+  --text: #f5f5f4;
+  --text-strong: #fafaf9;
+  --muted: #a8a29e;
+
+  --accent: #4ade80;
+  --accent-soft: rgba(74, 222, 128, 0.18);
+  --accent-strong: #86efac;
+  --accent-2: #22c55e;
+  --danger: #f87171;
+  --danger-soft: rgba(248, 113, 113, 0.18);
+  --success-strong: #86efac;
+  --success-soft: rgba(134, 239, 172, 0.18);
+  --info: #4ade80;
+  --info-soft: rgba(74, 222, 128, 0.18);
+
+  --shadow: 0 24px 52px -30px rgba(0, 0, 0, 0.78);
+  --shadow-sm: 0 16px 32px -24px rgba(0, 0, 0, 0.62);
+  --menu-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.7);
+  --focus-ring: rgba(74, 222, 128, 0.24);
+
+  --confirm: 141 73% 60%;
+  --confirm-foreground: 145 70% 9%;
+
+  --tw-background: 24 19% 5%;
+  --tw-foreground: 30 9% 96%;
+  --tw-card: 24 10% 11%;
+  --tw-card-foreground: 30 9% 96%;
+  --tw-popover: 24 10% 11%;
+  --tw-popover-foreground: 30 9% 96%;
+  --tw-primary: 141 70% 58%;
+  --tw-primary-foreground: 145 70% 9%;
+  --tw-secondary: 24 8% 18%;
+  --tw-secondary-foreground: 30 9% 96%;
+  --tw-muted: 24 7% 15%;
+  --tw-muted-foreground: 25 5% 64%;
+  --tw-accent: 141 73% 75%;
+  --tw-accent-foreground: 145 70% 9%;
+  --tw-destructive: 0 89% 71%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 24 8% 26%;
+  --tw-input: 24 8% 26%;
+  --tw-ring: 141 70% 58%;
+  --tw-success: 141 73% 60%;
+
+  --primary: 141 70% 58%;
+  --primary-foreground: 145 70% 9%;
+  --primary-grad-from: 141 70% 46%;
+  --primary-grad-to: 141 70% 58%;
+  --primary-ring: 141 70% 58%;
+
+  --input-bg: #1f1b19;
+  --input-border-main: #3c3734;
+  --input-border-hover: #57534e;
+  --input-placeholder: #78716c;
+
+  --table-head-bg: #171412;
+  --table-row-hover: #22201d;
+
+  --tab-track: #171412;
+  --tab-indicator: #292524;
+  --tab-text: #a8a29e;
+  --tab-text-active: #ffffff;
+
+  --menu-surface: #1c1917;
+  --menu-border: #3c3734;
+  --header-glass: rgba(28, 25, 23, 0.94);
+  --header-text: #fafaf9;
+  --header-transparent-text: #fafaf9;
+  --header-transparent-avatar-bg: rgba(255, 255, 255, 0.12);
+  --header-transparent-avatar-fg: #f5f5f4;
+  --header-transparent-hover-bg: rgba(255, 255, 255, 0.08);
+
+  --shell-main-bg: #0c0a09;
+  --shell-hero-bg: linear-gradient(135deg, #0c0a09 0%, #1c1917 48%, #44403c 100%);
+  --public-overlay-bg: rgba(12, 10, 9, 0.74);
+  --auth-card-bg: #171412;
+  --card-bg: #1c1917;
+  --page-title-bg: #292524;
+  --section-icon-bg: #124526;
+  --section-icon-fg: #86efac;
+  --avatar-bg: #292524;
+  --avatar-fg: #f5f5f4;
+  --menu-item-hover-bg: #292524;
+  --menu-item-active-bg: #44403c;
+
+  --sidebar-bg: linear-gradient(180deg, #0c0a09 0%, #1c1917 54%, #44403c 100%);
+  --sidebar-text: #fafaf9;
+  --sidebar-foreground: #fafaf9;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(250, 250, 249, 0.78);
+  --sidebar-icon: #d6d3d1;
+  --sidebar-icon-active: #f5f5f4;
+  --sidebar-hover: rgba(255, 255, 255, 0.08);
+  --sidebar-active: rgba(255, 255, 255, 0.12);
+  --sidebar-divider: rgba(255, 255, 255, 0.08);
+  --sidebar-submenu-border: rgba(255, 255, 255, 0.1);
+  --brand-badge-bg: rgba(255, 255, 255, 0.14);
+  --brand-badge-fg: #f5f5f4;
+
+  --button-primary-bg: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
+  --button-primary-fg: #052e16;
+  --button-primary-shadow: 0 18px 34px -20px rgba(34, 197, 94, 0.36);
+  --button-confirm-bg: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
+  --button-confirm-fg: #dcfce7;
+  --button-confirm-shadow: 0 14px 28px -18px rgba(21, 128, 61, 0.28);
+  --button-destructive-bg: #f87171;
+  --button-destructive-fg: #231010;
+  --button-destructive-shadow: 0 12px 26px -16px rgba(248, 113, 113, 0.3);
+  --button-outline-bg: #292524;
+  --button-secondary-bg: #292524;
+  --button-ghost-hover-bg: #292524;
+
+  --datatable-bg: #1c1917;
+  --empty-icon-bg: #124526;
+  --empty-icon-fg: #86efac;
+  --tabs-shadow: rgba(0, 0, 0, 0.28);
+  --tab-indicator-shadow: rgba(0, 0, 0, 0.34);
+
+  --stat-sky-bg: #171412;
+  --stat-emerald-bg: #103a20;
+  --stat-violet-bg: #22201d;
+  --stat-rose-bg: #124526;
+  --stat-icon-bg: #292524;
+  --icon-sky: #d6d3d1;
+  --icon-emerald: #86efac;
+  --icon-violet: #a8a29e;
+  --icon-rose: #bbf7d0;
+
+  --switch-track-bg: #44403c;
+  --switch-active-bg: #4ade80;
+
+  --detail-cell-bg: #171412;
+  --detail-cell-hover-bg: #22201d;
+  --code-card-bg: #1c1917;
+  --code-panel-bg: #080605;
+  --code-copy-hover-bg: #44403c;
+  --results-badge-bg: #124526;
+  --spending-card-bg: #22201d;
+  --message-success-bg: #103a20;
+  --message-error-bg: #292524;
+
+  --balance-value-color: #bbf7d0;
+  --spending-value-color: #fafaf9;
+  --success-text: #86efac;
+  --sidebar-active-border: rgba(255, 255, 255, 0.18);
+
+  --tone-emerald: #4ade80;
+  --tone-emerald-soft: rgba(74, 222, 128, 0.18);
+  --tone-sky: #a8a29e;
+  --tone-sky-soft: rgba(168, 162, 158, 0.18);
+  --tone-violet: #78716c;
+  --tone-violet-soft: rgba(120, 113, 108, 0.18);
+  --tone-rose: #86efac;
+  --tone-rose-soft: rgba(134, 239, 172, 0.18);
+}
+
+
+:root[data-client-theme='solstice-pop'] body,
+:root[data-client-theme='solstice-pop'] input,
+:root[data-client-theme='solstice-pop'] button,
+:root[data-client-theme='solstice-pop'] select,
+:root[data-client-theme='solstice-pop'] textarea {
+  font-family: var(--font-family-base);
+}
+
+:root[data-client-theme='solstice-pop'] h1,
+:root[data-client-theme='solstice-pop'] h2,
+:root[data-client-theme='solstice-pop'] h3,
+:root[data-client-theme='solstice-pop'] h4,
+:root[data-client-theme='solstice-pop'] h5,
+:root[data-client-theme='solstice-pop'] h6 {
+  font-family: var(--font-family-heading);
+  font-variant-ligatures: none;
+  font-feature-settings: 'liga' 0, 'calt' 0;
+  letter-spacing: normal;
+}
+
+:root[data-client-theme='solstice-pop'] code,
+:root[data-client-theme='solstice-pop'] pre {
+  font-family: var(--font-family-mono);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='main-layout'] {
+  background: var(--shell-main-bg);
+  color: var(--text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='main-layout'] [data-slot='hero-bg'] {
+  background: var(--shell-hero-bg);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='header']:not(.bg-transparent) {
+  background: var(--header-glass);
+  color: var(--header-text);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: none;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='header'] [data-slot='avatar'] {
+  background: var(--avatar-bg);
+  color: var(--avatar-fg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--avatar-fg) 18%, var(--border));
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='header'] [data-slot='user-menu'] {
+  border-color: var(--menu-border);
+  background: var(--menu-surface);
+  box-shadow: var(--menu-shadow);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='header'] [data-slot='user-menu'] button:hover {
+  background: var(--menu-item-hover-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='header'] [data-slot='user-menu'] button[aria-current='page'] {
+  background: var(--menu-item-active-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='public-layout'] [data-slot='overlay'] {
+  background: var(--public-overlay-bg);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-shell='auth-card'] {
+  border-color: var(--border-strong);
+  background: var(--auth-card-bg);
+  box-shadow: var(--shadow);
+  backdrop-filter: none;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-card],
+:root[data-client-theme='solstice-pop'] [data-main-fe-page-title],
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] {
+  border-color: var(--border-strong);
+  background: var(--card-bg);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  backdrop-filter: none;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-page-title] {
+  background: var(--page-title-bg);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-client-shell='header']:not(.bg-transparent) {
+  border-color: var(--border);
+  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.72);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-main-fe-card],
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-main-fe-datatable] {
+  border-color: var(--border);
+  box-shadow: 0 20px 44px -32px rgba(0, 0, 0, 0.72);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-main-fe-page-title] {
+  border-color: var(--border);
+  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.78);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-main-fe-sidebar] {
+  border-color: var(--border-strong);
+  box-shadow: 0 26px 48px -34px rgba(0, 0, 0, 0.76);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='control'],
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='control'] {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='solstice-pop'] [data-client-home='metrics'] [data-main-fe-stat-card] {
+  border-color: var(--border) !important;
+  background: var(--surface-elevated) !important;
+  box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.56) !important;
+}
+
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-page-title] [data-slot='title'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-section-title] [data-slot='title'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-card] [data-slot='card-title'] {
+  color: var(--text-strong);
+  font-variant-ligatures: none;
+  font-feature-settings: 'liga' 0, 'calt' 0;
+  letter-spacing: normal;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-page-title] [data-slot='subtitle'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-section-title] [data-slot='subtitle'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-card-description] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-section-title] [data-slot='icon'] {
+  background: var(--section-icon-bg);
+  color: var(--section-icon-fg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-icon-fg) 14%, var(--border));
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button] {
+  border-color: transparent;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button]:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='create'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='default'] {
+  background: var(--button-primary-bg);
+  color: #fff;
+  box-shadow: var(--button-primary-shadow);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='confirm'] {
+  background: var(--button-confirm-bg);
+  color: #fff;
+  box-shadow: var(--button-confirm-shadow);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='destructive'] {
+  background: var(--button-destructive-bg);
+  color: #fff;
+  box-shadow: var(--button-destructive-shadow);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='outline'] {
+  border-color: var(--border-strong);
+  background: var(--button-outline-bg);
+  color: var(--text);
+  box-shadow: var(--shadow-sm);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='secondary'] {
+  background: var(--button-secondary-bg);
+  color: var(--text-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='ghost'] {
+  color: var(--text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='ghost']:hover {
+  background: var(--button-ghost-hover-bg);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-button][data-variant='link'] {
+  color: var(--accent-strong);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] > label,
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] > label {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='control'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='control'] {
+  border-color: var(--input-border-main);
+  background: var(--input-bg);
+  color: var(--text);
+  box-shadow: none;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='control']::placeholder,
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='control']::placeholder {
+  color: var(--input-placeholder);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='control']:hover,
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='control']:hover {
+  border-color: var(--input-border-hover);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='control']:focus-visible,
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='control']:focus-visible,
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='toggle']:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='prefix'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-input] [data-slot='suffix-wrap'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='chevron'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='clear'] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='dropdown'] {
+  border-color: var(--menu-border);
+  background: var(--menu-surface);
+  box-shadow: var(--menu-shadow);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='option']:hover,
+:root[data-client-theme='solstice-pop'] [data-main-fe-combobox] [data-slot='option'][data-highlighted='true'] {
+  background: var(--menu-item-hover-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-tabs] {
+  border-color: var(--border);
+  background: var(--tab-track);
+  box-shadow: inset 0 1px 0 var(--tabs-shadow);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-tabs] [data-slot='indicator'] {
+  background: var(--tab-indicator);
+  box-shadow: 0 1px 2px var(--tab-indicator-shadow);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-tabs] [data-slot='tab'] {
+  color: var(--tab-text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-tabs] [data-slot='tab'][data-active='true'] {
+  color: var(--tab-text-active);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] [data-slot='sticky-header'] {
+  border-bottom: 1px solid var(--border);
+  background: var(--table-head-bg) !important;
+  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.4);
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] [data-slot='sticky-header'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] [data-slot='header'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] [data-slot='head-row'] {
+  background: var(--table-head-bg) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] th,
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] td {
+  color: var(--text);
+  border-color: var(--border);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] th {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] [data-slot='body-row']:hover {
+  background: var(--table-row-hover) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-datatable] [data-slot='empty-icon'] {
+  background: var(--empty-icon-bg);
+  color: var(--empty-icon-fg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--empty-icon-fg) 14%, var(--border));
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-pagination] {
+  border-top-color: var(--border);
+  color: var(--muted);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-pagination] [data-slot='page-size'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-pagination] [data-slot='current'] {
+  color: var(--text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-pagination] [data-slot='page-size-select'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-pagination] [data-slot='nav-button'] {
+  border-color: var(--border);
+  background: var(--surface);
+  color: var(--text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-pagination] [data-slot='nav-button']:hover,
+:root[data-client-theme='solstice-pop'] [data-main-fe-pagination] [data-slot='page-size-select']:hover {
+  background: var(--surface-strong);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar] {
+  background: var(--sidebar-bg);
+  color: var(--sidebar-foreground);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar] [data-slot='header'] {
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar] [data-slot='brand-badge'] {
+  background: var(--brand-badge-bg);
+  color: var(--brand-badge-fg);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar] [data-slot='brand-label'] {
+  color: var(--sidebar-active-text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar] [data-slot='divider'] {
+  background: transparent;
+  margin-top: 0;
+  margin-bottom: 8px;
+  height: 0;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='action'] {
+  color: var(--sidebar-text);
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='icon'] {
+  color: var(--sidebar-icon);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='label'] {
+  color: var(--sidebar-text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] {
+  background: var(--sidebar-active);
+  border: 1px solid var(--sidebar-active-border);
+  box-shadow: none;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='action'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='action'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='label'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='label'] {
+  color: var(--sidebar-active-text);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='icon'],
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='icon'] {
+  color: var(--sidebar-icon-active);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='row']:not([data-active='true']):not([data-branch-active='true']):hover {
+  background: var(--sidebar-hover);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-sidebar-item] [data-slot='submenu'] {
+  border-color: var(--sidebar-submenu-border);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='sky'] {
+  border-color: var(--border) !important;
+  background: var(--stat-sky-bg) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='emerald'] {
+  border-color: var(--border) !important;
+  background: var(--stat-emerald-bg) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='violet'] {
+  border-color: var(--border) !important;
+  background: var(--stat-violet-bg) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='rose'] {
+  border-color: var(--border) !important;
+  background: var(--stat-rose-bg) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card] [data-slot='label'] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card] [data-slot='value'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card] [data-slot='icon'] {
+  background: var(--stat-icon-bg);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='sky'] [data-slot='icon'] {
+  color: var(--icon-sky);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='emerald'] [data-slot='icon'] {
+  color: var(--icon-emerald);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='violet'] [data-slot='icon'] {
+  color: var(--icon-violet);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-stat-card][data-tone='rose'] [data-slot='icon'] {
+  color: var(--icon-rose);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-switch] [data-slot='track'] {
+  border-color: var(--border-strong);
+  background: var(--switch-track-bg);
+}
+
+:root[data-client-theme='solstice-pop'] [data-main-fe-switch] input:checked + [data-slot='track'] {
+  border-color: var(--accent-strong);
+  background: var(--switch-active-bg);
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='base-url'],
+:root[data-client-theme='solstice-pop'] [data-client-models='model-card'] [data-slot='pricing'],
+:root[data-client-theme='solstice-pop'] [data-client-home='usage-overview'] [data-slot='model-row'],
+:root[data-client-theme='solstice-pop'] [data-client-request-logs='detail'] [data-slot='detail-cell'] {
+  border-color: var(--border) !important;
+  background: var(--detail-cell-bg) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='usage-overview'] [data-slot='model-row']:hover {
+  border-color: var(--border-strong) !important;
+  background: var(--detail-cell-hover-bg) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='base-url-value'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='base-url-copy'] {
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='base-url-copy']:hover {
+  color: var(--accent-strong) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='code-card'] {
+  border-color: var(--border) !important;
+  background: var(--code-card-bg) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='code-panel'] {
+  border-color: var(--border) !important;
+  background: var(--code-panel-bg) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='code-pre'] {
+  color: #f6edf1 !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='copy-code'] {
+  color: #e5c4d0 !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='copy-code']:hover {
+  background: var(--code-copy-hover-bg) !important;
+  color: #ffffff !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='metrics'] [data-slot='metrics-title'],
+:root[data-client-theme='solstice-pop'] [data-client-home='usage-overview'] [data-slot='models-title'],
+:root[data-client-theme='solstice-pop'] [data-client-home='test-api'] [data-slot='field-label'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='metrics'] [data-slot='balance-value'] {
+  color: var(--balance-value-color) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-home='metrics'] [data-slot='spending-value'] {
+  color: var(--spending-value-color) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-dashboard='page'] [data-slot='filters'],
+:root[data-client-theme='solstice-pop'] [data-client-dashboard='page'] [data-slot='chart-card'],
+:root[data-client-theme='solstice-pop'] [data-client-models='filters'],
+:root[data-client-theme='solstice-pop'] [data-client-models='page'] [data-slot='empty-state'],
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='page'] [data-slot='toolbar'],
+:root[data-client-theme='solstice-pop'] [data-client-request-logs='filters'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='history'] [data-slot='filters'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='topup'] [data-slot='redeem-panel'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='topup'] [data-slot='notice'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='overview'] [data-slot='stats-shell'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='page'] [data-slot='page-title-shell'] [data-main-fe-page-title],
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='page'] [data-slot='toolbar'] {
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-dashboard='page'] [data-slot='modal-overlay'],
+:root[data-client-theme='solstice-pop'] [data-client-models='page'] [data-slot='modal-overlay'],
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='modal'] [data-slot='modal-overlay'],
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='confirm'] [data-slot='modal-overlay'],
+:root[data-client-theme='solstice-pop'] [data-client-request-logs='detail'] [data-slot='modal-overlay'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='modal'][data-slot='overlay'] {
+  background: var(--public-overlay-bg) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-dashboard='page'] [data-slot='modal-panel'],
+:root[data-client-theme='solstice-pop'] [data-client-models='page'] [data-slot='modal-panel'],
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='modal'] [data-slot='modal-panel'],
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='confirm'] [data-slot='modal-panel'],
+:root[data-client-theme='solstice-pop'] [data-client-request-logs='detail'] [data-slot='modal-panel'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='modal'] [data-slot='panel'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--menu-shadow) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-models='page'] [data-slot='results-badge'] {
+  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
+  background: var(--results-badge-bg) !important;
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-models='model-card'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-models='model-card']:hover {
+  border-color: var(--border-strong) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='wallet'] [data-slot='tabs'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='wallet'] [data-slot='tab'] {
+  color: var(--text) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='wallet'] [data-slot='tab'][data-active='true'] {
+  background: var(--button-primary-bg) !important;
+  color: #fff !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='wallet'] [data-slot='tab']:not([data-active='true']):hover {
+  background: var(--button-ghost-hover-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='overview'] [data-slot='balance-card'] {
+  border-color: var(--border) !important;
+  background: var(--stat-rose-bg) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='overview'] [data-slot='spending-card'] {
+  border-color: color-mix(in srgb, var(--tone-sky) 18%, var(--border)) !important;
+  background: var(--spending-card-bg) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='overview'] [data-slot='topup-action'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='topup'] [data-slot='coupon-submit'] {
+  background: var(--button-primary-bg) !important;
+  color: #fff !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='overview'] [data-slot='stat-item'] {
+  border-color: var(--border) !important;
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='topup'] [data-slot='coupon-input'] {
+  border-color: var(--input-border-main) !important;
+  background: var(--input-bg) !important;
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='topup'] [data-slot='coupon-input']::placeholder {
+  color: var(--input-placeholder) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='topup'] [data-slot='message'][data-type='success'] {
+  border-color: color-mix(in srgb, var(--success-strong) 26%, var(--border)) !important;
+  background: var(--message-success-bg) !important;
+  color: var(--success-text) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-credit='topup'] [data-slot='message'][data-type='error'] {
+  border-color: color-mix(in srgb, var(--danger) 28%, var(--border)) !important;
+  background: var(--message-error-bg) !important;
+  color: var(--danger) !important;
+}
+
+:root[data-client-theme='solstice-pop'] [data-client-dashboard='page'],
+:root[data-client-theme='solstice-pop'] [data-client-models='page'],
+:root[data-client-theme='solstice-pop'] [data-client-credit='wallet'],
+:root[data-client-theme='solstice-pop'] [data-client-api-keys='page'],
+:root[data-client-theme='solstice-pop'] [data-client-request-logs='page'] {
+  color: var(--text);
+}