@okja/chi-themes 0.1.0

package/dist/default.css

@@ -0,0 +1,859 @@
+
+@layer reset, tokens, base;
+/**
+ * Default Theme - Grayscale
+ * Neutral grayscale for wireframing and prototyping
+ */
+/* Declare layer order */
+/* Reset layer */
+@layer reset{
+
+/**
+ * CSS Reset
+ * Modern CSS reset for Chi Design System
+ */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+}
+/* Tokens layer */
+/**
+ * Chi Design System - Token Base
+ * Aggregates all token categories within @layer tokens
+ */
+/**
+ * Chi Design System - Scaling Tokens
+ * Global scaling factor for responsive sizing (90%-110%)
+ */
+@layer tokens {
+  :root {
+    --scaling: 1;
+  }
+
+  [data-scaling='90'] {
+    --scaling: 0.9;
+  }
+
+  [data-scaling='95'] {
+    --scaling: 0.95;
+  }
+
+  [data-scaling='100'] {
+    --scaling: 1;
+  }
+
+  [data-scaling='105'] {
+    --scaling: 1.05;
+  }
+
+  [data-scaling='110'] {
+    --scaling: 1.1;
+  }
+}
+/**
+ * Chi Design System - Spacing Tokens
+ * Spacing scale using 4px base unit with scaling support
+ */
+@layer tokens {
+  :root {
+    --space-1: calc(4px * var(--scaling, 1));
+    --space-2: calc(8px * var(--scaling, 1));
+    --space-3: calc(12px * var(--scaling, 1));
+    --space-4: calc(16px * var(--scaling, 1));
+    --space-5: calc(24px * var(--scaling, 1));
+    --space-6: calc(32px * var(--scaling, 1));
+    --space-7: calc(40px * var(--scaling, 1));
+    --space-8: calc(48px * var(--scaling, 1));
+    --space-9: calc(64px * var(--scaling, 1));
+  }
+}
+/**
+ * Chi Design System - Typography Tokens
+ * Typography scale with scaling support
+ */
+@layer tokens {
+  :root {
+    /* Font families */
+    --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
+    --font-serif: georgia, 'Times New Roman', serif;
+    --font-mono: 'SF Mono', monaco, 'Courier New', monospace;
+
+    /* Font sizes */
+    --font-size-1: calc(12px * var(--scaling, 1));
+    --font-size-2: calc(14px * var(--scaling, 1));
+    --font-size-3: calc(16px * var(--scaling, 1));
+    --font-size-4: calc(18px * var(--scaling, 1));
+    --font-size-5: calc(20px * var(--scaling, 1));
+    --font-size-6: calc(24px * var(--scaling, 1));
+    --font-size-7: calc(28px * var(--scaling, 1));
+    --font-size-8: calc(35px * var(--scaling, 1));
+    --font-size-9: calc(60px * var(--scaling, 1));
+
+    /* Font weights */
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+
+    /* Line heights */
+    --line-height-1: calc(16px * var(--scaling, 1));
+    --line-height-2: calc(20px * var(--scaling, 1));
+    --line-height-3: calc(24px * var(--scaling, 1));
+    --line-height-4: calc(26px * var(--scaling, 1));
+    --line-height-5: calc(28px * var(--scaling, 1));
+    --line-height-6: calc(30px * var(--scaling, 1));
+    --line-height-7: calc(36px * var(--scaling, 1));
+    --line-height-8: calc(40px * var(--scaling, 1));
+    --line-height-9: calc(60px * var(--scaling, 1));
+
+    /* Letter spacing */
+    --letter-spacing-1: 0.0025em;
+    --letter-spacing-2: 0em;
+    --letter-spacing-3: -0.0025em;
+  }
+}
+/**
+ * Chi Design System - Radius Tokens
+ * Border radius tokens with scaling support
+ */
+@layer tokens {
+  :root {
+    /* Radius factor for variants */
+    --radius-factor: 1;
+
+    /* Border radius scale */
+    --radius-none: 0;
+    --radius-xs: calc(4px * var(--scaling, 1) * var(--radius-factor, 1));
+    --radius-sm: calc(8px * var(--scaling, 1) * var(--radius-factor, 1));
+    --radius-md: calc(12px * var(--scaling, 1) * var(--radius-factor, 1));
+    --radius-lg: calc(16px * var(--scaling, 1) * var(--radius-factor, 1));
+    --radius-xl: calc(28px * var(--scaling, 1) * var(--radius-factor, 1));
+    --radius-full: 9999px;
+  }
+
+  [data-radius='none'] {
+    --radius-factor: 0;
+  }
+
+  [data-radius='small'] {
+    --radius-factor: 0.75;
+  }
+
+  [data-radius='medium'] {
+    --radius-factor: 1;
+  }
+
+  [data-radius='large'] {
+    --radius-factor: 1.5;
+  }
+}
+/**
+ * Chi Design System - Shadow Tokens
+ * Elevation shadows with automatic light/dark mode
+ */
+@layer tokens {
+  :root {
+    --csstools-color-scheme--light: initial;
+    color-scheme: light dark;
+
+    --shadow-0: none;
+    --shadow-1: light-dark(
+      0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%),
+      0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 1px 3px 1px rgb(0 0 0 / 25%)
+    );
+    --shadow-2: light-dark(
+      0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%),
+      0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 2px 6px 2px rgb(0 0 0 / 25%)
+    );
+    --shadow-3: light-dark(
+      0px 1px 3px 0px rgb(0 0 0 / 30%), 0px 4px 8px 3px rgb(0 0 0 / 15%),
+      0px 1px 3px 0px rgb(0 0 0 / 50%), 0px 4px 8px 3px rgb(0 0 0 / 25%)
+    );
+    --shadow-4: light-dark(
+      0px 2px 3px 0px rgb(0 0 0 / 30%), 0px 6px 10px 4px rgb(0 0 0 / 15%),
+      0px 2px 3px 0px rgb(0 0 0 / 50%), 0px 6px 10px 4px rgb(0 0 0 / 25%)
+    );
+    --shadow-5: light-dark(
+      0px 4px 4px 0px rgb(0 0 0 / 30%), 0px 8px 12px 6px rgb(0 0 0 / 15%),
+      0px 4px 4px 0px rgb(0 0 0 / 50%), 0px 8px 12px 6px rgb(0 0 0 / 25%)
+    );
+  }
+  @media (prefers-color-scheme: dark) {
+  :root {
+    --csstools-color-scheme--light:  ;
+  }
+  }
+}
+/**
+ * Chi Design System - Motion Tokens
+ * Animation duration and easing tokens
+ */
+@layer tokens {
+  :root {
+    /* Durations */
+    --duration-instant: 0ms;
+    --duration-short1: 50ms;
+    --duration-short2: 100ms;
+    --duration-short3: 150ms;
+    --duration-short4: 200ms;
+    --duration-medium1: 250ms;
+    --duration-medium2: 300ms;
+    --duration-medium3: 350ms;
+    --duration-medium4: 400ms;
+    --duration-long1: 450ms;
+    --duration-long2: 500ms;
+    --duration-long3: 550ms;
+    --duration-long4: 600ms;
+    --duration-extra-long1: 700ms;
+    --duration-extra-long2: 800ms;
+    --duration-extra-long3: 900ms;
+    --duration-extra-long4: 1000ms;
+
+    /* Easing functions */
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+    --easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+    --easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+  }
+}
+/**
+ * Chi Design System - Cursor & Icon Tokens
+ */
+@layer tokens {
+  :root {
+    /* Icon sizes */
+    --icon-size-sm: calc(18px * var(--scaling, 1));
+    --icon-size-md: calc(24px * var(--scaling, 1));
+    --icon-size-lg: calc(36px * var(--scaling, 1));
+    --icon-size-xl: calc(48px * var(--scaling, 1));
+
+    /* Cursor styles */
+    --cursor-default: default;
+    --cursor-pointer: pointer;
+    --cursor-not-allowed: not-allowed;
+    --cursor-text: text;
+    --cursor-move: move;
+    --cursor-grab: grab;
+    --cursor-grabbing: grabbing;
+  }
+}
+/**
+ * Chi Design System - Layout Tokens
+ */
+@layer tokens {
+  :root {
+    /* Container max-widths */
+    --container-1: 448px;
+    --container-2: 688px;
+    --container-3: 880px;
+    --container-4: 1136px;
+  }
+}
+/**
+ * Chi Design System - Grayscale Color Palette
+ * Neutral grayscale for wireframing and prototyping
+ */
+@layer tokens {
+  :root {
+    --csstools-color-scheme--light: initial;
+    color-scheme: light dark;
+
+    /* Primary */
+    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(79.7% 0.105 264deg);
+    --color-primary: var(--csstools-light-dark-toggle--0, oklch(49.4% 0.163 264deg));
+    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(30% 0.163 264deg);
+    --color-on-primary: var(--csstools-light-dark-toggle--1, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) oklch(35% 0.163 264deg);
+    --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(79.7% 0.105 264deg));
+    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(90% 0.105 264deg);
+    --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.163 264deg));
+
+    /* Secondary */
+    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(75.1% 0.08 314deg);
+    --color-secondary: var(--csstools-light-dark-toggle--4, oklch(61.8% 0.15 314deg));
+    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(35.1% 0.15 314deg);
+    --color-on-secondary: var(--csstools-light-dark-toggle--5, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) oklch(40.1% 0.15 314deg);
+    --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(85.1% 0.08 314deg));
+    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(90.1% 0.08 314deg);
+    --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(25.1% 0.15 314deg));
+
+    /* Tertiary */
+    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(80.2% 0.08 29deg);
+    --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(70.4% 0.15 29deg));
+    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(40.2% 0.15 29deg);
+    --color-on-tertiary: var(--csstools-light-dark-toggle--9, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) oklch(45.2% 0.15 29deg);
+    --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(90.2% 0.08 29deg));
+    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(95.2% 0.08 29deg);
+    --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(30.2% 0.15 29deg));
+
+    /* Error */
+    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) oklch(80.2% 0.15 29deg);
+    --color-error: var(--csstools-light-dark-toggle--12, oklch(62.8% 0.258 29deg));
+    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) oklch(40.2% 0.258 29deg);
+    --color-on-error: var(--csstools-light-dark-toggle--13, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) oklch(45.2% 0.258 29deg);
+    --color-error-container: var(--csstools-light-dark-toggle--14, oklch(90.2% 0.08 29deg));
+    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) oklch(95.2% 0.15 29deg);
+    --color-on-error-container: var(--csstools-light-dark-toggle--15, oklch(30.2% 0.15 29deg));
+
+    /* Surface */
+    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) oklch(15% 0.005 264deg);
+    --color-surface: var(--csstools-light-dark-toggle--16, oklch(99.1% 0.005 264deg));
+    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
+    --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(20% 0.005 264deg));
+    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(25% 0.02 264deg);
+    --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(92.5% 0.02 264deg));
+    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(75% 0.02 264deg);
+    --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(30% 0.02 264deg));
+    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(20% 0.01 264deg);
+    --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(96.1% 0.01 264deg));
+    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(17% 0.005 264deg);
+    --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(98.1% 0.005 264deg));
+    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
+    --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(94.1% 0.01 264deg));
+    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(30% 0.01 264deg);
+    --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(92.1% 0.01 264deg));
+
+    /* Surface elevations */
+    --color-surface-0: var(--color-surface);
+    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(18% 0.01 264deg);
+    --color-surface-1: var(--csstools-light-dark-toggle--24, oklch(97.1% 0.01 264deg));
+    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) oklch(21% 0.01 264deg);
+    --color-surface-2: var(--csstools-light-dark-toggle--25, oklch(94.1% 0.01 264deg));
+    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(24% 0.01 264deg);
+    --color-surface-3: var(--csstools-light-dark-toggle--26, oklch(92.1% 0.01 264deg));
+    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(26% 0.01 264deg);
+    --color-surface-4: var(--csstools-light-dark-toggle--27, oklch(91.1% 0.01 264deg));
+    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(28% 0.01 264deg);
+    --color-surface-5: var(--csstools-light-dark-toggle--28, oklch(90.1% 0.01 264deg));
+
+    /* Background */
+    --color-background: var(--color-surface);
+    --color-on-background: var(--color-on-surface);
+
+    /* Outline */
+    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(60% 0.02 264deg);
+    --color-outline: var(--csstools-light-dark-toggle--29, oklch(50% 0.02 264deg));
+    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(35% 0.02 264deg);
+    --color-outline-variant: var(--csstools-light-dark-toggle--30, oklch(80% 0.02 264deg));
+    --color-divider: var(--color-outline-variant);
+
+    /* Inverse */
+    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
+    --color-inverse-surface: var(--csstools-light-dark-toggle--31, oklch(25% 0.01 264deg));
+    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
+    --color-inverse-on-surface: var(--csstools-light-dark-toggle--32, oklch(95% 0.005 264deg));
+    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(49.4% 0.163 264deg);
+    --color-inverse-primary: var(--csstools-light-dark-toggle--33, oklch(79.7% 0.105 264deg));
+
+    /* Scrim and shadow */
+    --color-scrim: oklch(0% 0 0deg);
+    --color-shadow: oklch(0% 0 0deg);
+  }
+
+@supports (color: light-dark(red, red)) and (color: oklab(0% 0 0%)) {
+:root {
+    --color-primary: light-dark(oklch(49.4% 0.163 264deg), oklch(79.7% 0.105 264deg));
+    --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(30% 0.163 264deg));
+    --color-primary-container: light-dark(oklch(79.7% 0.105 264deg), oklch(35% 0.163 264deg));
+    --color-on-primary-container: light-dark(oklch(20% 0.163 264deg), oklch(90% 0.105 264deg));
+    --color-secondary: light-dark(oklch(61.8% 0.15 314deg), oklch(75.1% 0.08 314deg));
+    --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(35.1% 0.15 314deg));
+    --color-secondary-container: light-dark(oklch(85.1% 0.08 314deg), oklch(40.1% 0.15 314deg));
+    --color-on-secondary-container: light-dark(oklch(25.1% 0.15 314deg), oklch(90.1% 0.08 314deg));
+    --color-tertiary: light-dark(oklch(70.4% 0.15 29deg), oklch(80.2% 0.08 29deg));
+    --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(40.2% 0.15 29deg));
+    --color-tertiary-container: light-dark(oklch(90.2% 0.08 29deg), oklch(45.2% 0.15 29deg));
+    --color-on-tertiary-container: light-dark(oklch(30.2% 0.15 29deg), oklch(95.2% 0.08 29deg));
+    --color-error: light-dark(oklch(62.8% 0.258 29deg), oklch(80.2% 0.15 29deg));
+    --color-on-error: light-dark(oklch(100% 0 0deg), oklch(40.2% 0.258 29deg));
+    --color-error-container: light-dark(oklch(90.2% 0.08 29deg), oklch(45.2% 0.258 29deg));
+    --color-on-error-container: light-dark(oklch(30.2% 0.15 29deg), oklch(95.2% 0.15 29deg));
+    --color-surface: light-dark(oklch(99.1% 0.005 264deg), oklch(15% 0.005 264deg));
+    --color-on-surface: light-dark(oklch(20% 0.005 264deg), oklch(90% 0.005 264deg));
+    --color-surface-variant: light-dark(oklch(92.5% 0.02 264deg), oklch(25% 0.02 264deg));
+    --color-on-surface-variant: light-dark(oklch(30% 0.02 264deg), oklch(75% 0.02 264deg));
+    --color-surface-container: light-dark(oklch(96.1% 0.01 264deg), oklch(20% 0.01 264deg));
+    --color-surface-container-low: light-dark(oklch(98.1% 0.005 264deg), oklch(17% 0.005 264deg));
+    --color-surface-container-high: light-dark(oklch(94.1% 0.01 264deg), oklch(25% 0.01 264deg));
+    --color-surface-container-highest: light-dark(oklch(92.1% 0.01 264deg), oklch(30% 0.01 264deg));
+    --color-surface-1: light-dark(oklch(97.1% 0.01 264deg), oklch(18% 0.01 264deg));
+    --color-surface-2: light-dark(oklch(94.1% 0.01 264deg), oklch(21% 0.01 264deg));
+    --color-surface-3: light-dark(oklch(92.1% 0.01 264deg), oklch(24% 0.01 264deg));
+    --color-surface-4: light-dark(oklch(91.1% 0.01 264deg), oklch(26% 0.01 264deg));
+    --color-surface-5: light-dark(oklch(90.1% 0.01 264deg), oklch(28% 0.01 264deg));
+    --color-outline: light-dark(oklch(50% 0.02 264deg), oklch(60% 0.02 264deg));
+    --color-outline-variant: light-dark(oklch(80% 0.02 264deg), oklch(35% 0.02 264deg));
+    --color-inverse-surface: light-dark(oklch(25% 0.01 264deg), oklch(90% 0.005 264deg));
+    --color-inverse-on-surface: light-dark(oklch(95% 0.005 264deg), oklch(25% 0.01 264deg));
+    --color-inverse-primary: light-dark(oklch(79.7% 0.105 264deg), oklch(49.4% 0.163 264deg));
+  }
+}
+    @supports not (color: light-dark(tan, tan)) {
+  :root * {
+    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) oklch(79.7% 0.105 264deg);
+    --color-primary: var(--csstools-light-dark-toggle--0, oklch(49.4% 0.163 264deg));
+    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) oklch(30% 0.163 264deg);
+    --color-on-primary: var(--csstools-light-dark-toggle--1, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) oklch(35% 0.163 264deg);
+    --color-primary-container: var(--csstools-light-dark-toggle--2, oklch(79.7% 0.105 264deg));
+    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) oklch(90% 0.105 264deg);
+    --color-on-primary-container: var(--csstools-light-dark-toggle--3, oklch(20% 0.163 264deg));
+    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) oklch(75.1% 0.08 314deg);
+    --color-secondary: var(--csstools-light-dark-toggle--4, oklch(61.8% 0.15 314deg));
+    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) oklch(35.1% 0.15 314deg);
+    --color-on-secondary: var(--csstools-light-dark-toggle--5, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) oklch(40.1% 0.15 314deg);
+    --color-secondary-container: var(--csstools-light-dark-toggle--6, oklch(85.1% 0.08 314deg));
+    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) oklch(90.1% 0.08 314deg);
+    --color-on-secondary-container: var(--csstools-light-dark-toggle--7, oklch(25.1% 0.15 314deg));
+    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) oklch(80.2% 0.08 29deg);
+    --color-tertiary: var(--csstools-light-dark-toggle--8, oklch(70.4% 0.15 29deg));
+    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) oklch(40.2% 0.15 29deg);
+    --color-on-tertiary: var(--csstools-light-dark-toggle--9, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) oklch(45.2% 0.15 29deg);
+    --color-tertiary-container: var(--csstools-light-dark-toggle--10, oklch(90.2% 0.08 29deg));
+    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) oklch(95.2% 0.08 29deg);
+    --color-on-tertiary-container: var(--csstools-light-dark-toggle--11, oklch(30.2% 0.15 29deg));
+    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) oklch(80.2% 0.15 29deg);
+    --color-error: var(--csstools-light-dark-toggle--12, oklch(62.8% 0.258 29deg));
+    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) oklch(40.2% 0.258 29deg);
+    --color-on-error: var(--csstools-light-dark-toggle--13, oklch(100% 0 0deg));
+    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) oklch(45.2% 0.258 29deg);
+    --color-error-container: var(--csstools-light-dark-toggle--14, oklch(90.2% 0.08 29deg));
+    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) oklch(95.2% 0.15 29deg);
+    --color-on-error-container: var(--csstools-light-dark-toggle--15, oklch(30.2% 0.15 29deg));
+    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) oklch(15% 0.005 264deg);
+    --color-surface: var(--csstools-light-dark-toggle--16, oklch(99.1% 0.005 264deg));
+    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
+    --color-on-surface: var(--csstools-light-dark-toggle--17, oklch(20% 0.005 264deg));
+    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) oklch(25% 0.02 264deg);
+    --color-surface-variant: var(--csstools-light-dark-toggle--18, oklch(92.5% 0.02 264deg));
+    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) oklch(75% 0.02 264deg);
+    --color-on-surface-variant: var(--csstools-light-dark-toggle--19, oklch(30% 0.02 264deg));
+    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) oklch(20% 0.01 264deg);
+    --color-surface-container: var(--csstools-light-dark-toggle--20, oklch(96.1% 0.01 264deg));
+    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) oklch(17% 0.005 264deg);
+    --color-surface-container-low: var(--csstools-light-dark-toggle--21, oklch(98.1% 0.005 264deg));
+    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
+    --color-surface-container-high: var(--csstools-light-dark-toggle--22, oklch(94.1% 0.01 264deg));
+    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) oklch(30% 0.01 264deg);
+    --color-surface-container-highest: var(--csstools-light-dark-toggle--23, oklch(92.1% 0.01 264deg));
+    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) oklch(18% 0.01 264deg);
+    --color-surface-1: var(--csstools-light-dark-toggle--24, oklch(97.1% 0.01 264deg));
+    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) oklch(21% 0.01 264deg);
+    --color-surface-2: var(--csstools-light-dark-toggle--25, oklch(94.1% 0.01 264deg));
+    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) oklch(24% 0.01 264deg);
+    --color-surface-3: var(--csstools-light-dark-toggle--26, oklch(92.1% 0.01 264deg));
+    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) oklch(26% 0.01 264deg);
+    --color-surface-4: var(--csstools-light-dark-toggle--27, oklch(91.1% 0.01 264deg));
+    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) oklch(28% 0.01 264deg);
+    --color-surface-5: var(--csstools-light-dark-toggle--28, oklch(90.1% 0.01 264deg));
+    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) oklch(60% 0.02 264deg);
+    --color-outline: var(--csstools-light-dark-toggle--29, oklch(50% 0.02 264deg));
+    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) oklch(35% 0.02 264deg);
+    --color-outline-variant: var(--csstools-light-dark-toggle--30, oklch(80% 0.02 264deg));
+    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) oklch(90% 0.005 264deg);
+    --color-inverse-surface: var(--csstools-light-dark-toggle--31, oklch(25% 0.01 264deg));
+    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) oklch(25% 0.01 264deg);
+    --color-inverse-on-surface: var(--csstools-light-dark-toggle--32, oklch(95% 0.005 264deg));
+    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) oklch(49.4% 0.163 264deg);
+    --color-inverse-primary: var(--csstools-light-dark-toggle--33, oklch(79.7% 0.105 264deg));
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+  :root {
+    --csstools-color-scheme--light:  ;
+  }
+  }
+}
+/* Custom media queries */
+/**
+ * Chi Design System - Responsive Breakpoints
+ * Based on window size classes: Compact → Medium → Expanded → Large
+ */
+/* Compact: Mobile portrait (0-599px) - no media query needed, mobile-first */
+/* Medium: Mobile landscape & small tablets (601px-1294px) */
+@custom-media --medium (min-width: 600px);
+/* Expanded: Desktop/laptop (1295px+) */
+@custom-media --expanded (min-width: 1295px);
+/* Large: Wide desktop - sidebar/subnav persistent (1440px+) */
+@custom-media --large (min-width: 1440px);
+/* Extra Large: Ultra-wide monitors (1920px+) */
+@custom-media --xl (min-width: 1920px);
+/* Legacy aliases for gradual migration */
+@custom-media --sm (min-width: 600px);
+@custom-media --md (min-width: 1295px);
+@custom-media --lg (min-width: 1440px);
+/* Base styles layer */
+@layer base{
+
+/**
+ * Chi Design System - Base Styles
+ * Typography, spacing, and foundational styles using design system tokens
+ */
+
+/* Typography */
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-3);
+  color: var(--color-on-surface);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Responsive body typography */
+@media screen and (width <= 600px) {
+  body {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+strong,
+b {
+  font-weight: 600;
+}
+
+em {
+  font-style: italic;
+}
+
+/* Links */
+a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  padding: 1px;
+  border-radius: var(--radius-xs);
+}
+
+a:hover {
+  color: var(--color-primary);
+  opacity: 0.9;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Paragraphs */
+p {
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}
+
+/* Code */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-container-high);
+  color: var(--color-on-surface-variant);
+}
+
+pre {
+  font-family: var(--font-mono);
+  padding: 1rem;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-container-high);
+  overflow-x: auto;
+}
+
+/* Lists */
+ul {
+  list-style: disc outside none;
+}
+
+ol {
+  list-style: decimal outside none;
+}
+
+/* Headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-on-surface);
+}
+
+h1 {
+  font-size: 3.5rem;
+  line-height: 4rem;
+  margin: 0;
+}
+
+@media screen and (width <= 600px) {
+  h1 {
+    font-size: 2.25rem;
+    line-height: 2.75rem;
+  }
+}
+
+h2 {
+  font-size: 2.8125rem;
+  line-height: 3.25rem;
+  margin: 2rem 0;
+}
+
+@media screen and (width <= 600px) {
+  h2 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+
+h3 {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+  margin: 1.5rem 0;
+}
+
+@media screen and (width <= 600px) {
+  h3 {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+
+h4 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  margin: 1rem 0;
+}
+
+h5 {
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  font-weight: var(--font-weight-medium);
+  margin: 1rem 0;
+}
+
+h6 {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-1);
+  margin: 1rem 0;
+}
+
+/* Form elements */
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+
+/* Focus styles */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Elevation/Shadow utilities */
+.elevation-0 {
+  box-shadow: var(--shadow-0);
+}
+
+.elevation-1 {
+  box-shadow: var(--shadow-1);
+}
+
+.elevation-2 {
+  box-shadow: var(--shadow-2);
+}
+
+.elevation-3 {
+  box-shadow: var(--shadow-3);
+}
+
+.elevation-4 {
+  box-shadow: var(--shadow-4);
+}
+
+.elevation-5 {
+  box-shadow: var(--shadow-5);
+}
+}