@gardenerim/css 1.0.0

package/dist/gardener.themes.css

@@ -0,0 +1,1415 @@
+/* Gardener v1.0.0 | MIT License | gardener.css */
+@layer gardener.reset, gardener.tokens, gardener.base, gardener.components, gardener.utilities, gardener.overrides;
+
+@layer gardener.tokens {
+  :root {
+    color-scheme: light;
+
+    /* Typography */
+    --g-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --g-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+    --g-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+    --g-font-size-xs: 0.75rem;
+    --g-font-size-sm: 0.875rem;
+    --g-font-size-md: 1rem;
+    --g-font-size-lg: 1.125rem;
+    --g-font-size-xl: 1.25rem;
+    --g-font-size-2xl: 1.5rem;
+    --g-font-size-3xl: 1.875rem;
+    --g-font-size-4xl: 2.25rem;
+    --g-font-size-5xl: 3rem;
+    --g-line-height-tight: 1.2;
+    --g-line-height-normal: 1.5;
+    --g-line-height-relaxed: 1.75;
+
+    /* Spacing */
+    --g-space-0: 0;
+    --g-space-1: 0.25rem;
+    --g-space-2: 0.5rem;
+    --g-space-3: 0.75rem;
+    --g-space-4: 1rem;
+    --g-space-5: 1.25rem;
+    --g-space-6: 1.5rem;
+    --g-space-8: 2rem;
+    --g-space-10: 2.5rem;
+    --g-space-12: 3rem;
+    --g-space-16: 4rem;
+    --g-space-20: 5rem;
+    --g-space-24: 6rem;
+    --g-space-control-x: var(--g-space-4);
+    --g-space-control-y: var(--g-space-2);
+    --g-space-page-x: clamp(1rem, 3vw, 2rem);
+
+    /* Shape and depth */
+    --g-border-width: 1px;
+    --g-radius-none: 0;
+    --g-radius-xs: 0.125rem;
+    --g-radius-sm: 0.1875rem;
+    --g-radius-md: 0.25rem;
+    --g-radius-lg: 0.375rem;
+    --g-radius-xl: 0.5rem;
+    --g-radius-2xl: 0.75rem;
+    --g-radius-full: 9999px;
+    --g-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
+    --g-shadow-sm: 0 1px 3px rgb(15 23 42 / 0.1), 0 1px 2px rgb(15 23 42 / 0.06);
+    --g-shadow-md: 0 4px 12px rgb(15 23 42 / 0.12);
+    --g-shadow-lg: 0 12px 28px rgb(15 23 42 / 0.16);
+    --g-shadow-xl: 0 24px 56px rgb(15 23 42 / 0.2);
+
+    /* Motion */
+    --g-duration-fast: 120ms;
+    --g-duration-normal: 200ms;
+    --g-duration-slow: 320ms;
+    --g-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --g-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+
+    /* Layering */
+    --g-z-base: 0;
+    --g-z-sticky: 100;
+    --g-z-dropdown: 300;
+    --g-z-overlay: 500;
+    --g-z-dialog: 600;
+    --g-z-toast: 700;
+    --g-z-tooltip: 800;
+
+    /* Semantic colors */
+    --g-color-canvas: #f8fafc;
+    --g-color-surface: #ffffff;
+    --g-color-surface-raised: #ffffff;
+    --g-color-surface-subtle: #f1f5f9;
+    --g-color-surface-sunken: #e9eef5;
+    --g-color-text: #172033;
+    --g-color-text-muted: #667085;
+    --g-color-text-subtle: #657080;
+    --g-color-border: #d9e0ea;
+    --g-color-border-strong: #aeb8c7;
+    --g-color-success: #117548;
+    --g-color-success-soft: #e8f8ef;
+    --g-color-warning: #965000;
+    --g-color-warning-soft: #fff5df;
+    --g-color-danger: #cf2e3d;
+    --g-color-danger-soft: #fff0f1;
+    --g-color-info: #1769c2;
+    --g-color-info-soft: #eaf4ff;
+    --g-color-overlay: rgb(15 23 42 / 0.58);
+    --g-color-selection: var(--g-primary-200);
+
+    /* Controls and layout */
+    --g-control-height-sm: 2rem;
+    --g-control-height-md: 2.5rem;
+    --g-control-height-lg: 3rem;
+    --g-touch-target: 2.75rem;
+    --g-sidebar-width: 17rem;
+    --g-sidebar-collapsed-width: 4.5rem;
+    --g-header-height: 4rem;
+    --g-content-max: 80rem;
+    --g-reading-max: 70ch;
+    --g-focus-ring-width: 3px;
+  }
+
+  [data-g-density="compact"] {
+    --g-control-height-sm: 1.75rem;
+    --g-control-height-md: 2rem;
+    --g-control-height-lg: 2.5rem;
+    --g-space-control-x: var(--g-space-3);
+    --g-space-control-y: var(--g-space-1);
+  }
+
+  [data-g-density="comfortable"] {
+    --g-control-height-sm: 2.25rem;
+    --g-control-height-md: 2.75rem;
+    --g-control-height-lg: 3.25rem;
+  }
+
+  [data-g-mode="dark"] {
+    --g-color-canvas: #0c111b;
+    --g-color-surface: #131b29;
+    --g-color-surface-raised: #192334;
+    --g-color-surface-subtle: #1c2738;
+    --g-color-surface-sunken: #080d15;
+    --g-color-text: #eef2f7;
+    --g-color-text-muted: #aab5c5;
+    --g-color-text-subtle: #7f8da1;
+    --g-color-border: #2c394d;
+    --g-color-border-strong: #506077;
+    --g-color-success: #55d490;
+    --g-color-success-soft: #123624;
+    --g-color-warning: #f4b74e;
+    --g-color-warning-soft: #3b2b10;
+    --g-color-danger: #ff7782;
+    --g-color-danger-soft: #3d171d;
+    --g-color-info: #69adf5;
+    --g-color-info-soft: #142d49;
+    --g-color-overlay: rgb(0 0 0 / 0.72);
+    --g-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.18);
+    --g-shadow-sm: 0 2px 5px rgb(0 0 0 / 0.24);
+    --g-shadow-md: 0 6px 16px rgb(0 0 0 / 0.3);
+    --g-shadow-lg: 0 16px 36px rgb(0 0 0 / 0.38);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-g-mode]),
+    [data-g-mode="system"] {
+      --g-color-canvas: #0c111b;
+      --g-color-surface: #131b29;
+      --g-color-surface-raised: #192334;
+      --g-color-surface-subtle: #1c2738;
+      --g-color-surface-sunken: #080d15;
+      --g-color-text: #eef2f7;
+      --g-color-text-muted: #aab5c5;
+      --g-color-text-subtle: #7f8da1;
+      --g-color-border: #2c394d;
+      --g-color-border-strong: #506077;
+      --g-color-overlay: rgb(0 0 0 / 0.72);
+    }
+  }
+}
+
+@layer gardener.tokens {
+:root {
+  --g-space-0: 0;
+  --g-space-1: calc(0.25rem * var(--g-density-factor, 1));
+  --g-space-2: calc(0.5rem * var(--g-density-factor, 1));
+  --g-space-3: calc(0.75rem * var(--g-density-factor, 1));
+  --g-space-4: calc(1rem * var(--g-density-factor, 1));
+  --g-space-5: calc(1.25rem * var(--g-density-factor, 1));
+  --g-space-6: calc(1.5rem * var(--g-density-factor, 1));
+  --g-space-7: calc(1.75rem * var(--g-density-factor, 1));
+  --g-space-8: calc(2rem * var(--g-density-factor, 1));
+  --g-space-9: calc(2.25rem * var(--g-density-factor, 1));
+  --g-space-10: calc(2.5rem * var(--g-density-factor, 1));
+  --g-space-12: calc(3rem * var(--g-density-factor, 1));
+  --g-space-14: calc(3.5rem * var(--g-density-factor, 1));
+  --g-space-16: calc(4rem * var(--g-density-factor, 1));
+  --g-space-20: calc(5rem * var(--g-density-factor, 1));
+  --g-space-24: calc(6rem * var(--g-density-factor, 1));
+  --g-space-28: calc(7rem * var(--g-density-factor, 1));
+  --g-space-32: calc(8rem * var(--g-density-factor, 1));
+  --g-space-40: calc(10rem * var(--g-density-factor, 1));
+  --g-space-48: calc(12rem * var(--g-density-factor, 1));
+  --g-space-56: calc(14rem * var(--g-density-factor, 1));
+  --g-space-64: calc(16rem * var(--g-density-factor, 1));
+  --g-space-80: calc(20rem * var(--g-density-factor, 1));
+  --g-space-96: calc(24rem * var(--g-density-factor, 1));
+  --g-space-px: calc(1px * var(--g-density-factor, 1));
+  --g-space-0_5: calc(0.125rem * var(--g-density-factor, 1));
+  --g-space-1_5: calc(0.375rem * var(--g-density-factor, 1));
+  --g-space-2_5: calc(0.625rem * var(--g-density-factor, 1));
+  --g-space-3_5: calc(0.875rem * var(--g-density-factor, 1));
+}
+}
+
+@layer gardener.tokens {
+:root, [data-g-theme="garden"] {
+  --g-primary-50: hsl(154 56% 97%);
+  --g-primary-100: hsl(154 56% 93%);
+  --g-primary-200: hsl(154 68% 84%);
+  --g-primary-300: hsl(154 68% 72%);
+  --g-primary-400: hsl(154 68% 60%);
+  --g-primary-500: hsl(154 68% 50%);
+  --g-primary-600: hsl(154 68% 41%);
+  --g-primary-700: hsl(154 68% 33%);
+  --g-primary-800: hsl(154 68% 25%);
+  --g-primary-900: hsl(154 68% 18%);
+  --g-primary-950: hsl(154 68% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="slate"] {
+  --g-primary-50: hsl(215 13% 97%);
+  --g-primary-100: hsl(215 13% 93%);
+  --g-primary-200: hsl(215 25% 84%);
+  --g-primary-300: hsl(215 25% 72%);
+  --g-primary-400: hsl(215 25% 60%);
+  --g-primary-500: hsl(215 25% 50%);
+  --g-primary-600: hsl(215 25% 41%);
+  --g-primary-700: hsl(215 25% 33%);
+  --g-primary-800: hsl(215 25% 25%);
+  --g-primary-900: hsl(215 25% 18%);
+  --g-primary-950: hsl(215 25% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="graphite"] {
+  --g-primary-50: hsl(220 0% 97%);
+  --g-primary-100: hsl(220 0% 93%);
+  --g-primary-200: hsl(220 12% 84%);
+  --g-primary-300: hsl(220 12% 72%);
+  --g-primary-400: hsl(220 12% 60%);
+  --g-primary-500: hsl(220 12% 50%);
+  --g-primary-600: hsl(220 12% 41%);
+  --g-primary-700: hsl(220 12% 33%);
+  --g-primary-800: hsl(220 12% 25%);
+  --g-primary-900: hsl(220 12% 18%);
+  --g-primary-950: hsl(220 12% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="zinc"] {
+  --g-primary-50: hsl(240 0% 97%);
+  --g-primary-100: hsl(240 0% 93%);
+  --g-primary-200: hsl(240 8% 84%);
+  --g-primary-300: hsl(240 8% 72%);
+  --g-primary-400: hsl(240 8% 60%);
+  --g-primary-500: hsl(240 8% 50%);
+  --g-primary-600: hsl(240 8% 41%);
+  --g-primary-700: hsl(240 8% 33%);
+  --g-primary-800: hsl(240 8% 25%);
+  --g-primary-900: hsl(240 8% 18%);
+  --g-primary-950: hsl(240 8% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="stone"] {
+  --g-primary-50: hsl(25 0% 97%);
+  --g-primary-100: hsl(25 0% 93%);
+  --g-primary-200: hsl(25 12% 84%);
+  --g-primary-300: hsl(25 12% 72%);
+  --g-primary-400: hsl(25 12% 60%);
+  --g-primary-500: hsl(25 12% 50%);
+  --g-primary-600: hsl(25 12% 41%);
+  --g-primary-700: hsl(25 12% 33%);
+  --g-primary-800: hsl(25 12% 25%);
+  --g-primary-900: hsl(25 12% 18%);
+  --g-primary-950: hsl(25 12% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="red"] {
+  --g-primary-50: hsl(0 60% 97%);
+  --g-primary-100: hsl(0 60% 93%);
+  --g-primary-200: hsl(0 72% 84%);
+  --g-primary-300: hsl(0 72% 72%);
+  --g-primary-400: hsl(0 72% 60%);
+  --g-primary-500: hsl(0 72% 50%);
+  --g-primary-600: hsl(0 72% 41%);
+  --g-primary-700: hsl(0 72% 33%);
+  --g-primary-800: hsl(0 72% 25%);
+  --g-primary-900: hsl(0 72% 18%);
+  --g-primary-950: hsl(0 72% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="rose"] {
+  --g-primary-50: hsl(347 65% 97%);
+  --g-primary-100: hsl(347 65% 93%);
+  --g-primary-200: hsl(347 77% 84%);
+  --g-primary-300: hsl(347 77% 72%);
+  --g-primary-400: hsl(347 77% 60%);
+  --g-primary-500: hsl(347 77% 50%);
+  --g-primary-600: hsl(347 77% 41%);
+  --g-primary-700: hsl(347 77% 33%);
+  --g-primary-800: hsl(347 77% 25%);
+  --g-primary-900: hsl(347 77% 18%);
+  --g-primary-950: hsl(347 77% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="ruby"] {
+  --g-primary-50: hsl(350 70% 97%);
+  --g-primary-100: hsl(350 70% 93%);
+  --g-primary-200: hsl(350 82% 84%);
+  --g-primary-300: hsl(350 82% 72%);
+  --g-primary-400: hsl(350 82% 60%);
+  --g-primary-500: hsl(350 82% 50%);
+  --g-primary-600: hsl(350 82% 41%);
+  --g-primary-700: hsl(350 82% 33%);
+  --g-primary-800: hsl(350 82% 25%);
+  --g-primary-900: hsl(350 82% 18%);
+  --g-primary-950: hsl(350 82% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="crimson"] {
+  --g-primary-50: hsl(340 62% 97%);
+  --g-primary-100: hsl(340 62% 93%);
+  --g-primary-200: hsl(340 74% 84%);
+  --g-primary-300: hsl(340 74% 72%);
+  --g-primary-400: hsl(340 74% 60%);
+  --g-primary-500: hsl(340 74% 50%);
+  --g-primary-600: hsl(340 74% 41%);
+  --g-primary-700: hsl(340 74% 33%);
+  --g-primary-800: hsl(340 74% 25%);
+  --g-primary-900: hsl(340 74% 18%);
+  --g-primary-950: hsl(340 74% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="coral"] {
+  --g-primary-50: hsl(12 66% 97%);
+  --g-primary-100: hsl(12 66% 93%);
+  --g-primary-200: hsl(12 78% 84%);
+  --g-primary-300: hsl(12 78% 72%);
+  --g-primary-400: hsl(12 78% 60%);
+  --g-primary-500: hsl(12 78% 50%);
+  --g-primary-600: hsl(12 78% 41%);
+  --g-primary-700: hsl(12 78% 33%);
+  --g-primary-800: hsl(12 78% 25%);
+  --g-primary-900: hsl(12 78% 18%);
+  --g-primary-950: hsl(12 78% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="orange"] {
+  --g-primary-50: hsl(25 76% 97%);
+  --g-primary-100: hsl(25 76% 93%);
+  --g-primary-200: hsl(25 88% 84%);
+  --g-primary-300: hsl(25 88% 72%);
+  --g-primary-400: hsl(25 88% 60%);
+  --g-primary-500: hsl(25 88% 50%);
+  --g-primary-600: hsl(25 88% 41%);
+  --g-primary-700: hsl(25 88% 33%);
+  --g-primary-800: hsl(25 88% 25%);
+  --g-primary-900: hsl(25 88% 18%);
+  --g-primary-950: hsl(25 88% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-700);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="amber"] {
+  --g-primary-50: hsl(39 80% 97%);
+  --g-primary-100: hsl(39 80% 93%);
+  --g-primary-200: hsl(39 92% 84%);
+  --g-primary-300: hsl(39 92% 72%);
+  --g-primary-400: hsl(39 92% 60%);
+  --g-primary-500: hsl(39 92% 50%);
+  --g-primary-600: hsl(39 92% 41%);
+  --g-primary-700: hsl(39 92% 33%);
+  --g-primary-800: hsl(39 92% 25%);
+  --g-primary-900: hsl(39 92% 18%);
+  --g-primary-950: hsl(39 92% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="gold"] {
+  --g-primary-50: hsl(46 76% 97%);
+  --g-primary-100: hsl(46 76% 93%);
+  --g-primary-200: hsl(46 88% 84%);
+  --g-primary-300: hsl(46 88% 72%);
+  --g-primary-400: hsl(46 88% 60%);
+  --g-primary-500: hsl(46 88% 50%);
+  --g-primary-600: hsl(46 88% 41%);
+  --g-primary-700: hsl(46 88% 33%);
+  --g-primary-800: hsl(46 88% 25%);
+  --g-primary-900: hsl(46 88% 18%);
+  --g-primary-950: hsl(46 88% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="yellow"] {
+  --g-primary-50: hsl(53 70% 97%);
+  --g-primary-100: hsl(53 70% 93%);
+  --g-primary-200: hsl(53 82% 84%);
+  --g-primary-300: hsl(53 82% 72%);
+  --g-primary-400: hsl(53 82% 60%);
+  --g-primary-500: hsl(53 82% 50%);
+  --g-primary-600: hsl(53 82% 41%);
+  --g-primary-700: hsl(53 82% 33%);
+  --g-primary-800: hsl(53 82% 25%);
+  --g-primary-900: hsl(53 82% 18%);
+  --g-primary-950: hsl(53 82% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="lime"] {
+  --g-primary-50: hsl(83 58% 97%);
+  --g-primary-100: hsl(83 58% 93%);
+  --g-primary-200: hsl(83 70% 84%);
+  --g-primary-300: hsl(83 70% 72%);
+  --g-primary-400: hsl(83 70% 60%);
+  --g-primary-500: hsl(83 70% 50%);
+  --g-primary-600: hsl(83 70% 41%);
+  --g-primary-700: hsl(83 70% 33%);
+  --g-primary-800: hsl(83 70% 25%);
+  --g-primary-900: hsl(83 70% 18%);
+  --g-primary-950: hsl(83 70% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="olive"] {
+  --g-primary-50: hsl(70 30% 97%);
+  --g-primary-100: hsl(70 30% 93%);
+  --g-primary-200: hsl(70 42% 84%);
+  --g-primary-300: hsl(70 42% 72%);
+  --g-primary-400: hsl(70 42% 60%);
+  --g-primary-500: hsl(70 42% 50%);
+  --g-primary-600: hsl(70 42% 41%);
+  --g-primary-700: hsl(70 42% 33%);
+  --g-primary-800: hsl(70 42% 25%);
+  --g-primary-900: hsl(70 42% 18%);
+  --g-primary-950: hsl(70 42% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="green"] {
+  --g-primary-50: hsl(135 48% 97%);
+  --g-primary-100: hsl(135 48% 93%);
+  --g-primary-200: hsl(135 60% 84%);
+  --g-primary-300: hsl(135 60% 72%);
+  --g-primary-400: hsl(135 60% 60%);
+  --g-primary-500: hsl(135 60% 50%);
+  --g-primary-600: hsl(135 60% 41%);
+  --g-primary-700: hsl(135 60% 33%);
+  --g-primary-800: hsl(135 60% 25%);
+  --g-primary-900: hsl(135 60% 18%);
+  --g-primary-950: hsl(135 60% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="forest"] {
+  --g-primary-50: hsl(145 43% 97%);
+  --g-primary-100: hsl(145 43% 93%);
+  --g-primary-200: hsl(145 55% 84%);
+  --g-primary-300: hsl(145 55% 72%);
+  --g-primary-400: hsl(145 55% 60%);
+  --g-primary-500: hsl(145 55% 50%);
+  --g-primary-600: hsl(145 55% 41%);
+  --g-primary-700: hsl(145 55% 33%);
+  --g-primary-800: hsl(145 55% 25%);
+  --g-primary-900: hsl(145 55% 18%);
+  --g-primary-950: hsl(145 55% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="emerald"] {
+  --g-primary-50: hsl(160 60% 97%);
+  --g-primary-100: hsl(160 60% 93%);
+  --g-primary-200: hsl(160 72% 84%);
+  --g-primary-300: hsl(160 72% 72%);
+  --g-primary-400: hsl(160 72% 60%);
+  --g-primary-500: hsl(160 72% 50%);
+  --g-primary-600: hsl(160 72% 41%);
+  --g-primary-700: hsl(160 72% 33%);
+  --g-primary-800: hsl(160 72% 25%);
+  --g-primary-900: hsl(160 72% 18%);
+  --g-primary-950: hsl(160 72% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="mint"] {
+  --g-primary-50: hsl(165 46% 97%);
+  --g-primary-100: hsl(165 46% 93%);
+  --g-primary-200: hsl(165 58% 84%);
+  --g-primary-300: hsl(165 58% 72%);
+  --g-primary-400: hsl(165 58% 60%);
+  --g-primary-500: hsl(165 58% 50%);
+  --g-primary-600: hsl(165 58% 41%);
+  --g-primary-700: hsl(165 58% 33%);
+  --g-primary-800: hsl(165 58% 25%);
+  --g-primary-900: hsl(165 58% 18%);
+  --g-primary-950: hsl(165 58% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="teal"] {
+  --g-primary-50: hsl(174 56% 97%);
+  --g-primary-100: hsl(174 56% 93%);
+  --g-primary-200: hsl(174 68% 84%);
+  --g-primary-300: hsl(174 68% 72%);
+  --g-primary-400: hsl(174 68% 60%);
+  --g-primary-500: hsl(174 68% 50%);
+  --g-primary-600: hsl(174 68% 41%);
+  --g-primary-700: hsl(174 68% 33%);
+  --g-primary-800: hsl(174 68% 25%);
+  --g-primary-900: hsl(174 68% 18%);
+  --g-primary-950: hsl(174 68% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="aqua"] {
+  --g-primary-50: hsl(183 60% 97%);
+  --g-primary-100: hsl(183 60% 93%);
+  --g-primary-200: hsl(183 72% 84%);
+  --g-primary-300: hsl(183 72% 72%);
+  --g-primary-400: hsl(183 72% 60%);
+  --g-primary-500: hsl(183 72% 50%);
+  --g-primary-600: hsl(183 72% 41%);
+  --g-primary-700: hsl(183 72% 33%);
+  --g-primary-800: hsl(183 72% 25%);
+  --g-primary-900: hsl(183 72% 18%);
+  --g-primary-950: hsl(183 72% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="cyan"] {
+  --g-primary-50: hsl(190 70% 97%);
+  --g-primary-100: hsl(190 70% 93%);
+  --g-primary-200: hsl(190 82% 84%);
+  --g-primary-300: hsl(190 82% 72%);
+  --g-primary-400: hsl(190 82% 60%);
+  --g-primary-500: hsl(190 82% 50%);
+  --g-primary-600: hsl(190 82% 41%);
+  --g-primary-700: hsl(190 82% 33%);
+  --g-primary-800: hsl(190 82% 25%);
+  --g-primary-900: hsl(190 82% 18%);
+  --g-primary-950: hsl(190 82% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-800);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="sky"] {
+  --g-primary-50: hsl(199 74% 97%);
+  --g-primary-100: hsl(199 74% 93%);
+  --g-primary-200: hsl(199 86% 84%);
+  --g-primary-300: hsl(199 86% 72%);
+  --g-primary-400: hsl(199 86% 60%);
+  --g-primary-500: hsl(199 86% 50%);
+  --g-primary-600: hsl(199 86% 41%);
+  --g-primary-700: hsl(199 86% 33%);
+  --g-primary-800: hsl(199 86% 25%);
+  --g-primary-900: hsl(199 86% 18%);
+  --g-primary-950: hsl(199 86% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-700);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="blue"] {
+  --g-primary-50: hsl(217 70% 97%);
+  --g-primary-100: hsl(217 70% 93%);
+  --g-primary-200: hsl(217 82% 84%);
+  --g-primary-300: hsl(217 82% 72%);
+  --g-primary-400: hsl(217 82% 60%);
+  --g-primary-500: hsl(217 82% 50%);
+  --g-primary-600: hsl(217 82% 41%);
+  --g-primary-700: hsl(217 82% 33%);
+  --g-primary-800: hsl(217 82% 25%);
+  --g-primary-900: hsl(217 82% 18%);
+  --g-primary-950: hsl(217 82% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="cobalt"] {
+  --g-primary-50: hsl(224 63% 97%);
+  --g-primary-100: hsl(224 63% 93%);
+  --g-primary-200: hsl(224 75% 84%);
+  --g-primary-300: hsl(224 75% 72%);
+  --g-primary-400: hsl(224 75% 60%);
+  --g-primary-500: hsl(224 75% 50%);
+  --g-primary-600: hsl(224 75% 41%);
+  --g-primary-700: hsl(224 75% 33%);
+  --g-primary-800: hsl(224 75% 25%);
+  --g-primary-900: hsl(224 75% 18%);
+  --g-primary-950: hsl(224 75% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="navy"] {
+  --g-primary-50: hsl(222 50% 97%);
+  --g-primary-100: hsl(222 50% 93%);
+  --g-primary-200: hsl(222 62% 84%);
+  --g-primary-300: hsl(222 62% 72%);
+  --g-primary-400: hsl(222 62% 60%);
+  --g-primary-500: hsl(222 62% 50%);
+  --g-primary-600: hsl(222 62% 41%);
+  --g-primary-700: hsl(222 62% 33%);
+  --g-primary-800: hsl(222 62% 25%);
+  --g-primary-900: hsl(222 62% 18%);
+  --g-primary-950: hsl(222 62% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="ocean"] {
+  --g-primary-50: hsl(204 64% 97%);
+  --g-primary-100: hsl(204 64% 93%);
+  --g-primary-200: hsl(204 76% 84%);
+  --g-primary-300: hsl(204 76% 72%);
+  --g-primary-400: hsl(204 76% 60%);
+  --g-primary-500: hsl(204 76% 50%);
+  --g-primary-600: hsl(204 76% 41%);
+  --g-primary-700: hsl(204 76% 33%);
+  --g-primary-800: hsl(204 76% 25%);
+  --g-primary-900: hsl(204 76% 18%);
+  --g-primary-950: hsl(204 76% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-700);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="indigo"] {
+  --g-primary-50: hsl(239 58% 97%);
+  --g-primary-100: hsl(239 58% 93%);
+  --g-primary-200: hsl(239 70% 84%);
+  --g-primary-300: hsl(239 70% 72%);
+  --g-primary-400: hsl(239 70% 60%);
+  --g-primary-500: hsl(239 70% 50%);
+  --g-primary-600: hsl(239 70% 41%);
+  --g-primary-700: hsl(239 70% 33%);
+  --g-primary-800: hsl(239 70% 25%);
+  --g-primary-900: hsl(239 70% 18%);
+  --g-primary-950: hsl(239 70% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #ffffff;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="violet"] {
+  --g-primary-50: hsl(258 62% 97%);
+  --g-primary-100: hsl(258 62% 93%);
+  --g-primary-200: hsl(258 74% 84%);
+  --g-primary-300: hsl(258 74% 72%);
+  --g-primary-400: hsl(258 74% 60%);
+  --g-primary-500: hsl(258 74% 50%);
+  --g-primary-600: hsl(258 74% 41%);
+  --g-primary-700: hsl(258 74% 33%);
+  --g-primary-800: hsl(258 74% 25%);
+  --g-primary-900: hsl(258 74% 18%);
+  --g-primary-950: hsl(258 74% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #ffffff;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="purple"] {
+  --g-primary-50: hsl(272 53% 97%);
+  --g-primary-100: hsl(272 53% 93%);
+  --g-primary-200: hsl(272 65% 84%);
+  --g-primary-300: hsl(272 65% 72%);
+  --g-primary-400: hsl(272 65% 60%);
+  --g-primary-500: hsl(272 65% 50%);
+  --g-primary-600: hsl(272 65% 41%);
+  --g-primary-700: hsl(272 65% 33%);
+  --g-primary-800: hsl(272 65% 25%);
+  --g-primary-900: hsl(272 65% 18%);
+  --g-primary-950: hsl(272 65% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="lavender"] {
+  --g-primary-50: hsl(265 44% 97%);
+  --g-primary-100: hsl(265 44% 93%);
+  --g-primary-200: hsl(265 56% 84%);
+  --g-primary-300: hsl(265 56% 72%);
+  --g-primary-400: hsl(265 56% 60%);
+  --g-primary-500: hsl(265 56% 50%);
+  --g-primary-600: hsl(265 56% 41%);
+  --g-primary-700: hsl(265 56% 33%);
+  --g-primary-800: hsl(265 56% 25%);
+  --g-primary-900: hsl(265 56% 18%);
+  --g-primary-950: hsl(265 56% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="plum"] {
+  --g-primary-50: hsl(292 36% 97%);
+  --g-primary-100: hsl(292 36% 93%);
+  --g-primary-200: hsl(292 48% 84%);
+  --g-primary-300: hsl(292 48% 72%);
+  --g-primary-400: hsl(292 48% 60%);
+  --g-primary-500: hsl(292 48% 50%);
+  --g-primary-600: hsl(292 48% 41%);
+  --g-primary-700: hsl(292 48% 33%);
+  --g-primary-800: hsl(292 48% 25%);
+  --g-primary-900: hsl(292 48% 18%);
+  --g-primary-950: hsl(292 48% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="fuchsia"] {
+  --g-primary-50: hsl(305 58% 97%);
+  --g-primary-100: hsl(305 58% 93%);
+  --g-primary-200: hsl(305 70% 84%);
+  --g-primary-300: hsl(305 70% 72%);
+  --g-primary-400: hsl(305 70% 60%);
+  --g-primary-500: hsl(305 70% 50%);
+  --g-primary-600: hsl(305 70% 41%);
+  --g-primary-700: hsl(305 70% 33%);
+  --g-primary-800: hsl(305 70% 25%);
+  --g-primary-900: hsl(305 70% 18%);
+  --g-primary-950: hsl(305 70% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="magenta"] {
+  --g-primary-50: hsl(320 64% 97%);
+  --g-primary-100: hsl(320 64% 93%);
+  --g-primary-200: hsl(320 76% 84%);
+  --g-primary-300: hsl(320 76% 72%);
+  --g-primary-400: hsl(320 76% 60%);
+  --g-primary-500: hsl(320 76% 50%);
+  --g-primary-600: hsl(320 76% 41%);
+  --g-primary-700: hsl(320 76% 33%);
+  --g-primary-800: hsl(320 76% 25%);
+  --g-primary-900: hsl(320 76% 18%);
+  --g-primary-950: hsl(320 76% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="pink"] {
+  --g-primary-50: hsl(330 64% 97%);
+  --g-primary-100: hsl(330 64% 93%);
+  --g-primary-200: hsl(330 76% 84%);
+  --g-primary-300: hsl(330 76% 72%);
+  --g-primary-400: hsl(330 76% 60%);
+  --g-primary-500: hsl(330 76% 50%);
+  --g-primary-600: hsl(330 76% 41%);
+  --g-primary-700: hsl(330 76% 33%);
+  --g-primary-800: hsl(330 76% 25%);
+  --g-primary-900: hsl(330 76% 18%);
+  --g-primary-950: hsl(330 76% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="brown"] {
+  --g-primary-50: hsl(24 33% 97%);
+  --g-primary-100: hsl(24 33% 93%);
+  --g-primary-200: hsl(24 45% 84%);
+  --g-primary-300: hsl(24 45% 72%);
+  --g-primary-400: hsl(24 45% 60%);
+  --g-primary-500: hsl(24 45% 50%);
+  --g-primary-600: hsl(24 45% 41%);
+  --g-primary-700: hsl(24 45% 33%);
+  --g-primary-800: hsl(24 45% 25%);
+  --g-primary-900: hsl(24 45% 18%);
+  --g-primary-950: hsl(24 45% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-700);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="coffee"] {
+  --g-primary-50: hsl(28 26% 97%);
+  --g-primary-100: hsl(28 26% 93%);
+  --g-primary-200: hsl(28 38% 84%);
+  --g-primary-300: hsl(28 38% 72%);
+  --g-primary-400: hsl(28 38% 60%);
+  --g-primary-500: hsl(28 38% 50%);
+  --g-primary-600: hsl(28 38% 41%);
+  --g-primary-700: hsl(28 38% 33%);
+  --g-primary-800: hsl(28 38% 25%);
+  --g-primary-900: hsl(28 38% 18%);
+  --g-primary-950: hsl(28 38% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-700);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="sand"] {
+  --g-primary-50: hsl(38 28% 97%);
+  --g-primary-100: hsl(38 28% 93%);
+  --g-primary-200: hsl(38 40% 84%);
+  --g-primary-300: hsl(38 40% 72%);
+  --g-primary-400: hsl(38 40% 60%);
+  --g-primary-500: hsl(38 40% 50%);
+  --g-primary-600: hsl(38 40% 41%);
+  --g-primary-700: hsl(38 40% 33%);
+  --g-primary-800: hsl(38 40% 25%);
+  --g-primary-900: hsl(38 40% 18%);
+  --g-primary-950: hsl(38 40% 11%);
+  --g-on-primary-light: #000000;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-700);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="sunset"] {
+  --g-primary-50: hsl(18 72% 97%);
+  --g-primary-100: hsl(18 72% 93%);
+  --g-primary-200: hsl(18 84% 84%);
+  --g-primary-300: hsl(18 84% 72%);
+  --g-primary-400: hsl(18 84% 60%);
+  --g-primary-500: hsl(18 84% 50%);
+  --g-primary-600: hsl(18 84% 41%);
+  --g-primary-700: hsl(18 84% 33%);
+  --g-primary-800: hsl(18 84% 25%);
+  --g-primary-900: hsl(18 84% 18%);
+  --g-primary-950: hsl(18 84% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-700);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="midnight"] {
+  --g-primary-50: hsl(246 26% 97%);
+  --g-primary-100: hsl(246 26% 93%);
+  --g-primary-200: hsl(246 38% 84%);
+  --g-primary-300: hsl(246 38% 72%);
+  --g-primary-400: hsl(246 38% 60%);
+  --g-primary-500: hsl(246 38% 50%);
+  --g-primary-600: hsl(246 38% 41%);
+  --g-primary-700: hsl(246 38% 33%);
+  --g-primary-800: hsl(246 38% 25%);
+  --g-primary-900: hsl(246 38% 18%);
+  --g-primary-950: hsl(246 38% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-300);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-theme="monochrome"] {
+  --g-primary-50: hsl(0 0% 97%);
+  --g-primary-100: hsl(0 0% 93%);
+  --g-primary-200: hsl(0 0% 84%);
+  --g-primary-300: hsl(0 0% 72%);
+  --g-primary-400: hsl(0 0% 60%);
+  --g-primary-500: hsl(0 0% 50%);
+  --g-primary-600: hsl(0 0% 41%);
+  --g-primary-700: hsl(0 0% 33%);
+  --g-primary-800: hsl(0 0% 25%);
+  --g-primary-900: hsl(0 0% 18%);
+  --g-primary-950: hsl(0 0% 11%);
+  --g-on-primary-light: #ffffff;
+  --g-on-primary-dark: #000000;
+  --g-primary-text-light: var(--g-primary-600);
+  --g-primary-text-dark: var(--g-primary-400);
+  --g-color-primary: var(--g-primary-600);
+  --g-color-primary-text: var(--g-primary-text-light);
+  --g-color-primary-hover: var(--g-primary-700);
+  --g-color-primary-active: var(--g-primary-800);
+  --g-color-primary-soft: var(--g-primary-100);
+  --g-color-on-primary: var(--g-on-primary-light);
+  --g-color-on-primary-soft: var(--g-primary-900);
+  --g-focus-ring: color-mix(in srgb, var(--g-primary-500) 32%, transparent);
+}
+
+[data-g-mode="dark"] {
+  color-scheme: dark;
+  --g-color-primary: var(--g-primary-400);
+  --g-color-primary-text: var(--g-primary-text-dark);
+  --g-color-primary-hover: var(--g-primary-300);
+  --g-color-primary-active: var(--g-primary-200);
+  --g-color-primary-soft: color-mix(in srgb, var(--g-primary-500) 18%, transparent);
+  --g-color-on-primary: var(--g-on-primary-dark);
+  --g-color-on-primary-soft: var(--g-primary-200);
+}
+
+[data-g-mode="light"] { color-scheme: light; }
+
+[data-g-mode="high-contrast"] {
+  color-scheme: light;
+  --g-border-width: 2px;
+  --g-color-canvas: #fff;
+  --g-color-surface: #fff;
+  --g-color-surface-raised: #fff;
+  --g-color-surface-subtle: #f2f2f2;
+  --g-color-text: #000;
+  --g-color-text-muted: #222;
+  --g-color-border: #000;
+  --g-color-border-strong: #000;
+  --g-color-primary: #0037a6;
+  --g-color-primary-text: #0037a6;
+  --g-color-primary-hover: #001f66;
+  --g-color-on-primary: #fff;
+  --g-focus-ring-width: 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-g-mode]), [data-g-mode="system"] {
+    color-scheme: dark;
+    --g-color-primary: var(--g-primary-400);
+    --g-color-primary-text: var(--g-primary-text-dark);
+    --g-color-primary-hover: var(--g-primary-300);
+    --g-color-primary-active: var(--g-primary-200);
+    --g-color-primary-soft: color-mix(in srgb, var(--g-primary-500) 18%, transparent);
+    --g-color-on-primary: var(--g-on-primary-dark);
+    --g-color-on-primary-soft: var(--g-primary-200);
+  }
+}
+}
+
+@layer gardener.tokens {
+  :where(:root:not([data-g-neutral])),
+  [data-g-neutral="cool"] {
+    --g-color-canvas: #f8fafc;
+    --g-color-surface: #ffffff;
+    --g-color-surface-raised: #ffffff;
+    --g-color-surface-subtle: #f1f5f9;
+    --g-color-surface-sunken: #e9eef5;
+    --g-color-text: #172033;
+    --g-color-text-muted: #667085;
+    --g-color-text-subtle: #657080;
+    --g-color-border: #d9e0ea;
+    --g-color-border-strong: #aeb8c7;
+  }
+
+  [data-g-neutral="warm"] { --g-color-canvas: #faf9f7; --g-color-surface: #fffefd; --g-color-surface-raised: #fff; --g-color-surface-subtle: #f4f1ec; --g-color-surface-sunken: #ebe6de; --g-color-text: #29251f; --g-color-text-muted: #6f675d; --g-color-text-subtle: #756b5f; --g-color-border: #ded8cf; --g-color-border-strong: #b7aea1; }
+  [data-g-neutral="gray"] { --g-color-canvas: #f7f7f7; --g-color-surface: #fff; --g-color-surface-raised: #fff; --g-color-surface-subtle: #eeeeee; --g-color-surface-sunken: #e4e4e4; --g-color-text: #202020; --g-color-text-muted: #666; --g-color-text-subtle: #6b6b6b; --g-color-border: #d5d5d5; --g-color-border-strong: #aaa; }
+  [data-g-neutral="ink"] { --g-color-canvas: #f5f7fb; --g-color-surface: #fff; --g-color-surface-raised: #fff; --g-color-surface-subtle: #edf0f6; --g-color-surface-sunken: #e2e7f0; --g-color-text: #101828; --g-color-text-muted: #475467; --g-color-text-subtle: #647083; --g-color-border: #d0d5dd; --g-color-border-strong: #98a2b3; }
+  [data-g-neutral="cream"] { --g-color-canvas: #fbf7ee; --g-color-surface: #fffdf8; --g-color-surface-raised: #fff; --g-color-surface-subtle: #f5eedf; --g-color-surface-sunken: #ebe0cc; --g-color-text: #30291d; --g-color-text-muted: #756954; --g-color-text-subtle: #756954; --g-color-border: #dfd3bd; --g-color-border-strong: #b9a889; }
+  [data-g-neutral="blueprint"] { --g-color-canvas: #f4f7fb; --g-color-surface: #fff; --g-color-surface-raised: #fff; --g-color-surface-subtle: #eaf0f8; --g-color-surface-sunken: #dae4f1; --g-color-text: #14243a; --g-color-text-muted: #536781; --g-color-text-subtle: #5f7187; --g-color-border: #cad6e5; --g-color-border-strong: #94a8c0; }
+  [data-g-neutral="paper"] { --g-color-canvas: #f5f3ef; --g-color-surface: #fff; --g-color-surface-raised: #fff; --g-color-surface-subtle: #efede8; --g-color-surface-sunken: #e2dfd8; --g-color-text: #252525; --g-color-text-muted: #606060; --g-color-text-subtle: #6c6c6c; --g-color-border: #d4d1ca; --g-color-border-strong: #aaa69e; }
+
+  [data-g-mode="dark"] { --g-color-canvas: #0c111b; --g-color-surface: #131b29; --g-color-surface-raised: #192334; --g-color-surface-subtle: #1c2738; --g-color-surface-sunken: #080d15; --g-color-text: #eef2f7; --g-color-text-muted: #aab5c5; --g-color-text-subtle: #7f8da1; --g-color-border: #2c394d; --g-color-border-strong: #506077; }
+
+  [data-g-mode="dark"][data-g-neutral="warm"] { --g-color-canvas: #15120f; --g-color-surface: #1e1a16; --g-color-surface-raised: #26211c; --g-color-surface-subtle: #2c261f; --g-color-surface-sunken: #0e0c0a; --g-color-text: #f5efe6; --g-color-text-muted: #beb1a2; --g-color-text-subtle: #8e8174; --g-color-border: #443a30; --g-color-border-strong: #6e5f50; }
+  [data-g-mode="dark"][data-g-neutral="gray"] { --g-color-canvas: #101010; --g-color-surface: #181818; --g-color-surface-raised: #202020; --g-color-surface-subtle: #272727; --g-color-surface-sunken: #090909; --g-color-text: #f3f3f3; --g-color-text-muted: #b5b5b5; --g-color-text-subtle: #828282; --g-color-border: #373737; --g-color-border-strong: #606060; }
+  [data-g-mode="dark"][data-g-neutral="ink"] { --g-color-canvas: #080d16; --g-color-surface: #101827; --g-color-surface-raised: #172235; --g-color-surface-subtle: #1c293d; --g-color-surface-sunken: #050810; --g-color-text: #f4f6fa; --g-color-text-muted: #b3becf; --g-color-text-subtle: #7d8ba1; --g-color-border: #2a3950; --g-color-border-strong: #52627a; }
+  [data-g-mode="dark"][data-g-neutral="blueprint"] { --g-color-canvas: #0b1420; --g-color-surface: #111e2e; --g-color-surface-raised: #18283b; --g-color-surface-subtle: #1c2d42; --g-color-surface-sunken: #07101a; --g-color-text: #edf4fc; --g-color-text-muted: #a9bbcf; --g-color-text-subtle: #758aa2; --g-color-border: #2b4058; --g-color-border-strong: #536d88; }
+  [data-g-mode="dark"][data-g-neutral="cream"], [data-g-mode="dark"][data-g-neutral="paper"] { --g-color-canvas: #15130f; --g-color-surface: #1d1a15; --g-color-surface-raised: #25211a; --g-color-surface-subtle: #2b261e; --g-color-surface-sunken: #0d0b09; --g-color-text: #f2eee5; --g-color-text-muted: #b9b1a2; --g-color-text-subtle: #888174; --g-color-border: #413a30; --g-color-border-strong: #6b6255; }
+
+  @media (prefers-color-scheme: dark) {
+    :is(:root:not([data-g-mode]), [data-g-mode="system"]) { --g-color-canvas: #0c111b; --g-color-surface: #131b29; --g-color-surface-raised: #192334; --g-color-surface-subtle: #1c2738; --g-color-surface-sunken: #080d15; --g-color-text: #eef2f7; --g-color-text-muted: #aab5c5; --g-color-text-subtle: #7f8da1; --g-color-border: #2c394d; --g-color-border-strong: #506077; }
+  }
+
+  :where(:root:not([data-g-typography]):not([data-g-type])),
+  :is([data-g-typography="system"], [data-g-type="system"]) { --g-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --g-heading-weight: 650; --g-letter-spacing-heading: -0.015em; }
+  :is([data-g-typography="corporate"], [data-g-type="corporate"]) { --g-font-sans: Arial, "Helvetica Neue", sans-serif; --g-heading-weight: 700; --g-letter-spacing-heading: -0.01em; }
+  :is([data-g-typography="humanist"], [data-g-type="humanist"]) { --g-font-sans: "Segoe UI", Candara, Calibri, sans-serif; --g-heading-weight: 600; --g-letter-spacing-heading: 0; }
+  :is([data-g-typography="editorial"], [data-g-type="editorial"]) { --g-font-sans: Georgia, Cambria, "Times New Roman", serif; --g-heading-weight: 600; --g-letter-spacing-heading: -0.01em; }
+  :is([data-g-typography="technical"], [data-g-type="technical"]) { --g-font-sans: "IBM Plex Sans", "Segoe UI", sans-serif; --g-font-mono: "IBM Plex Mono", Consolas, monospace; --g-heading-weight: 600; }
+  :is([data-g-typography="geometric"], [data-g-type="geometric"]) { --g-font-sans: Avenir, Montserrat, Futura, ui-sans-serif, sans-serif; --g-heading-weight: 700; --g-letter-spacing-heading: -0.02em; }
+  :is([data-g-typography="rounded"], [data-g-type="rounded"]) { --g-font-sans: "Nunito Sans", "Arial Rounded MT Bold", ui-sans-serif, sans-serif; --g-heading-weight: 700; }
+  :is([data-g-typography="classic"], [data-g-type="classic"]) { --g-font-sans: Garamond, Georgia, serif; --g-heading-weight: 600; }
+  :is([data-g-typography="compact"], [data-g-type="compact"]) { --g-font-sans: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; --g-heading-weight: 700; }
+  :is([data-g-typography="cjk"], [data-g-type="cjk"]) { --g-font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; --g-heading-weight: 600; --g-letter-spacing-heading: 0; }
+
+  :root,
+  [data-g-shape="small"] { --g-radius-xs: 0.125rem; --g-radius-sm: 0.1875rem; --g-radius-md: 0.25rem; --g-radius-lg: 0.375rem; --g-radius-xl: 0.5rem; --g-radius-2xl: 0.75rem; }
+  [data-g-shape="sharp"] { --g-radius-xs: 0; --g-radius-sm: 0; --g-radius-md: 0; --g-radius-lg: 0; --g-radius-xl: 0; --g-radius-2xl: 0; }
+  [data-g-shape="medium"] { --g-radius-xs: 0.1875rem; --g-radius-sm: 0.25rem; --g-radius-md: 0.375rem; --g-radius-lg: 0.5rem; --g-radius-xl: 0.75rem; --g-radius-2xl: 1rem; }
+  [data-g-shape="soft"] { --g-radius-xs: 0.25rem; --g-radius-sm: 0.375rem; --g-radius-md: 0.5rem; --g-radius-lg: 0.75rem; --g-radius-xl: 1rem; --g-radius-2xl: 1.5rem; }
+  [data-g-shape="round"] { --g-radius-xs: 0.375rem; --g-radius-sm: 0.5rem; --g-radius-md: 0.75rem; --g-radius-lg: 1rem; --g-radius-xl: 1.5rem; --g-radius-2xl: 2rem; }
+
+  :root,
+  [data-g-density="standard"] { --g-density-factor: 1; }
+  [data-g-density="compact"] { --g-density-factor: 0.875; }
+  [data-g-density="comfortable"] { --g-density-factor: 1.075; }
+  [data-g-density="touch"] { --g-density-factor: 1.15; --g-control-height-sm: 2.5rem; --g-control-height-md: 2.875rem; --g-control-height-lg: 3.25rem; --g-touch-target: 3rem; }
+
+  :root,
+  [data-g-elevation="bordered"] { --g-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04); --g-shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08); --g-shadow-md: 0 4px 12px rgb(15 23 42 / 0.1); --g-surface-border-width: 1px; }
+  [data-g-elevation="flat"] { --g-shadow-xs: none; --g-shadow-sm: none; --g-shadow-md: none; --g-shadow-lg: none; --g-shadow-xl: none; --g-surface-border-width: 1px; }
+  [data-g-elevation="layered"] { --g-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06); --g-shadow-sm: 0 2px 6px rgb(15 23 42 / 0.1); --g-shadow-md: 0 8px 20px rgb(15 23 42 / 0.13); --g-shadow-lg: 0 18px 40px rgb(15 23 42 / 0.16); }
+  [data-g-elevation="floating"] { --g-shadow-xs: 0 2px 5px rgb(15 23 42 / 0.08); --g-shadow-sm: 0 6px 16px rgb(15 23 42 / 0.12); --g-shadow-md: 0 14px 34px rgb(15 23 42 / 0.16); --g-shadow-lg: 0 28px 64px rgb(15 23 42 / 0.2); }
+
+  [data-g-motion="none"] { --g-duration-fast: 0ms; --g-duration-normal: 0ms; --g-duration-slow: 0ms; }
+  [data-g-motion="calm"] { --g-duration-fast: 150ms; --g-duration-normal: 240ms; --g-duration-slow: 400ms; }
+  [data-g-motion="quick"] { --g-duration-fast: 80ms; --g-duration-normal: 140ms; --g-duration-slow: 220ms; }
+
+  [data-g-platform="desktop"] { --g-header-height: 2.75rem; --g-touch-target: 2rem; --g-control-height-sm: 1.75rem; --g-control-height-md: 2.125rem; --g-control-height-lg: 2.5rem; --g-desktop-titlebar-height: 2rem; --g-desktop-statusbar-height: 1.5rem; }
+  :is([data-g-platform="tauri"], [data-g-platform="electron"]) { --g-header-height: 2.75rem; --g-touch-target: 2rem; --g-control-height-sm: 1.75rem; --g-control-height-md: 2.125rem; --g-control-height-lg: 2.5rem; --g-desktop-titlebar-height: 2rem; --g-desktop-statusbar-height: 1.5rem; }
+  [data-g-platform="mobile"] { --g-touch-target: 2.75rem; --g-control-height-sm: 2.25rem; --g-control-height-md: 2.75rem; --g-control-height-lg: 3.25rem; }
+
+  /* Mode wins over every optional axis. */
+  [data-g-mode="high-contrast"] { --g-color-canvas: #fff; --g-color-surface: #fff; --g-color-surface-raised: #fff; --g-color-surface-subtle: #f2f2f2; --g-color-surface-sunken: #e6e6e6; --g-color-text: #000; --g-color-text-muted: #222; --g-color-text-subtle: #333; --g-color-border: #000; --g-color-border-strong: #000; --g-shadow-xs: none; --g-shadow-sm: none; --g-shadow-md: none; --g-shadow-lg: none; --g-shadow-xl: none; }
+}