@asafarim/design-tokens 0.4.4 → 0.4.9

package/css/tokens.base.css

@@ -1,168 +1,168 @@
-/* ------------------------------------------------------------------ */
-/* 20 fonts (100-900) Google Fonts */
-/* ------------------------------------------------------------------ */
-@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Figtree:ital,wght@0,300..900;1,300..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&family=Space+Grotesk:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Barriecito&family=Borel&family=DynaPuff:wght@400..700&family=Gabarito:wght@400..900&family=Kranky&family=Macondo&family=Playpen+Sans:wght@100..800&family=Rubik+Spray+Paint&family=Shadows+Into+Light+Two&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap");
-
-:root {
-  --asm-font-family-base: "Inter", "Lato", "Open Sans", "Roboto";
-  --asm-font-family-inter: "Inter", ui-sans-serif, system-ui, -apple-system,
-    Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-  --asm-font-family-primary: "Inter", "Lato", "Open Sans", "Roboto";
-  --asm-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
-    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --asm-font-family-poppins: "Poppins", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-open-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-lato: "Lato", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-rubik: "Rubik", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-nunito: "Nunito", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-work-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-manrope: "Manrope", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-figtree: "Figtree", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-sora: "Sora", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-outfit: "Outfit", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-lexend: "Lexend", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-public-sans: "Public Sans", ui-sans-serif, system-ui,
-    sans-serif;
-  --asm-font-family-dm-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-overpass: "Overpass", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-quicksand: "Quicksand", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-karla: "Karla", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-barlow: "Barlow", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-space-grotesk: "Space Grotesk", ui-sans-serif, system-ui,
-    sans-serif;
-  --asm-font-family-red-hat: "Red Hat Display", ui-sans-serif, system-ui,
-    sans-serif;
-  --asm-font-family-jost: "Jost", ui-sans-serif, system-ui, sans-serif;
-  --asm-font-family-barriecito: "Barriecito", cursive, sans-serif;
-  --asm-font-family-borel: "Borel", cursive, sans-serif;
-  --asm-font-family-dynapuff: "DynaPuff", cursive, sans-serif;
-  --asm-font-family-gabarito: "Gabarito", sans-serif;
-  --asm-font-family-kranky: "Kranky", cursive, sans-serif;
-  --asm-font-family-macondo: "Macondo", cursive, sans-serif;
-  --asm-font-family-playpen-sans: "Playpen Sans", cursive, sans-serif;
-  --asm-font-family-rubik-spray: "Rubik Spray Paint", cursive, sans-serif;
-  --asm-font-family-shadows-light: "Shadows Into Light Two", cursive, sans-serif;
-  --asm-font-family-zalando: "Zalando Sans", ui-sans-serif, system-ui,
-    sans-serif;
-
-  --asm-font-weight-100: 100;
-  --asm-font-weight-200: 200;
-  --asm-font-weight-300: 300;
-  --asm-font-weight-400: 400;
-  --asm-font-weight-500: 500;
-  --asm-font-weight-600: 600;
-  --asm-font-weight-700: 700;
-  --asm-font-weight-800: 800;
-  --asm-font-weight-900: 900;
-
-  --asm-font-size-xs: 0.75rem;
-  --asm-font-size-sm: 0.875rem;
-  --asm-font-size-md: 1rem;
-  --asm-font-size-lg: 1.125rem;
-  --asm-font-size-xl: 1.25rem;
-  --asm-font-size-2xl: 1.5rem;
-  --asm-font-size-3xl: 1.875rem;
-  --asm-font-size-4xl: 2.25rem;
-  --asm-font-size-5xl: 3rem;
-  --asm-font-size-6xl: 3.75rem;
-
-  --asm-line-height-tight: 1.1;
-  --asm-line-height-normal: 1.4;
-  --asm-line-height-relaxed: 1.6;
-  --asm-line-height-h1: 1.05;
-  --asm-line-height-h2: 1.1;
-  --asm-line-height-h3: 1.15;
-  --asm-line-height-h4: 1.2;
-  --asm-line-height-h5: 1.25;
-  --asm-line-height-h6: 1.25;
-
-  --asm-letter-spacing-tight: -0.01em;
-  --asm-letter-spacing-normal: 0em;
-  --asm-letter-spacing-wide: 0.02em;
-
-  --asm-space-0: 0px;
-  --asm-space-1: 4px;
-  --asm-space-2: 8px;
-  --asm-space-3: 12px;
-  --asm-space-4: 16px;
-  --asm-space-5: 20px;
-  --asm-space-6: 24px;
-  --asm-space-8: 32px;
-  --asm-space-10: 40px;
-  --asm-space-12: 48px;
-  --asm-space-16: 64px;
-
-  --asm-space-page-padding-x: clamp(16px, 3vw, 32px);
-  --asm-space-page-padding-y: clamp(16px, 3vw, 40px);
-  --asm-space-section-gap: clamp(24px, 4vw, 64px);
-  --asm-space-component-gap: 16px;
-
-  --asm-grid-columns: 12;
-  --asm-grid-gutter: 24px;
-
-  --asm-container-xs: 480px;
-  --asm-container-sm: 640px;
-  --asm-container-md: 768px;
-  --asm-container-lg: 1024px;
-  --asm-container-xl: 1280px;
-  --asm-container-2xl: 1360px;
-
-  --asm-radius-sm: 6px;
-  --asm-radius-md: 10px;
-  --asm-radius-lg: 12px;
-  --asm-radius-xl: 16px;
-  --asm-radius-full: 9999px;
-
-  --asm-border-hairline: 1px;
-  --asm-border-thin: 2px;
-  --asm-border-thick: 3px;
-
-  --asm-effect-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
-  --asm-effect-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.1);
-  --asm-effect-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.14);
-  --asm-effect-shadow-xl: 0 24px 60px rgba(17, 24, 39, 0.18);
-
-  --asm-effect-blur-sm: 4px;
-  --asm-effect-blur-md: 8px;
-  --asm-effect-blur-lg: 16px;
-
-  --asm-motion-duration-fast: 120ms;
-  --asm-motion-duration-normal: 200ms;
-  --asm-motion-duration-slow: 320ms;
-
-  --asm-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
-  --asm-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
-  --asm-motion-easing-entrance: cubic-bezier(0, 0, 0, 1);
-  --asm-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
-
-  --asm-transition-fade: opacity var(--asm-motion-duration-normal)
-    var(--asm-motion-easing-standard);
-  --asm-transition-slide: transform var(--asm-motion-duration-normal)
-    var(--asm-motion-easing-standard);
-  --asm-transition-scale: transform var(--asm-motion-duration-fast)
-    var(--asm-motion-easing-emphasized);
-
-  --asm-z-base: 0;
-  --asm-z-dropdown: 100;
-  --asm-z-sticky: 200;
-  --asm-z-overlay: 300;
-  --asm-z-modal: 400;
-  --asm-z-popover: 450;
-  --asm-z-tooltip: 500;
-  --asm-z-toast: 600;
-
-  --asm-icon-size-xs: 12px;
-  --asm-icon-size-sm: 16px;
-  --asm-icon-size-md: 20px;
-  --asm-icon-size-lg: 24px;
-  --asm-icon-size-xl: 28px;
-
-  --asm-icon-stroke-thin: 1;
-  --asm-icon-stroke-regular: 1.5;
-  --asm-icon-stroke-bold: 2;
-
-  --asm-density-factor: 1;
-  --asm-space-control-padding-y: 8px;
-  --asm-space-control-padding-x: 12px;
-}
+/* ------------------------------------------------------------------ */
+/* 20 fonts (100-900) Google Fonts */
+/* ------------------------------------------------------------------ */
+@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Figtree:ital,wght@0,300..900;1,300..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&family=Space+Grotesk:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Barriecito&family=Borel&family=DynaPuff:wght@400..700&family=Gabarito:wght@400..900&family=Kranky&family=Macondo&family=Playpen+Sans:wght@100..800&family=Rubik+Spray+Paint&family=Shadows+Into+Light+Two&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap");
+
+:root {
+  --asm-font-family-base: "Inter", "Lato", "Open Sans", "Roboto";
+  --asm-font-family-inter: "Inter", ui-sans-serif, system-ui, -apple-system,
+    Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --asm-font-family-primary: "Inter", "Lato", "Open Sans", "Roboto";
+  --asm-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --asm-font-family-poppins: "Poppins", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-open-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-lato: "Lato", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-rubik: "Rubik", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-nunito: "Nunito", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-work-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-manrope: "Manrope", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-figtree: "Figtree", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-sora: "Sora", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-outfit: "Outfit", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-lexend: "Lexend", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-public-sans: "Public Sans", ui-sans-serif, system-ui,
+    sans-serif;
+  --asm-font-family-dm-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-overpass: "Overpass", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-quicksand: "Quicksand", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-karla: "Karla", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-barlow: "Barlow", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-space-grotesk: "Space Grotesk", ui-sans-serif, system-ui,
+    sans-serif;
+  --asm-font-family-red-hat: "Red Hat Display", ui-sans-serif, system-ui,
+    sans-serif;
+  --asm-font-family-jost: "Jost", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-barriecito: "Barriecito", cursive, sans-serif;
+  --asm-font-family-borel: "Borel", cursive, sans-serif;
+  --asm-font-family-dynapuff: "DynaPuff", cursive, sans-serif;
+  --asm-font-family-gabarito: "Gabarito", sans-serif;
+  --asm-font-family-kranky: "Kranky", cursive, sans-serif;
+  --asm-font-family-macondo: "Macondo", cursive, sans-serif;
+  --asm-font-family-playpen-sans: "Playpen Sans", cursive, sans-serif;
+  --asm-font-family-rubik-spray: "Rubik Spray Paint", cursive, sans-serif;
+  --asm-font-family-shadows-light: "Shadows Into Light Two", cursive, sans-serif;
+  --asm-font-family-zalando: "Zalando Sans", ui-sans-serif, system-ui,
+    sans-serif;
+
+  --asm-font-weight-100: 100;
+  --asm-font-weight-200: 200;
+  --asm-font-weight-300: 300;
+  --asm-font-weight-400: 400;
+  --asm-font-weight-500: 500;
+  --asm-font-weight-600: 600;
+  --asm-font-weight-700: 700;
+  --asm-font-weight-800: 800;
+  --asm-font-weight-900: 900;
+
+  --asm-font-size-xs: 0.75rem;
+  --asm-font-size-sm: 0.875rem;
+  --asm-font-size-md: 1rem;
+  --asm-font-size-lg: 1.125rem;
+  --asm-font-size-xl: 1.25rem;
+  --asm-font-size-2xl: 1.5rem;
+  --asm-font-size-3xl: 1.875rem;
+  --asm-font-size-4xl: 2.25rem;
+  --asm-font-size-5xl: 3rem;
+  --asm-font-size-6xl: 3.75rem;
+
+  --asm-line-height-tight: 1.1;
+  --asm-line-height-normal: 1.4;
+  --asm-line-height-relaxed: 1.6;
+  --asm-line-height-h1: 1.05;
+  --asm-line-height-h2: 1.1;
+  --asm-line-height-h3: 1.15;
+  --asm-line-height-h4: 1.2;
+  --asm-line-height-h5: 1.25;
+  --asm-line-height-h6: 1.25;
+
+  --asm-letter-spacing-tight: -0.01em;
+  --asm-letter-spacing-normal: 0em;
+  --asm-letter-spacing-wide: 0.02em;
+
+  --asm-space-0: 0px;
+  --asm-space-1: 4px;
+  --asm-space-2: 8px;
+  --asm-space-3: 12px;
+  --asm-space-4: 16px;
+  --asm-space-5: 20px;
+  --asm-space-6: 24px;
+  --asm-space-8: 32px;
+  --asm-space-10: 40px;
+  --asm-space-12: 48px;
+  --asm-space-16: 64px;
+
+  --asm-space-page-padding-x: clamp(16px, 3vw, 32px);
+  --asm-space-page-padding-y: clamp(16px, 3vw, 40px);
+  --asm-space-section-gap: clamp(24px, 4vw, 64px);
+  --asm-space-component-gap: 16px;
+
+  --asm-grid-columns: 12;
+  --asm-grid-gutter: 24px;
+
+  --asm-container-xs: 480px;
+  --asm-container-sm: 640px;
+  --asm-container-md: 768px;
+  --asm-container-lg: 1024px;
+  --asm-container-xl: 1280px;
+  --asm-container-2xl: 1360px;
+
+  --asm-radius-sm: 6px;
+  --asm-radius-md: 10px;
+  --asm-radius-lg: 12px;
+  --asm-radius-xl: 16px;
+  --asm-radius-full: 9999px;
+
+  --asm-border-hairline: 1px;
+  --asm-border-thin: 2px;
+  --asm-border-thick: 3px;
+
+  --asm-effect-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
+  --asm-effect-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.1);
+  --asm-effect-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.14);
+  --asm-effect-shadow-xl: 0 24px 60px rgba(17, 24, 39, 0.18);
+
+  --asm-effect-blur-sm: 4px;
+  --asm-effect-blur-md: 8px;
+  --asm-effect-blur-lg: 16px;
+
+  --asm-motion-duration-fast: 120ms;
+  --asm-motion-duration-normal: 200ms;
+  --asm-motion-duration-slow: 320ms;
+
+  --asm-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --asm-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+  --asm-motion-easing-entrance: cubic-bezier(0, 0, 0, 1);
+  --asm-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  --asm-transition-fade: opacity var(--asm-motion-duration-normal)
+    var(--asm-motion-easing-standard);
+  --asm-transition-slide: transform var(--asm-motion-duration-normal)
+    var(--asm-motion-easing-standard);
+  --asm-transition-scale: transform var(--asm-motion-duration-fast)
+    var(--asm-motion-easing-emphasized);
+
+  --asm-z-base: 0;
+  --asm-z-dropdown: 100;
+  --asm-z-sticky: 200;
+  --asm-z-overlay: 300;
+  --asm-z-modal: 400;
+  --asm-z-popover: 450;
+  --asm-z-tooltip: 500;
+  --asm-z-toast: 600;
+
+  --asm-icon-size-xs: 12px;
+  --asm-icon-size-sm: 16px;
+  --asm-icon-size-md: 20px;
+  --asm-icon-size-lg: 24px;
+  --asm-icon-size-xl: 28px;
+
+  --asm-icon-stroke-thin: 1;
+  --asm-icon-stroke-regular: 1.5;
+  --asm-icon-stroke-bold: 2;
+
+  --asm-density-factor: 1;
+  --asm-space-control-padding-y: 8px;
+  --asm-space-control-padding-x: 12px;
+}

package/css/tokens.dark.css

@@ -1,162 +1,162 @@
-[data-theme="dark"] {
-  --asm-color-bg: #0B1220;
-  --asm-color-surface: #0F172A;
-  --asm-color-surface-muted: #111B2E;
-  --asm-color-panel: #0F172A;
-  --asm-color-modal: #0F172A;
-
-  --asm-color-text: #E5E7EB;
-  --asm-color-text-muted: #9CA3AF;
-  --asm-color-border: #1F2937;
-
-  /* Primary Color Scale */
-  --asm-color-primary-0: #0F172A;
-  --asm-color-primary-50: #1E293B;
-  --asm-color-primary-100: #1E3A8A;
-  --asm-color-primary-200: #1E40FF;
-  --asm-color-primary-300: #304FFE;
-  --asm-color-primary-400: #3A5AFE;
-  --asm-color-primary-500: #4F6BFF;
-  --asm-color-primary-600: #6B82FF;
-  --asm-color-primary-700: #818CF8;
-  --asm-color-primary-800: #A5B4FC;
-  --asm-color-primary-900: #C7D2FE;
-  --asm-color-primary-950: #E0E7FF;
-
-  --asm-color-brand-primary-50: #EEF2FF;
-  --asm-color-brand-primary-500: #3A5AFE;
-  --asm-color-brand-primary-600: #3A5AFE;
-  --asm-color-brand-primary-700: #304FFE;
-
-  /* Warning Color Scale */
-  --asm-color-warning-0: #451A03;
-  --asm-color-warning-50: #78350F;
-  --asm-color-warning-100: #92400E;
-  --asm-color-warning-200: #B45309;
-  --asm-color-warning-300: #D97706;
-  --asm-color-warning-400: #F59E0B;
-  --asm-color-warning-500: #FBBF24;
-  --asm-color-warning-600: #FCD34D;
-  --asm-color-warning-700: #FDE68A;
-  --asm-color-warning-800: #FEF3C7;
-  --asm-color-warning-900: #FFFBEB;
-  --asm-color-warning-950: #FFFEF5;
-
-  /* Danger Color Scale */
-  --asm-color-danger-0: #450A0A;
-  --asm-color-danger-50: #7F1D1D;
-  --asm-color-danger-100: #991B1B;
-  --asm-color-danger-200: #B91C1C;
-  --asm-color-danger-300: #DC2626;
-  --asm-color-danger-400: #EF4444;
-  --asm-color-danger-500: #F87171;
-  --asm-color-danger-600: #FCA5A5;
-  --asm-color-danger-700: #FECACA;
-  --asm-color-danger-800: #FEE2E2;
-  --asm-color-danger-900: #FEF2F2;
-  --asm-color-danger-950: #FEF9F9;
-
-  /* Info Color Scale */
-  --asm-color-info-0: #082F49;
-  --asm-color-info-50: #0C4A6E;
-  --asm-color-info-100: #075985;
-  --asm-color-info-200: #0369A1;
-  --asm-color-info-300: #0284C7;
-  --asm-color-info-400: #0EA5E9;
-  --asm-color-info-500: #38BDF8;
-  --asm-color-info-600: #7DD3FC;
-  --asm-color-info-700: #BAE6FD;
-  --asm-color-info-800: #E0F2FE;
-  --asm-color-info-900: #F0F9FF;
-  --asm-color-info-950: #F7FCFF;
-
-  /* Success Color Scale */
-  --asm-color-success-0: #052E16;
-  --asm-color-success-50: #14532D;
-  --asm-color-success-100: #166534;
-  --asm-color-success-200: #15803D;
-  --asm-color-success-300: #16A34A;
-  --asm-color-success-400: #22C55E;
-  --asm-color-success-500: #4ADE80;
-  --asm-color-success-600: #86EFAC;
-  --asm-color-success-700: #BBF7D0;
-  --asm-color-success-800: #DCFCE7;
-  --asm-color-success-900: #F0FDF4;
-  --asm-color-success-950: #F7FEF9;
-
-  /* Purple Color Scale */
-  --asm-color-purple-0: #3B0764;
-  --asm-color-purple-50: #581C87;
-  --asm-color-purple-100: #6B21A8;
-  --asm-color-purple-200: #7E22CE;
-  --asm-color-purple-300: #9333EA;
-  --asm-color-purple-400: #A855F7;
-  --asm-color-purple-500: #C084FC;
-  --asm-color-purple-600: #D8B4FE;
-  --asm-color-purple-700: #E9D5FF;
-  --asm-color-purple-800: #F3E8FF;
-  --asm-color-purple-900: #FAF5FF;
-  --asm-color-purple-950: #FDFAFF;
-
-  /* Neutral Color Scale */
-  --asm-color-neutral-0: #030712;
-  --asm-color-neutral-50: #111827;
-  --asm-color-neutral-100: #1F2937;
-  --asm-color-neutral-200: #374151;
-  --asm-color-neutral-300: #4B5563;
-  --asm-color-neutral-400: #6B7280;
-  --asm-color-neutral-500: #9CA3AF;
-  --asm-color-neutral-600: #D1D5DB;
-  --asm-color-neutral-700: #E5E7EB;
-  --asm-color-neutral-800: #F3F4F6;
-  --asm-color-neutral-900: #F9FAFB;
-  --asm-color-neutral-950: #FCFCFD;
-
-  /* Secondary Color Scale */
-  --asm-color-secondary-0: #042F2E;
-  --asm-color-secondary-50: #134E4A;
-  --asm-color-secondary-100: #115E59;
-  --asm-color-secondary-200: #0F766E;
-  --asm-color-secondary-300: #0D9488;
-  --asm-color-secondary-400: #14B8A6;
-  --asm-color-secondary-500: #2DD4BF;
-  --asm-color-secondary-600: #5EEAD4;
-  --asm-color-secondary-700: #99F6E4;
-  --asm-color-secondary-800: #CCFBF1;
-  --asm-color-secondary-900: #F0FDFA;
-  --asm-color-secondary-950: #F7FEFD;
-
-  --asm-color-semantic-success: #22C55E;
-  --asm-color-semantic-warning: #FBBF24;
-  --asm-color-semantic-error: #F87171;
-  --asm-color-semantic-info: #38BDF8;
-
-  --asm-color-button-primary-bg: #3A5AFE;
-  --asm-color-button-primary-bg-hover: #304FFE;
-  --asm-color-button-primary-bg-active: #304FFE;
-  --asm-color-button-primary-text: #FFFFFF;
-
-  --asm-color-button-secondary-bg: #111B2E;
-  --asm-color-button-secondary-text: #E5E7EB;
-
-  --asm-color-button-ghost-bg-hover: rgba(229, 231, 235, 0.08);
-
-  --asm-color-button-destructive-bg: #F87171;
-  --asm-color-button-destructive-text: #0B1220;
-
-  --asm-color-button-disabled-bg: #1F2937;
-  --asm-color-button-disabled-text: #9CA3AF;
-
-  --asm-color-input-bg: #0B1220;
-  --asm-color-input-text: #E5E7EB;
-  --asm-color-input-border: #1F2937;
-  --asm-color-input-border-hover: #374151;
-  --asm-color-input-border-focus: #3A5AFE;
-  --asm-color-input-placeholder: #9CA3AF;
-  --asm-color-input-error-border: #F87171;
-  --asm-color-input-success-border: #22C55E;
-
-  --asm-color-focus-ring: #3A5AFE;
-
-  --asm-color-overlay-scrim: rgba(17, 24, 39, 0.64);
-}
+[data-theme="dark"] {
+  --asm-color-bg: #0B1220;
+  --asm-color-surface: #0F172A;
+  --asm-color-surface-muted: #111B2E;
+  --asm-color-panel: #0F172A;
+  --asm-color-modal: #0F172A;
+
+  --asm-color-text: #E5E7EB;
+  --asm-color-text-muted: #9CA3AF;
+  --asm-color-border: #1F2937;
+
+  /* Primary Color Scale */
+  --asm-color-primary-0: #0F172A;
+  --asm-color-primary-50: #1E293B;
+  --asm-color-primary-100: #1E3A8A;
+  --asm-color-primary-200: #1E40FF;
+  --asm-color-primary-300: #304FFE;
+  --asm-color-primary-400: #3A5AFE;
+  --asm-color-primary-500: #4F6BFF;
+  --asm-color-primary-600: #6B82FF;
+  --asm-color-primary-700: #818CF8;
+  --asm-color-primary-800: #A5B4FC;
+  --asm-color-primary-900: #C7D2FE;
+  --asm-color-primary-950: #E0E7FF;
+
+  --asm-color-brand-primary-50: #EEF2FF;
+  --asm-color-brand-primary-500: #3A5AFE;
+  --asm-color-brand-primary-600: #3A5AFE;
+  --asm-color-brand-primary-700: #304FFE;
+
+  /* Warning Color Scale */
+  --asm-color-warning-0: #451A03;
+  --asm-color-warning-50: #78350F;
+  --asm-color-warning-100: #92400E;
+  --asm-color-warning-200: #B45309;
+  --asm-color-warning-300: #D97706;
+  --asm-color-warning-400: #F59E0B;
+  --asm-color-warning-500: #FBBF24;
+  --asm-color-warning-600: #FCD34D;
+  --asm-color-warning-700: #FDE68A;
+  --asm-color-warning-800: #FEF3C7;
+  --asm-color-warning-900: #FFFBEB;
+  --asm-color-warning-950: #FFFEF5;
+
+  /* Danger Color Scale */
+  --asm-color-danger-0: #450A0A;
+  --asm-color-danger-50: #7F1D1D;
+  --asm-color-danger-100: #991B1B;
+  --asm-color-danger-200: #B91C1C;
+  --asm-color-danger-300: #DC2626;
+  --asm-color-danger-400: #EF4444;
+  --asm-color-danger-500: #F87171;
+  --asm-color-danger-600: #FCA5A5;
+  --asm-color-danger-700: #FECACA;
+  --asm-color-danger-800: #FEE2E2;
+  --asm-color-danger-900: #FEF2F2;
+  --asm-color-danger-950: #FEF9F9;
+
+  /* Info Color Scale */
+  --asm-color-info-0: #082F49;
+  --asm-color-info-50: #0C4A6E;
+  --asm-color-info-100: #075985;
+  --asm-color-info-200: #0369A1;
+  --asm-color-info-300: #0284C7;
+  --asm-color-info-400: #0EA5E9;
+  --asm-color-info-500: #38BDF8;
+  --asm-color-info-600: #7DD3FC;
+  --asm-color-info-700: #BAE6FD;
+  --asm-color-info-800: #E0F2FE;
+  --asm-color-info-900: #F0F9FF;
+  --asm-color-info-950: #F7FCFF;
+
+  /* Success Color Scale */
+  --asm-color-success-0: #052E16;
+  --asm-color-success-50: #14532D;
+  --asm-color-success-100: #166534;
+  --asm-color-success-200: #15803D;
+  --asm-color-success-300: #16A34A;
+  --asm-color-success-400: #22C55E;
+  --asm-color-success-500: #4ADE80;
+  --asm-color-success-600: #86EFAC;
+  --asm-color-success-700: #BBF7D0;
+  --asm-color-success-800: #DCFCE7;
+  --asm-color-success-900: #F0FDF4;
+  --asm-color-success-950: #F7FEF9;
+
+  /* Purple Color Scale */
+  --asm-color-purple-0: #3B0764;
+  --asm-color-purple-50: #581C87;
+  --asm-color-purple-100: #6B21A8;
+  --asm-color-purple-200: #7E22CE;
+  --asm-color-purple-300: #9333EA;
+  --asm-color-purple-400: #A855F7;
+  --asm-color-purple-500: #C084FC;
+  --asm-color-purple-600: #D8B4FE;
+  --asm-color-purple-700: #E9D5FF;
+  --asm-color-purple-800: #F3E8FF;
+  --asm-color-purple-900: #FAF5FF;
+  --asm-color-purple-950: #FDFAFF;
+
+  /* Neutral Color Scale */
+  --asm-color-neutral-0: #030712;
+  --asm-color-neutral-50: #111827;
+  --asm-color-neutral-100: #1F2937;
+  --asm-color-neutral-200: #374151;
+  --asm-color-neutral-300: #4B5563;
+  --asm-color-neutral-400: #6B7280;
+  --asm-color-neutral-500: #9CA3AF;
+  --asm-color-neutral-600: #D1D5DB;
+  --asm-color-neutral-700: #E5E7EB;
+  --asm-color-neutral-800: #F3F4F6;
+  --asm-color-neutral-900: #F9FAFB;
+  --asm-color-neutral-950: #FCFCFD;
+
+  /* Secondary Color Scale */
+  --asm-color-secondary-0: #042F2E;
+  --asm-color-secondary-50: #134E4A;
+  --asm-color-secondary-100: #115E59;
+  --asm-color-secondary-200: #0F766E;
+  --asm-color-secondary-300: #0D9488;
+  --asm-color-secondary-400: #14B8A6;
+  --asm-color-secondary-500: #2DD4BF;
+  --asm-color-secondary-600: #5EEAD4;
+  --asm-color-secondary-700: #99F6E4;
+  --asm-color-secondary-800: #CCFBF1;
+  --asm-color-secondary-900: #F0FDFA;
+  --asm-color-secondary-950: #F7FEFD;
+
+  --asm-color-semantic-success: #22C55E;
+  --asm-color-semantic-warning: #FBBF24;
+  --asm-color-semantic-error: #F87171;
+  --asm-color-semantic-info: #38BDF8;
+
+  --asm-color-button-primary-bg: #3A5AFE;
+  --asm-color-button-primary-bg-hover: #304FFE;
+  --asm-color-button-primary-bg-active: #304FFE;
+  --asm-color-button-primary-text: #FFFFFF;
+
+  --asm-color-button-secondary-bg: #111B2E;
+  --asm-color-button-secondary-text: #E5E7EB;
+
+  --asm-color-button-ghost-bg-hover: rgba(229, 231, 235, 0.08);
+
+  --asm-color-button-destructive-bg: #F87171;
+  --asm-color-button-destructive-text: #0B1220;
+
+  --asm-color-button-disabled-bg: #1F2937;
+  --asm-color-button-disabled-text: #9CA3AF;
+
+  --asm-color-input-bg: #0B1220;
+  --asm-color-input-text: #E5E7EB;
+  --asm-color-input-border: #1F2937;
+  --asm-color-input-border-hover: #374151;
+  --asm-color-input-border-focus: #3A5AFE;
+  --asm-color-input-placeholder: #9CA3AF;
+  --asm-color-input-error-border: #F87171;
+  --asm-color-input-success-border: #22C55E;
+
+  --asm-color-focus-ring: #3A5AFE;
+
+  --asm-color-overlay-scrim: rgba(17, 24, 39, 0.64);
+}