@fanvue/ui 1.20.1 → 2.0.0

package/dist/styles/theme.css

@@ -9,6 +9,7 @@
 
   body {
     -webkit-font-smoothing: antialiased;
+    scrollbar-gutter: stable;
   }
 
   input:-webkit-autofill,
@@ -17,55 +18,60 @@
   textarea:-webkit-autofill,
   textarea:-webkit-autofill:hover,
   textarea:-webkit-autofill:focus {
-    -webkit-text-fill-color: var(--color-foreground-default);
+    -webkit-text-fill-color: var(--color-content-primary);
     transition: background-color 9999s ease-in-out 0s;
   }
 }
 
 @theme {
-  --shadow-cardsubtle: 0px 1px 4px -2px #0000000d, 0px 1px 2px -1px #0000000d;
-  --shadow-card: 0px 2px 4px -2px #00000014, 0px 1px 2px -1px #00000014;
-  --shadow-float: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
-  --shadow-lifted: 0px 8px 10px -6px #0000001a, 0px 20px 25px -5px #0000001a;
-  --shadow-nav: 0px -2px 12px 0px #0000000d;
+  --shadow-sm: 0px 1px 3px -1px #0000000d, 0px 1px 4px 0px #0000000f;
+  --shadow-md: 0px 2px 4px -1px #0000000f, 0px 3px 10px -1px #00000014;
+  --shadow-lg: 0px 4px 8px -1px #00000014, 0px 8px 22px -1px #0000001a;
   --shadow-blur-menu: 0px 6px 12px 0px #0000001a;
   --shadow-blur-floating: 0px 12px 40px 2px #00000026;
-  --shadow-focus-ring: 0 0 0 2px var(--color-surface-page), 0 0 0 4px var(--color-ring);
-
-  --color-neutral-50: #15151526;
-  --color-neutral-100: #1515150a;
-  --color-neutral-150: #15151526;
-  --color-neutral-200: #15151533;
-  --color-neutral-300: #15151599;
-  --color-neutral-400: #151515ff;
-  --color-neutral-500: #f6f6f6ff;
-  --color-neutral-600: var(--primitives-color-blackalpha-600);
-  --color-neutral-700: var(--primitives-color-blackalpha-700);
-  --color-neutral-800: var(--primitives-color-blackalpha-800);
-  --color-neutral-900: var(--primitives-color-blackalpha-900);
-  --color-neutral-950: var(--primitives-color-blackalpha-950);
-  --color-neutral-solid: var(--primitives-color-gray-black);
-  --color-neutral-inversesolid: var(--primitives-color-gray-50);
-  --color-foreground-default: var(--primitives-color-gray-black);
-  --color-foreground-secondary: var(--primitives-color-gray-700);
-  --color-foreground-inverse: var(--primitives-color-gray-white);
-  --color-foreground-onaccent: var(--primitives-color-gray-black);
-  --color-foreground-onaccentinverse: var(--primitives-color-gray-white);
-  --color-foreground-tertiary: var(--primitives-color-gray-500);
-  --color-success-background: var(--primitives-color-emerald-green-50);
-  --color-success-default: var(--primitives-color-emerald-green-700);
-  --color-success-border: var(--primitives-color-emerald-green-300);
-  --color-warning-background: var(--primitives-color-amber-50);
-  --color-warning-default: var(--primitives-color-amber-600);
-  --color-warning-border: var(--primitives-color-amber-300);
-  --color-error-background: var(--primitives-color-red-50);
-  --color-error-default: var(--primitives-color-red-600);
-  --color-error-border: var(--primitives-color-red-300);
-  --color-info-background: var(--primitives-color-blue-50);
-  --color-info-default: var(--primitives-color-blue-600);
-  --color-info-border: var(--primitives-color-blue-300);
-  --color-link-default: var(--color-surface-pageinverse);
-  --color-link-hover: var(--color-neutral-800);
+  --shadow-focus-ring: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-interaction-focus);
+
+  --radius-xs: 8px;
+  --radius-sm: 12px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-xl: 32px;
+  --radius-2xl: 40px;
+  --radius-full: 9999px;
+
+
+  --color-neutral-alphas-50: var(--primitives-color-blackalpha-50);
+  --color-neutral-alphas-100: var(--primitives-color-blackalpha-100);
+  --color-neutral-alphas-150: #15151526;
+  --color-neutral-alphas-200: var(--primitives-color-blackalpha-200);
+  --color-neutral-alphas-300: var(--primitives-color-blackalpha-300);
+  --color-neutral-alphas-400: var(--primitives-color-blackalpha-400);
+  --color-neutral-alphas-500: var(--primitives-color-blackalpha-500);
+  --color-neutral-alphas-600: var(--primitives-color-blackalpha-600);
+  --color-neutral-alphas-700: var(--primitives-color-blackalpha-700);
+  --color-neutral-alphas-800: var(--primitives-color-blackalpha-800);
+  --color-neutral-alphas-900: var(--primitives-color-blackalpha-900);
+  --color-neutral-alphas-950: var(--primitives-color-blackalpha-950);
+  --color-content-primary: var(--primitives-color-gray-black);
+  --color-content-secondary: var(--primitives-color-gray-700);
+  --color-content-primary-inverted: var(--primitives-color-gray-white);
+  --color-content-tertiary: var(--primitives-color-gray-600);
+  --color-content-on-brand: var(--primitives-color-gray-black);
+  --color-content-on-brand-inverted: var(--primitives-color-gray-white);
+  --color-success-surface: var(--primitives-color-emerald-green-50);
+  --color-success-content: var(--primitives-color-emerald-green-700);
+  --color-success-secondary: var(--primitives-color-emerald-green-300);
+  --color-warning-surface: var(--primitives-color-amber-50);
+  --color-warning-content: var(--primitives-color-amber-600);
+  --color-warning-secondary: var(--primitives-color-amber-300);
+  --color-error-surface: var(--primitives-color-red-50);
+  --color-error-content: var(--primitives-color-red-600);
+  --color-error-secondary: var(--primitives-color-red-300);
+  --color-info-surface: var(--primitives-color-blue-50);
+  --color-info-content: var(--primitives-color-blue-600);
+  --color-info-secondary: var(--primitives-color-blue-300);
+  --color-link-default: var(--color-content-primary);
+  --color-link-hover: var(--color-buttons-primary-hover);
   --color-special-chart-teal: #28ba8eff;
   --color-special-chart-sky: #4fb2f9ff;
   --color-special-chart-magenta: #d74ff9ff;
@@ -75,202 +81,308 @@
   --color-special-chart-purple: #785dffff;
   --color-special-default: #9c27b0ff;
   --color-special-background: #fdf1ffff;
-  --color-brand-accent-default: var(--primitives-color-green-500);
-  --color-brand-accent-muted: #49f26433;
-  --color-brand-accent-hover: var(--primitives-color-green-400);
-  --color-brand-accent-foreground: var(--primitives-color-gray-black);
+  --color-brand-primary-default: var(--primitives-color-green-500);
+  --color-brand-primary-muted: #49f26433;
+  --color-brand-primary-hover: var(--primitives-color-green-550);
   --color-brand-secondary-default: var(--primitives-color-purple-500);
   --color-brand-secondary-muted: #9772ff33;
   --color-brand-secondary-hover: var(--primitives-color-purple-400);
-  --color-brand-secondary-foreground: var(--primitives-color-gray-black);
-  --color-brand-tertiary-default: var(--primitives-color-purple-500);
-  --color-brand-tertiary-muted: #9772ff33;
-  --color-brand-tertiary-hover: var(--primitives-color-purple-400);
-  --color-brand-tertiary-foreground: var(--primitives-color-gray-black);
-  --color-surface-page: var(--primitives-color-gray-white);
-  --color-surface-container: var(--primitives-color-gray-white);
-  --color-surface-containerraised: var(--primitives-color-gray-white);
-  --color-surface-modal: var(--primitives-color-gray-white);
-  --color-surface-pageinverse: var(--primitives-color-gray-black);
-  --color-surface-backdrop: var(--primitives-color-blackalpha-500);
-  --color-surface-containersubtle: var(--primitives-color-gray-white);
-  --color-surface-pageinversesoft: var(--primitives-color-gray-700);
-  --color-surface-input: var(--primitives-color-gray-100);
-  --color-surface-behindpage: var(--primitives-color-gray-200);
-  --color-ring: var(--primitives-color-purple-600);
+  --color-surface-primary: var(--primitives-color-gray-50);
+  --color-surface-secondary: var(--primitives-color-gray-75);
+  --color-surface-primary-inverted: var(--primitives-color-gray-900);
+  --color-surface-inputs: var(--primitives-color-gray-75);
+  --color-surface-tertiary: var(--primitives-color-gray-150);
+  --color-surface-inputs-off: var(--primitives-color-gray-white);
+  --color-surface-purple-muted: var(--color-brand-secondary-muted);
+  --color-surface-green-muted: var(--color-brand-primary-muted);
+  --color-interaction-focus: var(--primitives-color-purple-600);
+  --color-bg-primary: var(--primitives-color-gray-white);
+  --color-bg-overlay: var(--primitives-color-blackalpha-500);
+  --color-bg-gradient-start: #fcfdfaff;
+  --color-bg-gradient-end: #f2f5efff;
+  --color-border-primary: var(--primitives-color-gray-150);
+  --color-border-strong: var(--primitives-color-gray-300);
+  --color-border-error: var(--primitives-color-red-450);
+  --color-buttons-primary: var(--primitives-color-gray-black);
+  --color-buttons-primary-hover: var(--primitives-color-gray-600);
+  --color-buttons-primary-muted: var(--primitives-color-gray-350);
+  --color-buttons-brand: var(--color-brand-primary-default);
+  --color-buttons-brand-hover: var(--primitives-color-green-550);
+  --color-buttons-brand-muted: var(--color-brand-primary-muted);
+  --color-icons-primary: var(--primitives-color-gray-black);
+  --color-icons-secondary: var(--primitives-color-gray-700);
+  --color-icons-tertiary: var(--primitives-color-gray-600);
+  --color-icons-brand-green: var(--color-brand-primary-default);
+  --color-icons-brand-purple: var(--color-brand-secondary-default);
+  --color-icons-primary-inverted: var(--primitives-color-gray-white);
+
 }
 
-@layer base {
-  :root {
-    /* Stacking layer for portal-rendered overlays (Select, Tooltip).
-       Override to sit above high-z containers such as MUI Dialog:
-       :root { --fanvue-ui-portal-z-index: 1400; } */
-    --fanvue-ui-portal-z-index: 50;
-
-    --primitives-color-gray-50: #fafafaff;
-    --primitives-color-gray-100: #f5f5f5ff;
-    --primitives-color-gray-200: #e5e5e5ff;
-    --primitives-color-gray-300: #d4d4d4ff;
-    --primitives-color-gray-400: #a3a3a3ff;
-    --primitives-color-gray-500: #737373ff;
-    --primitives-color-gray-600: #525252ff;
-    --primitives-color-gray-700: #404040ff;
-    --primitives-color-gray-800: #333333ff;
-    --primitives-color-gray-900: #262626ff;
-    --primitives-color-gray-950: #1c1c1cff;
-    --primitives-color-gray-black: #151515ff;
-    --primitives-color-gray-white: #ffffffff;
-    --primitives-color-green-50: #effef4ff;
-    --primitives-color-green-100: #d9fce5ff;
-    --primitives-color-green-200: #b5f8cdff;
-    --primitives-color-green-300: #7bf1a9ff;
-    --primitives-color-green-400: #5ae882ff;
-    --primitives-color-green-500: #49f264ff;
-    --primitives-color-green-600: #1cc848ff;
-    --primitives-color-green-700: #199d39ff;
-    --primitives-color-green-800: #197c31ff;
-    --primitives-color-green-900: #17662bff;
-    --primitives-color-green-950: #053914ff;
-    --primitives-color-pink-50: #fef4ffff;
-    --primitives-color-pink-100: #fde8ffff;
-    --primitives-color-pink-200: #fad1ffff;
-    --primitives-color-pink-300: #f8a8ffff;
-    --primitives-color-pink-400: #f47bffff;
-    --primitives-color-pink-500: #fc61ffff;
-    --primitives-color-pink-600: #d934e0ff;
-    --primitives-color-pink-700: #b521b8ff;
-    --primitives-color-pink-800: #941d96ff;
-    --primitives-color-pink-900: #7a1e79ff;
-    --primitives-color-pink-950: #520753ff;
-    --primitives-color-purple-50: #f5f2ffff;
-    --primitives-color-purple-100: #ede8ffff;
-    --primitives-color-purple-200: #ddd3ffff;
-    --primitives-color-purple-300: #c3b0ffff;
-    --primitives-color-purple-400: #a688ffff;
-    --primitives-color-purple-500: #9772ffff;
-    --primitives-color-purple-600: #7c4dffff;
-    --primitives-color-purple-700: #6a38ebff;
-    --primitives-color-purple-800: #592fc5ff;
-    --primitives-color-purple-900: #4a29a1ff;
-    --primitives-color-purple-950: #2c186eff;
-    --primitives-color-red-50: #fdececff;
-    --primitives-color-red-100: #fee2e2ff;
-    --primitives-color-red-200: #fecacaff;
-    --primitives-color-red-300: #fca5a5ff;
-    --primitives-color-red-400: #ff7070ff;
-    --primitives-color-red-500: #e33d3dff;
-    --primitives-color-red-600: #ce2d2dff;
-    --primitives-color-red-700: #b91c1cff;
-    --primitives-color-red-800: #991b1bff;
-    --primitives-color-red-900: #7f1d1dff;
-    --primitives-color-red-950: #5e1b1bff;
-    --primitives-color-amber-50: #fff6eaff;
-    --primitives-color-amber-100: #fef3c7ff;
-    --primitives-color-amber-200: #fde68aff;
-    --primitives-color-amber-300: #fcd34dff;
-    --primitives-color-amber-400: #ffba30ff;
-    --primitives-color-amber-500: #f59e0bff;
-    --primitives-color-amber-600: #ff9000ff;
-    --primitives-color-amber-700: #b45309ff;
-    --primitives-color-amber-800: #92400eff;
-    --primitives-color-amber-900: #553820ff;
-    --primitives-color-amber-950: #451a03ff;
-    --primitives-color-blue-50: #ebf8fcff;
-    --primitives-color-blue-100: #dbeafeff;
-    --primitives-color-blue-200: #bfdbfeff;
-    --primitives-color-blue-300: #93c5fdff;
-    --primitives-color-blue-400: #60a5faff;
-    --primitives-color-blue-500: #3f9cffff;
-    --primitives-color-blue-600: #007bffff;
-    --primitives-color-blue-700: #1d4ed8ff;
-    --primitives-color-blue-800: #1e40afff;
-    --primitives-color-blue-900: #003063ff;
-    --primitives-color-blue-950: #172554ff;
-    --primitives-color-blackalpha-0: #15151500;
-    --primitives-color-blackalpha-50: #1515150d;
-    --primitives-color-blackalpha-100: #1515151a;
-    --primitives-color-blackalpha-200: #15151533;
-    --primitives-color-blackalpha-300: #1515154d;
-    --primitives-color-blackalpha-400: #15151566;
-    --primitives-color-blackalpha-500: #15151580;
-    --primitives-color-blackalpha-600: #15151599;
-    --primitives-color-blackalpha-700: #151515b3;
-    --primitives-color-blackalpha-800: #151515cc;
-    --primitives-color-blackalpha-900: #151515e6;
-    --primitives-color-blackalpha-950: #151515f2;
-    --primitives-color-whitealpha-0: #ffffff00;
-    --primitives-color-whitealpha-50: #ffffff0d;
-    --primitives-color-whitealpha-100: #ffffff1a;
-    --primitives-color-whitealpha-200: #ffffff33;
-    --primitives-color-whitealpha-300: #ffffff4d;
-    --primitives-color-whitealpha-400: #ffffff66;
-    --primitives-color-whitealpha-500: #ffffff80;
-    --primitives-color-whitealpha-600: #ffffff99;
-    --primitives-color-whitealpha-700: #ffffffb3;
-    --primitives-color-whitealpha-800: #ffffffcc;
-    --primitives-color-whitealpha-900: #ffffffe6;
-    --primitives-color-whitealpha-950: #fffffff2;
-    --primitives-color-emerald-green-50: #e6fff5ff;
-    --primitives-color-emerald-green-100: #ccffe9ff;
-    --primitives-color-emerald-green-200: #99ffd3ff;
-    --primitives-color-emerald-green-300: #66ffbdff;
-    --primitives-color-emerald-green-400: #33ffa7ff;
-    --primitives-color-emerald-green-500: #00ff91ff;
-    --primitives-color-emerald-green-600: #13ce7cff;
-    --primitives-color-emerald-green-700: #00874cff;
-    --primitives-color-emerald-green-800: #00663aff;
-    --primitives-color-emerald-green-900: #224235ff;
-    --primitives-color-emerald-green-950: #002414ff;
-    --primitives-color-alpha-0: #ffffff00;
-    --primitives-color-alpha-50: #ffffff0d;
-    --primitives-color-alpha-100: #ffffff1a;
-    --primitives-color-alpha-200: #ffffff33;
-    --primitives-color-alpha-300: #ffffff4d;
-    --primitives-color-alpha-400: #ffffff66;
-    --primitives-color-alpha-500: #ffffff80;
-    --primitives-color-alpha-600: #ffffff99;
-    --primitives-color-alpha-700: #ffffffb3;
-    --primitives-color-alpha-800: #ffffffcc;
-    --primitives-color-alpha-900: #ffffffe6;
-    --primitives-color-alpha-950: #fffffff2;
-  }
+:root {
+  /* Stacking layer for portal-rendered overlays (Select, Tooltip).
+     Override to sit above high-z containers such as MUI Dialog:
+     :root { --fanvue-ui-portal-z-index: 1400; } */
+  --fanvue-ui-portal-z-index: 50;
+
+  /* Spacing tokens live in :root (not @theme) to avoid overriding
+     Tailwind v4's default --spacing-* scale used by p-*, m-*, gap-*, etc. */
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-md: 16px;
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-2xs: 4px;
+
+
+  --primitives-color-gray-50: #fafafaff;
+  --primitives-color-gray-75: #f7f7f7ff;
+  --primitives-color-gray-100: #f5f5f5ff;
+  --primitives-color-gray-150: #f0f0f0ff;
+  --primitives-color-gray-200: #e5e5e5ff;
+  --primitives-color-gray-300: #d4d4d4ff;
+  --primitives-color-gray-350: #c3c3c3ff;
+  --primitives-color-gray-400: #a3a3a3ff;
+  --primitives-color-gray-450: #888888ff;
+  --primitives-color-gray-500: #737373ff;
+  --primitives-color-gray-600: #525252ff;
+  --primitives-color-gray-700: #404040ff;
+  --primitives-color-gray-750: #3c3c3cff;
+  --primitives-color-gray-800: #333333ff;
+  --primitives-color-gray-850: #2e2e2eff;
+  --primitives-color-gray-900: #262626ff;
+  --primitives-color-gray-950: #1c1c1cff;
+  --primitives-color-gray-black: #151515ff;
+  --primitives-color-gray-white: #ffffffff;
+  --primitives-color-green-50: #effef4ff;
+  --primitives-color-green-100: #d9fce5ff;
+  --primitives-color-green-200: #b5f8cdff;
+  --primitives-color-green-300: #7bf1a9ff;
+  --primitives-color-green-400: #5ae882ff;
+  --primitives-color-green-500: #49f264ff;
+  --primitives-color-green-550: #1fef40ff;
+  --primitives-color-green-600: #1cc848ff;
+  --primitives-color-green-700: #199d39ff;
+  --primitives-color-green-800: #197c31ff;
+  --primitives-color-green-900: #17662bff;
+  --primitives-color-green-950: #053914ff;
+  --primitives-color-pink-50: #fef4ffff;
+  --primitives-color-pink-100: #fde8ffff;
+  --primitives-color-pink-200: #fad1ffff;
+  --primitives-color-pink-300: #f8a8ffff;
+  --primitives-color-pink-400: #f47bffff;
+  --primitives-color-pink-500: #fc61ffff;
+  --primitives-color-pink-600: #d934e0ff;
+  --primitives-color-pink-700: #b521b8ff;
+  --primitives-color-pink-800: #941d96ff;
+  --primitives-color-pink-900: #7a1e79ff;
+  --primitives-color-pink-950: #520753ff;
+  --primitives-color-purple-50: #f5f2ffff;
+  --primitives-color-purple-100: #ede8ffff;
+  --primitives-color-purple-200: #ddd3ffff;
+  --primitives-color-purple-300: #c3b0ffff;
+  --primitives-color-purple-400: #a688ffff;
+  --primitives-color-purple-500: #9772ffff;
+  --primitives-color-purple-600: #7c4dffff;
+  --primitives-color-purple-700: #6a38ebff;
+  --primitives-color-purple-800: #592fc5ff;
+  --primitives-color-purple-900: #4a29a1ff;
+  --primitives-color-purple-950: #2c186eff;
+  --primitives-color-red-50: #fdececff;
+  --primitives-color-red-100: #fee2e2ff;
+  --primitives-color-red-200: #fecacaff;
+  --primitives-color-red-300: #fca5a5ff;
+  --primitives-color-red-400: #ff7070ff;
+  --primitives-color-red-450: #f24949ff;
+  --primitives-color-red-500: #e33d3dff;
+  --primitives-color-red-600: #ce2d2dff;
+  --primitives-color-red-700: #b91c1cff;
+  --primitives-color-red-800: #991b1bff;
+  --primitives-color-red-900: #7f1d1dff;
+  --primitives-color-red-950: #5e1b1bff;
+  --primitives-color-amber-50: #fff6eaff;
+  --primitives-color-amber-100: #fef3c7ff;
+  --primitives-color-amber-200: #fde68aff;
+  --primitives-color-amber-300: #fcd34dff;
+  --primitives-color-amber-400: #ffba30ff;
+  --primitives-color-amber-500: #f59e0bff;
+  --primitives-color-amber-600: #ff9000ff;
+  --primitives-color-amber-700: #b45309ff;
+  --primitives-color-amber-800: #92400eff;
+  --primitives-color-amber-900: #553820ff;
+  --primitives-color-amber-950: #451a03ff;
+  --primitives-color-blue-50: #ebf8fcff;
+  --primitives-color-blue-100: #dbeafeff;
+  --primitives-color-blue-200: #bfdbfeff;
+  --primitives-color-blue-300: #93c5fdff;
+  --primitives-color-blue-400: #60a5faff;
+  --primitives-color-blue-500: #3f9cffff;
+  --primitives-color-blue-600: #007bffff;
+  --primitives-color-blue-700: #1d4ed8ff;
+  --primitives-color-blue-800: #1e40afff;
+  --primitives-color-blue-900: #003063ff;
+  --primitives-color-blue-950: #172554ff;
+  --primitives-color-blackalpha-0: #15151500;
+  --primitives-color-blackalpha-50: #1515150d;
+  --primitives-color-blackalpha-100: #1515151a;
+  --primitives-color-blackalpha-200: #15151533;
+  --primitives-color-blackalpha-300: #1515154d;
+  --primitives-color-blackalpha-400: #15151566;
+  --primitives-color-blackalpha-500: #15151580;
+  --primitives-color-blackalpha-600: #15151599;
+  --primitives-color-blackalpha-700: #151515b3;
+  --primitives-color-blackalpha-800: #151515cc;
+  --primitives-color-blackalpha-900: #151515e6;
+  --primitives-color-blackalpha-950: #151515f2;
+  --primitives-color-whitealpha-0: #ffffff00;
+  --primitives-color-whitealpha-50: #ffffff0d;
+  --primitives-color-whitealpha-100: #ffffff1a;
+  --primitives-color-whitealpha-200: #ffffff33;
+  --primitives-color-whitealpha-300: #ffffff4d;
+  --primitives-color-whitealpha-400: #ffffff66;
+  --primitives-color-whitealpha-500: #ffffff80;
+  --primitives-color-whitealpha-600: #ffffff99;
+  --primitives-color-whitealpha-700: #ffffffb3;
+  --primitives-color-whitealpha-800: #ffffffcc;
+  --primitives-color-whitealpha-900: #ffffffe6;
+  --primitives-color-whitealpha-950: #fffffff2;
+  --primitives-color-emerald-green-50: #e6fff5ff;
+  --primitives-color-emerald-green-100: #ccffe9ff;
+  --primitives-color-emerald-green-200: #99ffd3ff;
+  --primitives-color-emerald-green-300: #66ffbdff;
+  --primitives-color-emerald-green-400: #33ffa7ff;
+  --primitives-color-emerald-green-500: #00ff91ff;
+  --primitives-color-emerald-green-600: #13ce7cff;
+  --primitives-color-emerald-green-700: #00874cff;
+  --primitives-color-emerald-green-800: #00663aff;
+  --primitives-color-emerald-green-900: #224235ff;
+  --primitives-color-emerald-green-950: #002414ff;
+  --primitives-color-alpha-0: #ffffff00;
+  --primitives-color-alpha-50: #ffffff0d;
+  --primitives-color-alpha-100: #ffffff1a;
+  --primitives-color-alpha-200: #ffffff33;
+  --primitives-color-alpha-300: #ffffff4d;
+  --primitives-color-alpha-400: #ffffff66;
+  --primitives-color-alpha-500: #ffffff80;
+  --primitives-color-alpha-600: #ffffff99;
+  --primitives-color-alpha-700: #ffffffb3;
+  --primitives-color-alpha-800: #ffffffcc;
+  --primitives-color-alpha-900: #ffffffe6;
+  --primitives-color-alpha-950: #fffffff2;
+
+
+  /* Light-mode semantic tokens must also live in :root because @theme
+     cannot resolve var() references to :root primitives at build time. */
+  --color-neutral-alphas-50: var(--primitives-color-blackalpha-50);
+  --color-neutral-alphas-100: var(--primitives-color-blackalpha-100);
+  --color-neutral-alphas-150: #15151526;
+  --color-neutral-alphas-200: var(--primitives-color-blackalpha-200);
+  --color-neutral-alphas-300: var(--primitives-color-blackalpha-300);
+  --color-neutral-alphas-400: var(--primitives-color-blackalpha-400);
+  --color-neutral-alphas-500: var(--primitives-color-blackalpha-500);
+  --color-neutral-alphas-600: var(--primitives-color-blackalpha-600);
+  --color-neutral-alphas-700: var(--primitives-color-blackalpha-700);
+  --color-neutral-alphas-800: var(--primitives-color-blackalpha-800);
+  --color-neutral-alphas-900: var(--primitives-color-blackalpha-900);
+  --color-neutral-alphas-950: var(--primitives-color-blackalpha-950);
+  --color-content-primary: var(--primitives-color-gray-black);
+  --color-content-secondary: var(--primitives-color-gray-700);
+  --color-content-primary-inverted: var(--primitives-color-gray-white);
+  --color-content-tertiary: var(--primitives-color-gray-600);
+  --color-content-on-brand: var(--primitives-color-gray-black);
+  --color-content-on-brand-inverted: var(--primitives-color-gray-white);
+  --color-success-surface: var(--primitives-color-emerald-green-50);
+  --color-success-content: var(--primitives-color-emerald-green-700);
+  --color-success-secondary: var(--primitives-color-emerald-green-300);
+  --color-warning-surface: var(--primitives-color-amber-50);
+  --color-warning-content: var(--primitives-color-amber-600);
+  --color-warning-secondary: var(--primitives-color-amber-300);
+  --color-error-surface: var(--primitives-color-red-50);
+  --color-error-content: var(--primitives-color-red-600);
+  --color-error-secondary: var(--primitives-color-red-300);
+  --color-info-surface: var(--primitives-color-blue-50);
+  --color-info-content: var(--primitives-color-blue-600);
+  --color-info-secondary: var(--primitives-color-blue-300);
+  --color-link-default: var(--color-content-primary);
+  --color-link-hover: var(--color-buttons-primary-hover);
+  --color-special-chart-teal: #28ba8eff;
+  --color-special-chart-sky: #4fb2f9ff;
+  --color-special-chart-magenta: #d74ff9ff;
+  --color-special-chart-orange: #f4a124ff;
+  --color-special-chart-gray: #c6c6c6ff;
+  --color-special-chart-pink: #ff59acff;
+  --color-special-chart-purple: #785dffff;
+  --color-special-default: #9c27b0ff;
+  --color-special-background: #fdf1ffff;
+  --color-brand-primary-default: var(--primitives-color-green-500);
+  --color-brand-primary-muted: #49f26433;
+  --color-brand-primary-hover: var(--primitives-color-green-550);
+  --color-brand-secondary-default: var(--primitives-color-purple-500);
+  --color-brand-secondary-muted: #9772ff33;
+  --color-brand-secondary-hover: var(--primitives-color-purple-400);
+  --color-surface-primary: var(--primitives-color-gray-50);
+  --color-surface-secondary: var(--primitives-color-gray-75);
+  --color-surface-primary-inverted: var(--primitives-color-gray-900);
+  --color-surface-inputs: var(--primitives-color-gray-75);
+  --color-surface-tertiary: var(--primitives-color-gray-150);
+  --color-surface-inputs-off: var(--primitives-color-gray-white);
+  --color-surface-purple-muted: var(--color-brand-secondary-muted);
+  --color-surface-green-muted: var(--color-brand-primary-muted);
+  --color-interaction-focus: var(--primitives-color-purple-600);
+  --color-bg-primary: var(--primitives-color-gray-white);
+  --color-bg-overlay: var(--primitives-color-blackalpha-500);
+  --color-bg-gradient-start: #fcfdfaff;
+  --color-bg-gradient-end: #f2f5efff;
+  --color-border-primary: var(--primitives-color-gray-150);
+  --color-border-strong: var(--primitives-color-gray-300);
+  --color-border-error: var(--primitives-color-red-450);
+  --color-buttons-primary: var(--primitives-color-gray-black);
+  --color-buttons-primary-hover: var(--primitives-color-gray-600);
+  --color-buttons-primary-muted: var(--primitives-color-gray-350);
+  --color-buttons-brand: var(--color-brand-primary-default);
+  --color-buttons-brand-hover: var(--primitives-color-green-550);
+  --color-buttons-brand-muted: var(--color-brand-primary-muted);
+  --color-icons-primary: var(--primitives-color-gray-black);
+  --color-icons-secondary: var(--primitives-color-gray-700);
+  --color-icons-tertiary: var(--primitives-color-gray-600);
+  --color-icons-brand-green: var(--color-brand-primary-default);
+  --color-icons-brand-purple: var(--color-brand-secondary-default);
+  --color-icons-primary-inverted: var(--primitives-color-gray-white);
+
 }
 
 .dark {
-  --color-neutral-50: #232323cc;
-  --color-neutral-100: #ffffff14;
-  --color-neutral-150: #232323cc;
-  --color-neutral-200: #ffffff33;
-  --color-neutral-300: #ffffff99;
-  --color-neutral-400: #ffffffff;
-  --color-neutral-500: #272727ff;
-  --color-neutral-600: var(--primitives-color-whitealpha-600);
-  --color-neutral-700: var(--primitives-color-whitealpha-700);
-  --color-neutral-800: var(--primitives-color-whitealpha-800);
-  --color-neutral-900: var(--primitives-color-whitealpha-900);
-  --color-neutral-950: var(--primitives-color-whitealpha-950);
-  --color-neutral-solid: var(--primitives-color-gray-white);
-  --color-neutral-inversesolid: var(--primitives-color-gray-900);
-  --color-foreground-default: var(--primitives-color-gray-white);
-  --color-foreground-secondary: var(--primitives-color-gray-300);
-  --color-foreground-inverse: var(--primitives-color-gray-black);
-  --color-foreground-onaccent: var(--primitives-color-gray-black);
-  --color-foreground-onaccentinverse: var(--primitives-color-gray-white);
-  --color-foreground-tertiary: var(--primitives-color-gray-400);
-  --color-success-background: var(--primitives-color-emerald-green-900);
-  --color-success-default: var(--primitives-color-emerald-green-600);
-  --color-success-border: var(--primitives-color-emerald-green-700);
-  --color-warning-background: var(--primitives-color-amber-900);
-  --color-warning-default: var(--primitives-color-amber-400);
-  --color-warning-border: var(--primitives-color-amber-700);
-  --color-error-background: var(--primitives-color-red-950);
-  --color-error-default: var(--primitives-color-red-400);
-  --color-error-border: var(--primitives-color-red-700);
-  --color-info-background: var(--primitives-color-blue-900);
-  --color-info-default: var(--primitives-color-blue-500);
-  --color-info-border: var(--primitives-color-blue-700);
-  --color-link-default: var(--color-surface-page);
-  --color-link-hover: var(--color-neutral-800);
+  --color-neutral-alphas-50: var(--primitives-color-whitealpha-100);
+  --color-neutral-alphas-100: var(--primitives-color-whitealpha-100);
+  --color-neutral-alphas-150: #232323cc;
+  --color-neutral-alphas-200: var(--primitives-color-whitealpha-200);
+  --color-neutral-alphas-300: var(--primitives-color-whitealpha-300);
+  --color-neutral-alphas-400: var(--primitives-color-whitealpha-400);
+  --color-neutral-alphas-500: var(--primitives-color-whitealpha-500);
+  --color-neutral-alphas-600: var(--primitives-color-whitealpha-600);
+  --color-neutral-alphas-700: var(--primitives-color-whitealpha-700);
+  --color-neutral-alphas-800: var(--primitives-color-whitealpha-800);
+  --color-neutral-alphas-900: var(--primitives-color-whitealpha-900);
+  --color-neutral-alphas-950: var(--primitives-color-whitealpha-950);
+  --color-content-primary: var(--primitives-color-gray-white);
+  --color-content-secondary: var(--primitives-color-gray-300);
+  --color-content-primary-inverted: var(--primitives-color-gray-black);
+  --color-content-tertiary: var(--primitives-color-gray-400);
+  --color-content-on-brand: var(--primitives-color-gray-black);
+  --color-content-on-brand-inverted: var(--primitives-color-gray-white);
+  --color-success-surface: var(--primitives-color-emerald-green-900);
+  --color-success-content: var(--primitives-color-emerald-green-600);
+  --color-success-secondary: var(--primitives-color-emerald-green-700);
+  --color-warning-surface: var(--primitives-color-amber-900);
+  --color-warning-content: var(--primitives-color-amber-400);
+  --color-warning-secondary: var(--primitives-color-amber-700);
+  --color-error-surface: var(--primitives-color-red-950);
+  --color-error-content: var(--primitives-color-red-400);
+  --color-error-secondary: var(--primitives-color-red-700);
+  --color-info-surface: var(--primitives-color-blue-900);
+  --color-info-content: var(--primitives-color-blue-500);
+  --color-info-secondary: var(--primitives-color-blue-700);
+  --color-link-default: var(--color-content-primary);
+  --color-link-hover: var(--color-buttons-primary-hover);
   --color-special-chart-teal: #28ba8eff;
   --color-special-chart-sky: #4fb2f9ff;
   --color-special-chart-magenta: #d74ff9ff;
@@ -280,29 +392,41 @@
   --color-special-chart-purple: #785dffff;
   --color-special-default: #ed81ffff;
   --color-special-background: #4f1259ff;
-  --color-brand-accent-default: var(--primitives-color-green-500);
-  --color-brand-accent-muted: #49f26426;
-  --color-brand-accent-hover: var(--primitives-color-green-400);
-  --color-brand-accent-foreground: var(--primitives-color-gray-black);
+  --color-brand-primary-default: var(--primitives-color-green-500);
+  --color-brand-primary-muted: #49f26433;
+  --color-brand-primary-hover: var(--primitives-color-green-550);
   --color-brand-secondary-default: var(--primitives-color-purple-500);
   --color-brand-secondary-muted: #9772ff33;
   --color-brand-secondary-hover: var(--primitives-color-purple-400);
-  --color-brand-secondary-foreground: var(--primitives-color-gray-black);
-  --color-brand-tertiary-default: var(--primitives-color-purple-500);
-  --color-brand-tertiary-muted: #9772ff33;
-  --color-brand-tertiary-hover: var(--primitives-color-purple-400);
-  --color-brand-tertiary-foreground: var(--primitives-color-gray-black);
-  --color-surface-page: var(--primitives-color-gray-black);
-  --color-surface-container: var(--primitives-color-gray-900);
-  --color-surface-containerraised: var(--primitives-color-gray-800);
-  --color-surface-modal: var(--primitives-color-gray-800);
-  --color-surface-pageinverse: var(--primitives-color-gray-white);
-  --color-surface-backdrop: var(--primitives-color-blackalpha-500);
-  --color-surface-containersubtle: var(--primitives-color-gray-950);
-  --color-surface-pageinversesoft: var(--primitives-color-gray-300);
-  --color-surface-input: var(--primitives-color-gray-950);
-  --color-surface-behindpage: var(--primitives-color-gray-900);
-  --color-ring: var(--primitives-color-purple-400);
+  --color-surface-primary: var(--primitives-color-gray-900);
+  --color-surface-secondary: var(--primitives-color-gray-850);
+  --color-surface-primary-inverted: var(--primitives-color-gray-50);
+  --color-surface-inputs: var(--primitives-color-gray-750);
+  --color-surface-tertiary: var(--primitives-color-gray-600);
+  --color-surface-inputs-off: var(--primitives-color-gray-850);
+  --color-surface-purple-muted: var(--color-brand-secondary-muted);
+  --color-surface-green-muted: var(--color-brand-primary-muted);
+  --color-interaction-focus: var(--primitives-color-purple-400);
+  --color-bg-primary: var(--primitives-color-gray-black);
+  --color-bg-overlay: var(--primitives-color-blackalpha-500);
+  --color-bg-gradient-start: var(--primitives-color-gray-950);
+  --color-bg-gradient-end: var(--primitives-color-gray-black);
+  --color-border-primary: var(--primitives-color-gray-800);
+  --color-border-strong: var(--primitives-color-gray-700);
+  --color-border-error: var(--primitives-color-red-450);
+  --color-buttons-primary: var(--primitives-color-gray-white);
+  --color-buttons-primary-hover: var(--primitives-color-gray-350);
+  --color-buttons-primary-muted: var(--primitives-color-gray-450);
+  --color-buttons-brand: var(--color-brand-primary-default);
+  --color-buttons-brand-hover: var(--primitives-color-green-550);
+  --color-buttons-brand-muted: var(--color-brand-primary-muted);
+  --color-icons-primary: var(--primitives-color-gray-white);
+  --color-icons-secondary: var(--primitives-color-gray-300);
+  --color-icons-tertiary: var(--primitives-color-gray-400);
+  --color-icons-brand-green: var(--color-brand-primary-default);
+  --color-icons-brand-purple: var(--color-brand-secondary-default);
+  --color-icons-primary-inverted: var(--primitives-color-gray-black);
+
 }
 
 @utility typography-regular-body-lg {
@@ -482,6 +606,7 @@
   line-height: 64px;
 }
 
+
 @utility fv-skeleton-wave {
   position: relative;
   overflow: hidden;
@@ -494,8 +619,8 @@
     background-image: linear-gradient(
       90deg,
       transparent,
-      color-mix(in srgb, var(--color-foreground-default) 8%, transparent),
-      color-mix(in srgb, var(--color-foreground-default) 16%, transparent),
+      color-mix(in srgb, var(--color-content-primary) 8%, transparent),
+      color-mix(in srgb, var(--color-content-primary) 16%, transparent),
       transparent
     );
     animation: fv-skeleton-shimmer 1.5s ease-in-out infinite;
@@ -533,4 +658,4 @@
 
 @utility animate-accordion-collapse {
   animation: accordion-collapse 200ms ease-out;
-}
+}