@lucasvu/scope-ui 0.1.0 → 0.1.1

package/dist/themes/theme-default.css

@@ -0,0 +1,343 @@
+: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;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* 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-citrus-ink.css

@@ -0,0 +1,364 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');
+
+/* High-contrast graphite theme with mint and citrus accents. */
+
+:root[data-client-theme='citrus-ink'] {
+  color-scheme: light;
+  --brand-tiger: #1f9d80;
+  --brand-fire-brick: #d36b1d;
+  --brand-asphalt: #1f2937;
+  --brand-cobalt: #3b82f6;
+  --brand-amethyst: #7c7cf8;
+  --brand-canary: #f1b94b;
+  --brand-moon-spot: #7a7f87;
+  --brand-lemonade: #fff1c9;
+  --brand-blush: #fff7db;
+  --brand-champagne: #fffdf6;
+  --brand-dolphin: #d7dde5;
+  --brand-smoke: #ebeef2;
+  --brand-silver: #f4f6f8;
+
+  --font-family-base: 'Manrope', 'Noto Sans', 'Segoe UI', sans-serif;
+  --font-family-heading: 'Sora', 'Manrope', 'Noto Sans', 'Segoe UI',
+    sans-serif;
+  --font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
+
+  --bg: #fffaf2;
+  --surface: #ffffff;
+  --surface-strong: #f8f0e3;
+  --surface-elevated: #ffffff;
+  --grey: #f3eadb;
+  --grey-strong: #e5dccf;
+  --border: #e4d8c6;
+  --border-strong: #d3c3ad;
+
+  --text: #4a433b;
+  --text-strong: #1f2937;
+  --muted: #7a746a;
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  --accent: #d36b1d;
+  --accent-soft: rgba(211, 107, 29, 0.14);
+  --accent-strong: #f1b94b;
+  --accent-2: #1f9d80;
+  --danger: #d84a4a;
+  --danger-soft: rgba(216, 74, 74, 0.14);
+  --success-strong: #1f9d80;
+  --success-soft: rgba(31, 157, 128, 0.16);
+  --info: #3b82f6;
+  --info-soft: rgba(59, 130, 246, 0.16);
+
+  --shadow: 0 20px 42px rgba(31, 41, 55, 0.1);
+  --shadow-sm: 0 12px 24px rgba(31, 41, 55, 0.07);
+  --menu-shadow: 0 24px 46px rgba(31, 41, 55, 0.14);
+  --focus-ring: rgba(211, 107, 29, 0.18);
+
+  --confirm: 165 67% 37%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 43 100% 98%;
+  --tw-foreground: 214 28% 18%;
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 214 28% 18%;
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 214 28% 18%;
+  --tw-primary: 29 76% 47%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 41 55% 93%;
+  --tw-secondary-foreground: 214 28% 18%;
+  --tw-muted: 39 44% 93%;
+  --tw-muted-foreground: 35 7% 48%;
+  --tw-accent: 42 86% 62%;
+  --tw-accent-foreground: 214 28% 18%;
+  --tw-destructive: 0 64% 56%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 39 33% 84%;
+  --tw-input: 39 33% 84%;
+  --tw-ring: 29 76% 47%;
+  --tw-success: 165 67% 37%;
+
+  --primary: 29 76% 47%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 29 76% 47%;
+  --primary-grad-to: 42 86% 62%;
+  --primary-ring: 29 76% 47%;
+
+  --input-bg: #ffffff;
+  --input-border-main: #ddcfbc;
+  --input-border-hover: #c8b59b;
+  --input-border-focus: var(--accent);
+  --input-placeholder: #9b917f;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #fbf1e1;
+  --table-row-hover: #fff8ef;
+
+  --tab-track: #f7efe2;
+  --tab-indicator: #ffffff;
+  --tab-text: #7a746a;
+  --tab-text-active: #1f2937;
+
+  --menu-surface: #fffdf9;
+  --menu-border: #e1d6c8;
+  --header-glass: #fffdf8;
+  --header-text: #1f2937;
+
+  --shell-main-bg: #fffaf2;
+  --shell-hero-bg: linear-gradient(135deg, #1f2937 0%, #1f9d80 46%, #f1b94b 100%);
+  --public-overlay-bg: rgba(24, 28, 33, 0.64);
+  --auth-card-bg: #fffefb;
+  --card-bg: #ffffff;
+  --page-title-bg: #fffdf9;
+  --section-icon-bg: #fff0db;
+  --section-icon-fg: #d36b1d;
+  --avatar-bg: #e8fbf7;
+  --avatar-fg: #1f9d80;
+  --menu-item-hover-bg: #fff3e5;
+  --menu-item-active-bg: #ffecd2;
+
+  --sidebar-bg: linear-gradient(180deg, #1f2430 0%, #1c4d4a 52%, #d38a2f 100%);
+  --sidebar-text: #f6f1e8;
+  --sidebar-foreground: #f6f1e8;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(246, 241, 232, 0.76);
+  --sidebar-icon: #f6dfb6;
+  --sidebar-icon-active: #fff4d3;
+  --sidebar-hover: rgba(255, 255, 255, 0.08);
+  --sidebar-active: rgba(255, 255, 255, 0.14);
+  --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: #ffe8bf;
+
+  --shell-hero-from: #1f2937;
+  --shell-hero-mid: #1f9d80;
+  --shell-hero-to: #f1b94b;
+
+  --button-primary-bg: linear-gradient(135deg, #d36b1d 0%, #f1b94b 100%);
+  --button-primary-fg: #1f2937;
+  --button-primary-shadow: 0 16px 30px -18px rgba(211, 107, 29, 0.34);
+  --button-confirm-bg: linear-gradient(135deg, #1f9d80 0%, #53c7ac 100%);
+  --button-confirm-fg: #10231f;
+  --button-confirm-shadow: 0 12px 26px -18px rgba(31, 157, 128, 0.3);
+  --button-destructive-bg: #d84a4a;
+  --button-destructive-fg: #ffffff;
+  --button-destructive-shadow: 0 10px 24px -16px rgba(216, 74, 74, 0.3);
+  --button-outline-bg: #ffffff;
+  --button-secondary-bg: #fff2df;
+  --button-ghost-hover-bg: #fff2df;
+
+  --datatable-bg: #ffffff;
+  --empty-icon-bg: #fff0db;
+  --empty-icon-fg: #d36b1d;
+  --tabs-shadow: rgba(31, 41, 55, 0.05);
+  --tab-indicator-shadow: rgba(31, 41, 55, 0.08);
+
+  --stat-sky-bg: #edf4ff;
+  --stat-emerald-bg: #ebfbf6;
+  --stat-violet-bg: #f0efff;
+  --stat-rose-bg: #fff2de;
+  --stat-icon-bg: #ffffff;
+  --icon-sky: #3b82f6;
+  --icon-emerald: #1f9d80;
+  --icon-violet: #7c7cf8;
+  --icon-rose: #d36b1d;
+
+  --switch-track-bg: #eadfce;
+  --switch-active-bg: #d36b1d;
+
+  --detail-cell-bg: #ffffff;
+  --detail-cell-hover-bg: #fff8ef;
+  --code-card-bg: #fff7ea;
+  --code-panel-bg: #151b22;
+  --code-copy-hover-bg: #26303b;
+  --results-badge-bg: #fff0db;
+  --spending-card-bg: #edf8f3;
+  --message-success-bg: #ecfaf4;
+  --message-error-bg: #fff0ec;
+
+  --balance-value-color: #d36b1d;
+  --spending-value-color: #1f2937;
+  --success-text: #1a8a72;
+  --sidebar-active-border: rgba(255, 232, 191, 0.22);
+
+  --tone-emerald: #1f9d80;
+  --tone-emerald-soft: rgba(31, 157, 128, 0.16);
+  --tone-sky: #3b82f6;
+  --tone-sky-soft: rgba(59, 130, 246, 0.14);
+  --tone-violet: #7c7cf8;
+  --tone-violet-soft: rgba(124, 124, 248, 0.14);
+  --tone-rose: #f1b94b;
+  --tone-rose-soft: rgba(241, 185, 75, 0.16);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='citrus-ink'] {
+  color-scheme: dark;
+  --brand-asphalt: #11161d;
+  --brand-cobalt: #7fb0ff;
+  --brand-amethyst: #a5a6ff;
+  --brand-moon-spot: #b1b9c2;
+  --brand-dolphin: #66717e;
+
+  --bg: #12161d;
+  --surface: #181e27;
+  --surface-strong: #202834;
+  --surface-elevated: #272f3b;
+  --grey: #151b23;
+  --grey-strong: #334050;
+  --border: #334050;
+  --border-strong: #46576b;
+
+  --text: #e8edf3;
+  --text-strong: #fffdf8;
+  --muted: #aeb9c6;
+
+  --accent: #f3a24c;
+  --accent-soft: rgba(243, 162, 76, 0.18);
+  --accent-strong: #f7cf6b;
+  --accent-2: #47d0bc;
+  --danger: #ff8a72;
+  --danger-soft: rgba(255, 138, 114, 0.18);
+  --success-strong: #55d1b7;
+  --success-soft: rgba(85, 209, 183, 0.18);
+  --info: #7fb0ff;
+  --info-soft: rgba(127, 176, 255, 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.72);
+  --focus-ring: rgba(243, 162, 76, 0.24);
+
+  --confirm: 168 56% 58%;
+  --confirm-foreground: 214 28% 14%;
+
+  --tw-background: 215 25% 11%;
+  --tw-foreground: 42 100% 98%;
+  --tw-card: 215 24% 15%;
+  --tw-card-foreground: 42 100% 98%;
+  --tw-popover: 215 24% 15%;
+  --tw-popover-foreground: 42 100% 98%;
+  --tw-primary: 33 87% 63%;
+  --tw-primary-foreground: 214 28% 14%;
+  --tw-secondary: 213 22% 20%;
+  --tw-secondary-foreground: 42 100% 98%;
+  --tw-muted: 214 20% 18%;
+  --tw-muted-foreground: 214 16% 74%;
+  --tw-accent: 48 90% 69%;
+  --tw-accent-foreground: 214 28% 14%;
+  --tw-destructive: 12 95% 72%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 214 21% 27%;
+  --tw-input: 214 21% 27%;
+  --tw-ring: 33 87% 63%;
+  --tw-success: 168 56% 58%;
+
+  --primary: 33 87% 63%;
+  --primary-foreground: 214 28% 14%;
+  --primary-grad-from: 33 87% 63%;
+  --primary-grad-to: 48 90% 69%;
+  --primary-ring: 33 87% 63%;
+
+  --input-bg: #1f2732;
+  --input-border-main: #435264;
+  --input-border-hover: #56677d;
+  --input-placeholder: #9aa8b6;
+
+  --table-head-bg: #1f2732;
+  --table-row-hover: #232d39;
+
+  --tab-track: #1c2430;
+  --tab-indicator: #2b3442;
+  --tab-text: #b2bdc8;
+  --tab-text-active: #ffffff;
+
+  --menu-surface: #1b232e;
+  --menu-border: #39485a;
+  --header-glass: #18202a;
+  --header-text: #fffdf8;
+
+  --shell-main-bg: #12161d;
+  --shell-hero-bg: linear-gradient(135deg, #10161d 0%, #145c56 50%, #c37a20 100%);
+  --public-overlay-bg: rgba(10, 12, 16, 0.78);
+  --auth-card-bg: #1a222d;
+  --card-bg: #1b232e;
+  --page-title-bg: #212b37;
+  --section-icon-bg: #2d3642;
+  --section-icon-fg: #f3a24c;
+  --avatar-bg: #23363a;
+  --avatar-fg: #55d1b7;
+  --menu-item-hover-bg: #27313d;
+  --menu-item-active-bg: #2e3947;
+
+  --sidebar-bg: linear-gradient(180deg, #10161d 0%, #153333 54%, #8d5718 100%);
+  --sidebar-text: #f6efe4;
+  --sidebar-foreground: #f6efe4;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(246, 239, 228, 0.78);
+  --sidebar-icon: #f6dca7;
+  --sidebar-icon-active: #fff0cd;
+  --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: #ffe5b8;
+
+  --button-primary-bg: linear-gradient(135deg, #f3a24c 0%, #f7cf6b 100%);
+  --button-primary-fg: #14202a;
+  --button-primary-shadow: 0 18px 34px -20px rgba(243, 162, 76, 0.38);
+  --button-confirm-bg: linear-gradient(135deg, #55d1b7 0%, #8be7d5 100%);
+  --button-confirm-fg: #10231f;
+  --button-confirm-shadow: 0 14px 28px -18px rgba(85, 209, 183, 0.3);
+  --button-destructive-bg: #ff8a72;
+  --button-destructive-fg: #ffffff;
+  --button-destructive-shadow: 0 12px 26px -16px rgba(255, 138, 114, 0.3);
+  --button-outline-bg: #212b37;
+  --button-secondary-bg: #2a3440;
+  --button-ghost-hover-bg: #2a3440;
+
+  --datatable-bg: #1b232e;
+  --empty-icon-bg: #2d3642;
+  --empty-icon-fg: #f3a24c;
+  --tabs-shadow: rgba(0, 0, 0, 0.28);
+  --tab-indicator-shadow: rgba(0, 0, 0, 0.34);
+
+  --stat-sky-bg: #1d2b43;
+  --stat-emerald-bg: #17342f;
+  --stat-violet-bg: #252944;
+  --stat-rose-bg: #33291f;
+  --stat-icon-bg: #26313d;
+  --icon-sky: #7fb0ff;
+  --icon-emerald: #55d1b7;
+  --icon-violet: #a5a6ff;
+  --icon-rose: #f7cf6b;
+
+  --switch-track-bg: #44505f;
+  --switch-active-bg: #f3a24c;
+
+  --detail-cell-bg: #1d2530;
+  --detail-cell-hover-bg: #26303b;
+  --code-card-bg: #1c2430;
+  --code-panel-bg: #0f141b;
+  --code-copy-hover-bg: #293441;
+  --results-badge-bg: #2d3642;
+  --spending-card-bg: #1b302a;
+  --message-success-bg: #17342f;
+  --message-error-bg: #352421;
+
+  --balance-value-color: #f3a24c;
+  --spending-value-color: #fffdf8;
+  --success-text: #7be2cf;
+  --sidebar-active-border: rgba(255, 229, 184, 0.2);
+
+  --tone-emerald: #55d1b7;
+  --tone-emerald-soft: rgba(85, 209, 183, 0.18);
+  --tone-sky: #7fb0ff;
+  --tone-sky-soft: rgba(127, 176, 255, 0.18);
+  --tone-violet: #a5a6ff;
+  --tone-violet-soft: rgba(165, 166, 255, 0.18);
+  --tone-rose: #f7cf6b;
+  --tone-rose-soft: rgba(247, 207, 107, 0.18);
+}
+