@lucasvu/scope-ui 0.1.0 → 0.1.2

package/dist/themes/theme-ui-new-main-fe.css

@@ -0,0 +1,343 @@
+/* Theme derived from ui-new/main-fe (Argon Dashboard 2 MUI palette) */
+:root {
+  line-height: 1.5;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color-scheme: light dark;
+
+  /* =======================
+     Core (map từ Argon colors)
+  ======================= */
+
+  /* background/surface */
+  --bg: #f8f9fa;                 /* grey.100 */
+  --surface: #ffffff;            /* white.main */
+  --surface-strong: #e9ecef;     /* light.main */
+  --grey: #e9ecef;               /* light.main */
+  --border: #dee2e6;             /* grey.300 */
+
+  /* text */
+  --text: #67748e;               /* text.main */
+  --muted: #6c757d;              /* grey.600 */
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  /* accents (chọn theo palette Argon) */
+  --accent: #fb6340;             /* warning.main */
+  --accent-strong: #fbb140;      /* gradients.warning.state */
+  --accent-2: #5e72e4;           /* primary.main */
+
+  --shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+
+  /* confirm (giữ dạng HSL cho tailwind-style token) */
+  --confirm: 142 71% 45%;        /* ~ success */
+  --confirm-foreground: 0 0% 100%;
+
+  /* =======================
+     TW tokens (HSL)
+     - dùng cho shadcn/tailwind variables
+  ======================= */
+
+  --tw-background: 0 0% 100%;
+  --tw-foreground: 215 19% 24%;        /* gần #344767 */
+
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 215 19% 24%;
+
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 215 19% 24%;
+
+  /* primary = #5e72e4 */
+  --tw-primary: 232 71% 63%;
+  --tw-primary-foreground: 0 0% 100%;
+
+  /* secondary = #8392ab */
+  --tw-secondary: 216 18% 60%;
+  --tw-secondary-foreground: 215 19% 24%;
+
+  /* muted = light main #e9ecef */
+  --tw-muted: 210 17% 92%;
+  --tw-muted-foreground: 215 14% 45%;  /* gần grey.600 */
+
+  /* accent-2 = #11cdef (info) */
+  --tw-accent: 190 88% 50%;
+  --tw-accent-foreground: 0 0% 100%;
+
+  /* destructive = error #f5365c */
+  --tw-destructive: 347 91% 58%;
+  --tw-destructive-foreground: 0 0% 100%;
+
+  /* border/input/ring */
+  --tw-border: 210 14% 88%;            /* ~ grey.300/#dee2e6 */
+  --tw-input: 210 14% 88%;
+  --tw-ring: 216 18% 60%;              /* ~ secondary */
+
+  /* success */
+  --tw-success: 153 64% 49%;           /* #2dce89 */
+
+  /* =======================
+     Primary button tokens (giữ format bạn đang dùng)
+  ======================= */
+  --primary: 232 71% 63%;
+  --primary-foreground: 0 0% 100%;
+
+  /* gradient primary button: #5e72e4 -> #825ee4 */
+  --primary-grad-from: 232 71% 63%;
+  --primary-grad-to: 251 70% 63%;
+  --primary-ring: 232 71% 63%;
+
+  /* =======================
+     Extra: map chi tiết theo Argon (để bạn dùng var(...) trực tiếp)
+  ======================= */
+
+  /* greys */
+  --grey-100: #f8f9fa;
+  --grey-200: #e9ecef;
+  --grey-300: #dee2e6;
+  --grey-400: #ced4da;
+  --grey-500: #adb5bd;
+  --grey-600: #6c757d;
+  --grey-700: #495057;
+  --grey-800: #343a40;
+  --grey-900: #212529;
+
+  /* base colors */
+  --white: #ffffff;
+  --black: #000000;
+  --black-light: #141414;
+
+  --primary-hex: #5e72e4;
+  --secondary-hex: #8392ab;
+  --info-hex: #11cdef;
+  --success-hex: #2dce89;
+  --warning-hex: #fb6340;
+  --error-hex: #f5365c;
+  --dark-hex: #344767;
+  --light-hex: #e9ecef;
+
+  /* gradients */
+  --grad-primary-main: #5e72e4;
+  --grad-primary-state: #825ee4;
+
+  --grad-secondary-main: #627594;
+  --grad-secondary-state: #a8b8d8;
+
+  --grad-info-main: #1171ef;
+  --grad-info-state: #11cdef;
+
+  --grad-success-main: #2dce89;
+  --grad-success-state: #2dcecc;
+
+  --grad-warning-main: #fb6340;
+  --grad-warning-state: #fbb140;
+
+  --grad-error-main: #f5365c;
+  --grad-error-state: #f56036;
+
+  --grad-light-main: #ced4da;
+  --grad-light-state: #ebeff4;
+
+  --grad-dark-main: #212229;
+  --grad-dark-state: #212529;
+
+  /* alerts */
+  --alert-primary-main: #5e72e4;
+  --alert-primary-state: #673bde;
+  --alert-primary-border: #cfd5f7;
+
+  --alert-secondary-main: #627594;
+  --alert-secondary-state: #8ca1cb;
+  --alert-secondary-border: #dadee6;
+
+  --alert-info-main: #1171ef;
+  --alert-info-state: #0eadca;
+  --alert-info-border: #b8f0fa;
+
+  --alert-success-main: #2dce89;
+  --alert-success-state: #26adab;
+  --alert-success-border: #c0f0dc;
+
+  --alert-warning-main: #fb6340;
+  --alert-warning-state: #faa118;
+  --alert-warning-border: #fed0c6;
+
+  --alert-error-main: #f5365c;
+  --alert-error-state: #f3410f;
+  --alert-error-border: #fcc3ce;
+
+  --alert-light-main: #ced4da;
+  --alert-light-state: #d1dae6;
+  --alert-light-border: #f8f9fa;
+
+  --alert-dark-main: #212229;
+  --alert-dark-state: #0f1112;
+  --alert-dark-border: #c2c8d1;
+
+  /* badges */
+  --badge-primary-bg: #eaecfb;
+  --badge-primary-text: #2643e9; /* FIX: bỏ 1 dấu # */
+
+  --badge-secondary-bg: #e4e8ed;
+  --badge-secondary-text: #5974a2;
+
+  --badge-info-bg: #aaedf9;
+  --badge-info-text: #03acca;
+
+  --badge-success-bg: #b0eed3;
+  --badge-success-text: #1aae6f;
+
+  --badge-warning-bg: #fee6e0;
+  --badge-warning-text: #ff3709;
+
+  --badge-error-bg: #fdd1da;
+  --badge-error-text: #f80031;
+
+  --badge-light-bg: #ffffff;
+  --badge-light-text: #c7d3de;
+
+  --badge-dark-bg: #8097bf;
+  --badge-dark-text: #1e2e4a;
+
+  /* inputs */
+  --input-border-main: #d2d6da;
+  --input-border-focus: #11cdef;
+  --input-error: #f5365c;
+  --input-success: #2dce89;
+
+  /* slider */
+  --slider-thumb-border: #d9d9d9;
+
+  /* circle slider */
+  --circle-slider-bg: #d3d3d3;
+
+  /* tabs */
+  --tabs-indicator-shadow: #ddd;
+
+  /* social */
+  --social-facebook-main: #3b5998;
+  --social-facebook-dark: #344e86;
+
+  --social-twitter-main: #55acee;
+  --social-twitter-dark: #3ea1ec;
+
+  --social-instagram-main: #125688;
+  --social-instagram-dark: #0e456d;
+
+  --social-linkedin-main: #0077b5;
+  --social-linkedin-dark: #00669c;
+
+  --social-pinterest-main: #cc2127;
+  --social-pinterest-dark: #b21d22;
+
+  --social-youtube-main: #e52d27;
+  --social-youtube-dark: #d41f1a;
+
+  --social-vimeo-main: #1ab7ea;
+  --social-vimeo-dark: #13a3d2;
+
+  --social-slack-main: #3aaf85;
+  --social-slack-dark: #329874;
+
+  --social-dribbble-main: #ea4c89;
+  --social-dribbble-dark: #e73177;
+
+  --social-github-main: #24292e;
+  --social-github-dark: #171a1d;
+
+  --social-reddit-main: #ff4500;
+  --social-reddit-dark: #e03d00;
+
+  --social-tumblr-main: #35465c;
+  --social-tumblr-dark: #2a3749;
+}
+
+:root[data-ui-color-mode='dark'] {
+  /* Dark mode theo Argon: dùng background.dark + text sáng hơn */
+  --bg: #172b4d;                 /* background.dark */
+  --surface: #0f172a;
+  --surface-strong: #111827;
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+  --border: #334155;
+  --grey: #1e293b;
+
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  /* accent giữ nguyên hệ màu, nhích sáng hơn */
+  --accent: #fb923c;
+  --accent-strong: #f97316;
+  --accent-2: #60a5fa;
+
+  --shadow: 0 30px 70px rgba(2, 6, 23, 0.65);
+
+  --confirm: 142 71% 45%;
+  --confirm-foreground: 0 0% 100%;
+
+  /* TW tokens */
+  --tw-background: 222.2 84% 4.9%;
+  --tw-foreground: 210 40% 98%;
+
+  --tw-card: 222.2 47.4% 11.2%;
+  --tw-card-foreground: 210 40% 98%;
+
+  --tw-popover: 222.2 84% 4.9%;
+  --tw-popover-foreground: 210 40% 98%;
+
+  /* vẫn dùng primary Argon */
+  --tw-primary: 232 71% 63%;
+  --tw-primary-foreground: 0 0% 100%;
+
+  --tw-secondary: 215 27.9% 16.9%;
+  --tw-secondary-foreground: 210 40% 98%;
+
+  --tw-muted: 215 27.9% 16.9%;
+  --tw-muted-foreground: 217.9 10.6% 64.9%;
+
+  --tw-accent: 190 88% 50%;
+  --tw-accent-foreground: 222.2 84% 4.9%;
+
+  --tw-destructive: 347 91% 58%;
+  --tw-destructive-foreground: 210 40% 98%;
+
+  --tw-border: 215 27% 28%;
+  --tw-input: 215 27% 28%;
+  --tw-ring: 215 16% 60%;
+
+  --tw-success: 153 64% 49%;
+
+  /* primary button tokens */
+  --primary: 232 71% 63%;
+  --primary-foreground: 0 0% 100%;
+
+  --primary-grad-from: 232 71% 63%;
+  --primary-grad-to: 251 70% 63%;
+  --primary-ring: 232 71% 63%;
+}
+
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+
+[data-sonner-toaster] {
+  z-index: 2000 !important;
+}

package/dist/themes/theme-ui-pure-white.css

@@ -0,0 +1,377 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+
+/* Clean white theme with crisp slate structure and cobalt accents. */
+
+:root[data-client-theme='pure-white'] {
+  color-scheme: light;
+  --brand-tiger: #0ea5e9;
+  --brand-fire-brick: #2563eb;
+  --brand-asphalt: #0f172a;
+  --brand-cobalt: #3b82f6;
+  --brand-amethyst: #6366f1;
+  --brand-canary: #93c5fd;
+  --brand-moon-spot: #64748b;
+  --brand-lemonade: #eff6ff;
+  --brand-blush: #f8fafc;
+  --brand-champagne: #ffffff;
+  --brand-dolphin: #cbd5e1;
+  --brand-smoke: #e2e8f0;
+  --brand-silver: #f1f5f9;
+
+  --font-family-base: 'Plus Jakarta Sans', 'Noto Sans', 'Segoe UI',
+    sans-serif;
+  --font-family-heading: 'Outfit', 'Plus Jakarta Sans', 'Noto Sans',
+    sans-serif;
+  --font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
+
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-strong: #f1f5f9;
+  --surface-elevated: #ffffff;
+  --grey: #f3f7fb;
+  --grey-strong: #dde7f2;
+  --border: #d8e3ef;
+  --border-strong: #c3d4e6;
+
+  --text: #334155;
+  --text-strong: #0f172a;
+  --muted: #64748b;
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  --accent: #2563eb;
+  --accent-soft: rgba(37, 99, 235, 0.1);
+  --accent-strong: #3b82f6;
+  --accent-2: #1d4ed8;
+  --danger: #dc2626;
+  --danger-soft: rgba(220, 38, 38, 0.12);
+  --success-strong: #059669;
+  --success-soft: rgba(5, 150, 105, 0.14);
+  --info: #0ea5e9;
+  --info-soft: rgba(14, 165, 233, 0.14);
+
+  --shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
+  --shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.07);
+  --menu-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
+  --focus-ring: rgba(37, 99, 235, 0.18);
+
+  --confirm: 160 84% 32%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 0 0% 100%;
+  --tw-foreground: 222 47% 11%;
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 222 47% 11%;
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 222 47% 11%;
+  --tw-primary: 217 91% 60%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 210 40% 96%;
+  --tw-secondary-foreground: 222 47% 11%;
+  --tw-muted: 210 40% 96%;
+  --tw-muted-foreground: 215 16% 47%;
+  --tw-accent: 214 95% 93%;
+  --tw-accent-foreground: 222 47% 11%;
+  --tw-destructive: 0 72% 51%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 214 32% 91%;
+  --tw-input: 214 32% 91%;
+  --tw-ring: 217 91% 60%;
+  --tw-success: 160 84% 32%;
+
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 217 91% 60%;
+  --primary-grad-to: 221 83% 53%;
+  --primary-ring: 217 91% 60%;
+
+  --input-bg: #ffffff;
+  --input-border-main: #d2ddea;
+  --input-border-hover: #b7cff8;
+  --input-border-focus: var(--accent);
+  --input-placeholder: #94a3b8;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #f1f5f9;
+  --table-row-hover: #f3f8ff;
+
+  --tab-track: #eef4fb;
+  --tab-indicator: #ffffff;
+  --tab-text: #64748b;
+  --tab-text-active: #0f172a;
+
+  --menu-surface: #ffffff;
+  --menu-border: #d4e0ec;
+  --header-glass: rgba(248, 251, 255, 0.94);
+  --header-text: #0f172a;
+  --header-transparent-text: #0f172a;
+  --header-transparent-avatar-bg: #eff6ff;
+  --header-transparent-avatar-fg: #1d4ed8;
+  --header-transparent-hover-bg: rgba(37, 99, 235, 0.08);
+
+  --shell-main-bg: #f4f8fc;
+  --shell-hero-bg: linear-gradient(135deg, #edf4ff 0%, #f8fbff 44%, #dbeafe 100%);
+  --public-overlay-bg: rgba(15, 23, 42, 0.56);
+  --auth-card-bg: rgba(255, 255, 255, 0.98);
+  --card-bg: rgba(255, 255, 255, 0.99);
+  --page-title-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
+  --section-icon-bg: #dbeafe;
+  --section-icon-fg: #2563eb;
+  --avatar-bg: #eff6ff;
+  --avatar-fg: #1d4ed8;
+  --menu-item-hover-bg: #eaf2ff;
+  --menu-item-active-bg: #dbeafe;
+
+  --sidebar-bg: linear-gradient(180deg, #fcfdff 0%, #f4f8fd 44%, #e9f1ff 100%);
+  --sidebar-text: #0f172a;
+  --sidebar-foreground: #0f172a;
+  --sidebar-active-text: #1e3a8a;
+  --sidebar-muted: rgba(100, 116, 139, 0.82);
+  --sidebar-icon: #2563eb;
+  --sidebar-icon-active: #1d4ed8;
+  --sidebar-hover: rgba(37, 99, 235, 0.08);
+  --sidebar-active: #d9e8ff;
+  --sidebar-divider: rgba(195, 212, 230, 0.92);
+  --sidebar-submenu-border: rgba(183, 207, 248, 0.92);
+  --brand-badge-bg: #eff6ff;
+  --brand-badge-fg: #2563eb;
+
+  --shell-hero-from: #edf4ff;
+  --shell-hero-mid: #f8fbff;
+  --shell-hero-to: #dbeafe;
+
+  --button-primary-bg: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  --button-primary-fg: #ffffff;
+  --button-primary-shadow: 0 14px 28px -18px rgba(37, 99, 235, 0.28);
+  --button-confirm-bg: linear-gradient(135deg, #059669 0%, #10b981 100%);
+  --button-confirm-fg: #ffffff;
+  --button-confirm-shadow: 0 10px 24px -18px rgba(5, 150, 105, 0.28);
+  --button-destructive-bg: #dc2626;
+  --button-destructive-fg: #ffffff;
+  --button-destructive-shadow: 0 10px 24px -18px rgba(220, 38, 38, 0.26);
+  --button-outline-bg: #ffffff;
+  --button-secondary-bg: #e8f1ff;
+  --button-ghost-hover-bg: #eaf2ff;
+
+  --datatable-bg: #ffffff;
+  --empty-icon-bg: #e8f1ff;
+  --empty-icon-fg: #2563eb;
+  --tabs-shadow: rgba(15, 23, 42, 0.04);
+  --tab-indicator-shadow: rgba(15, 23, 42, 0.08);
+
+  --stat-sky-bg: #eaf2ff;
+  --stat-emerald-bg: #ecfdf5;
+  --stat-violet-bg: #eef1ff;
+  --stat-rose-bg: #fff7ed;
+  --stat-icon-bg: #ffffff;
+  --icon-sky: #2563eb;
+  --icon-emerald: #059669;
+  --icon-violet: #4f46e5;
+  --icon-rose: #ea580c;
+
+  --switch-track-bg: #cfdef5;
+  --switch-active-bg: #2563eb;
+
+  --detail-cell-bg: #ffffff;
+  --detail-cell-hover-bg: #f3f8ff;
+  --code-card-bg: #eaf2ff;
+  --code-panel-bg: #0f172a;
+  --code-copy-hover-bg: #1e293b;
+  --results-badge-bg: #e8f1ff;
+  --spending-card-bg: #eaf2ff;
+  --message-success-bg: #ecfdf5;
+  --message-error-bg: #fef2f2;
+
+  --balance-value-color: #1d4ed8;
+  --spending-value-color: #0f172a;
+  --success-text: #047857;
+  --sidebar-active-border: rgba(37, 99, 235, 0.18);
+
+  --tone-emerald: #10b981;
+  --tone-emerald-soft: rgba(16, 185, 129, 0.14);
+  --tone-sky: #0ea5e9;
+  --tone-sky-soft: rgba(14, 165, 233, 0.14);
+  --tone-violet: #6366f1;
+  --tone-violet-soft: rgba(99, 102, 241, 0.14);
+  --tone-rose: #2563eb;
+  --tone-rose-soft: rgba(37, 99, 235, 0.12);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='pure-white'] {
+  color-scheme: dark;
+  --brand-asphalt: #020617;
+  --brand-cobalt: #60a5fa;
+  --brand-amethyst: #818cf8;
+  --brand-moon-spot: #94a3b8;
+  --brand-dolphin: #475569;
+
+  --bg: #020617;
+  --surface: #0f172a;
+  --surface-strong: #111c34;
+  --surface-elevated: #162033;
+  --grey: #09111f;
+  --grey-strong: #1e293b;
+  --border: #22304a;
+  --border-strong: #334155;
+
+  --text: #dbe4f0;
+  --text-strong: #f8fafc;
+  --muted: #94a3b8;
+
+  --accent: #60a5fa;
+  --accent-soft: rgba(96, 165, 250, 0.18);
+  --accent-strong: #93c5fd;
+  --accent-2: #3b82f6;
+  --danger: #f87171;
+  --danger-soft: rgba(248, 113, 113, 0.16);
+  --success-strong: #34d399;
+  --success-soft: rgba(52, 211, 153, 0.18);
+  --info: #38bdf8;
+  --info-soft: rgba(56, 189, 248, 0.18);
+
+  --shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.74);
+  --shadow-sm: 0 14px 30px -24px rgba(0, 0, 0, 0.58);
+  --menu-shadow: 0 24px 52px -30px rgba(0, 0, 0, 0.68);
+  --focus-ring: rgba(96, 165, 250, 0.24);
+
+  --confirm: 160 84% 46%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 222 84% 5%;
+  --tw-foreground: 210 40% 96%;
+  --tw-card: 217 41% 12%;
+  --tw-card-foreground: 210 40% 96%;
+  --tw-popover: 217 41% 12%;
+  --tw-popover-foreground: 210 40% 96%;
+  --tw-primary: 213 94% 68%;
+  --tw-primary-foreground: 222 47% 11%;
+  --tw-secondary: 219 31% 18%;
+  --tw-secondary-foreground: 210 40% 96%;
+  --tw-muted: 218 31% 16%;
+  --tw-muted-foreground: 216 20% 72%;
+  --tw-accent: 217 91% 60%;
+  --tw-accent-foreground: 222 47% 11%;
+  --tw-destructive: 0 89% 71%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 217 33% 22%;
+  --tw-input: 217 33% 22%;
+  --tw-ring: 213 94% 68%;
+  --tw-success: 160 84% 46%;
+
+  --primary: 213 94% 68%;
+  --primary-foreground: 222 47% 11%;
+  --primary-grad-from: 213 94% 68%;
+  --primary-grad-to: 221 83% 60%;
+  --primary-ring: 213 94% 68%;
+
+  --input-bg: #111c34;
+  --input-border-main: #2a3b59;
+  --input-border-hover: #385173;
+  --input-placeholder: #7c92b4;
+
+  --table-head-bg: #111a2d;
+  --table-row-hover: #152038;
+
+  --tab-track: #0f172a;
+  --tab-indicator: #1c2740;
+  --tab-text: #93a6c2;
+  --tab-text-active: #f8fafc;
+
+  --menu-surface: #0f172a;
+  --menu-border: #22314a;
+  --header-glass: rgba(15, 23, 42, 0.92);
+  --header-text: #f8fafc;
+  --header-transparent-text: #f8fafc;
+  --header-transparent-avatar-bg: rgba(59, 130, 246, 0.16);
+  --header-transparent-avatar-fg: #dbeafe;
+  --header-transparent-hover-bg: rgba(255, 255, 255, 0.08);
+
+  --shell-main-bg: #020617;
+  --shell-hero-bg: linear-gradient(135deg, #020617 0%, #0f172a 46%, #1d4ed8 100%);
+  --public-overlay-bg: rgba(2, 6, 23, 0.7);
+  --auth-card-bg: rgba(15, 23, 42, 0.94);
+  --card-bg: rgba(15, 23, 42, 0.96);
+  --page-title-bg: rgba(15, 23, 42, 0.92);
+  --section-icon-bg: rgba(59, 130, 246, 0.16);
+  --section-icon-fg: #93c5fd;
+  --avatar-bg: rgba(59, 130, 246, 0.16);
+  --avatar-fg: #dbeafe;
+  --menu-item-hover-bg: rgba(59, 130, 246, 0.14);
+  --menu-item-active-bg: rgba(59, 130, 246, 0.18);
+
+  --sidebar-bg: linear-gradient(180deg, #020617 0%, #0f172a 52%, #172554 100%);
+  --sidebar-text: #dbeafe;
+  --sidebar-foreground: #dbeafe;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(191, 219, 254, 0.74);
+  --sidebar-icon: #60a5fa;
+  --sidebar-icon-active: #bfdbfe;
+  --sidebar-hover: rgba(255, 255, 255, 0.06);
+  --sidebar-active: rgba(37, 99, 235, 0.24);
+  --sidebar-divider: rgba(148, 163, 184, 0.16);
+  --sidebar-submenu-border: rgba(148, 163, 184, 0.18);
+  --brand-badge-bg: rgba(59, 130, 246, 0.16);
+  --brand-badge-fg: #bfdbfe;
+
+  --shell-hero-from: #020617;
+  --shell-hero-mid: #0f172a;
+  --shell-hero-to: #1d4ed8;
+
+  --button-primary-bg: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+  --button-primary-fg: #08111f;
+  --button-primary-shadow: 0 14px 28px -16px rgba(59, 130, 246, 0.34);
+  --button-confirm-bg: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  --button-confirm-fg: #052e16;
+  --button-confirm-shadow: 0 10px 24px -16px rgba(16, 185, 129, 0.3);
+  --button-destructive-bg: #f87171;
+  --button-destructive-fg: #1f2937;
+  --button-destructive-shadow: 0 10px 24px -16px rgba(248, 113, 113, 0.28);
+  --button-outline-bg: #0f172a;
+  --button-secondary-bg: #172554;
+  --button-ghost-hover-bg: rgba(59, 130, 246, 0.14);
+
+  --datatable-bg: #0f172a;
+  --empty-icon-bg: rgba(59, 130, 246, 0.14);
+  --empty-icon-fg: #93c5fd;
+  --tabs-shadow: rgba(2, 6, 23, 0.22);
+  --tab-indicator-shadow: rgba(2, 6, 23, 0.28);
+
+  --stat-sky-bg: rgba(59, 130, 246, 0.14);
+  --stat-emerald-bg: rgba(16, 185, 129, 0.14);
+  --stat-violet-bg: rgba(99, 102, 241, 0.14);
+  --stat-rose-bg: rgba(234, 88, 12, 0.14);
+  --stat-icon-bg: #0f172a;
+  --icon-sky: #93c5fd;
+  --icon-emerald: #6ee7b7;
+  --icon-violet: #a5b4fc;
+  --icon-rose: #fdba74;
+
+  --switch-track-bg: #1e293b;
+  --switch-active-bg: #3b82f6;
+
+  --detail-cell-bg: #0f172a;
+  --detail-cell-hover-bg: #152038;
+  --code-card-bg: #172554;
+  --code-panel-bg: #020617;
+  --code-copy-hover-bg: #1e293b;
+  --results-badge-bg: rgba(59, 130, 246, 0.16);
+  --spending-card-bg: rgba(59, 130, 246, 0.14);
+  --message-success-bg: rgba(16, 185, 129, 0.16);
+  --message-error-bg: rgba(248, 113, 113, 0.14);
+
+  --balance-value-color: #93c5fd;
+  --spending-value-color: #f8fafc;
+  --success-text: #6ee7b7;
+  --sidebar-active-border: rgba(96, 165, 250, 0.24);
+
+  --tone-emerald: #34d399;
+  --tone-emerald-soft: rgba(52, 211, 153, 0.16);
+  --tone-sky: #60a5fa;
+  --tone-sky-soft: rgba(96, 165, 250, 0.18);
+  --tone-violet: #818cf8;
+  --tone-violet-soft: rgba(129, 140, 248, 0.18);
+  --tone-rose: #93c5fd;
+  --tone-rose-soft: rgba(147, 197, 253, 0.16);
+}
+