@shift-css/core 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/reset.css +140 -0
  2. package/dist/shift.css +2912 -0
  3. package/dist/shift.css.map +1 -0
  4. package/dist/shift.min.css +1 -0
  5. package/dist/tokens.css +210 -0
  6. package/package.json +64 -0
package/dist/shift.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AAcA;EIJA;;;;EAOA;;;;EAKA;;;;IAQE;MAAgD;;;IAKzB;;;;;EAMzB;;;;;;;;EASA;;;;;;EAWA;;;;;EASA;;;;;;;EAQA;;;;EAWA;;;;;EAWA;;;;EAKA;;;;;EAOA;;;;IAIE;;;;;EAMF;;;;;EAMA;;;;EAKA;;;;;EAQA;;;;;EAMA;;;;EAKA;;;;EAKA;IACE;;;;;;;;EAWF;IACE;;;;;EAMF;IACE;;;;;;;IASA;;;;IAKA;;;;IAIA;;;;IAIA;;;;;;AJzLF;EMRA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ANOF;ESAA;;;;;;;;;;IA0BE;MAA0C;;;IAS1C;MAAwC;;;;EAU1C;;;;EAKA;;;;;EAMA;;;;;EAMA;;;;;EAUA;;;;EAKA;;;;IAME;;;;;IAKA;;;;;;EAWF;;;;EAIA;;;;EAIA;;;;EAQA;;;;;;EAMA;;;;;;EAMA;;;;;;EAUA;IACE;;;;;EAKF;IACE;;;;;EFhJF;;;;;;;;;;;;;;;;;;IAuBE;MAA0C;;;IAM1C;MAAwC;;;IAK7B;;;;IASX;;;;IAKA;;;;;IAMA;;;;;IAMA;;;;;;;EAYF;;;;IAIE;;;;IAIA;;;;;EAMF;;;;;;IAQE;;;;;EAMF;;;;;IAOE;;;;;EAMF;;;;;;;;IASE;;;;;;EAOF;;;;;;IAOE;;;;;;;EAYF;;;IAGE;;;;IAIA;;;;;EAMF;;;IAGE;;;;IAIA;;;;;EAMF;;;IAGE;;;;IAIA;;;;;EASF;;;;;EAKA;;;;;EAKA;;;;;EAUA;;;;;EAMA;;;;EAKA;;;;;IAKE;;;;;;;;;;;;;;EAcF;;;;;;EAUA;;;IAGE;;;MAGE;;;;MAIA;;;;MAIA;;;;;;EJzQJ;;;;;;;;;;;;;;;;IAsBE;MAA0C;;;;EAW5C;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;IAIE;;;;;;;EAQF;;;;;;;EAQA;;;;;EAUA;;;;;EAMA;;;;;EAOA;;;;;EAMA;;;;;;EAWA;;;;IAME;;;;;IAKA;;;;IAIA;;;;;;EAOF;;;IAGE;;;;;;;EAQF;;;IAGE;;;;;;;EAQF;IACE;;;MAGE;;;;;;;EAWJ;;;;;EAKA;;;;EAKA;;;;;EAKA;;;;;EAUA;;;;;;EAOA;;;;;;EQxMA;;;;;;;;;;;;;;;;;;IAwBE;;;;IAKA;;;;IAKA;;;;;;IAOA;;;;;;IAOA;;;MAIE;;;;;;EAUJ;;;;;EAKA;;;;;EAUA;;;;;EAMA;;;;;;;EAWA;;;IAGE;;;;;MAKE;;;;MAIA;;;;;IAKF;;;;;;;;;;MAUE;;;;;MAKA;;;;;;;EAWJ;;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;;EASA;;;;;;IAOE;;;;;;;;;MAYE;;;;;MAKA;;;;;MAKA;;;;;;;EAOJ;;;IAGE;;;;;;;;EAQF;;;IAGE;;;;;;;EAWF;;;;;;IAME;;;;;;;;;;MAWE;;;;;;;;;;;;;MAcA;;;QAGE;;;;;MAKF;;;;;MAKA;;;;;;;;AX3QJ;EEMA;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;;;EAMA;;;;;;EAOA;;;;EAIA;;;;EASA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;;EAKA;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;;;;EAOA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;ED3XA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;;;;;;;;;EAaA;;;;;;;;;;;EAgBA;;;;;;EAMA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAWA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAMF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EASF;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EIvNA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EGrdA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EErRA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAQA;;;;;IAKE;;;;;EASF;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA","sources":["Users/amcshan/Developer/Projects/shiftcss/packages/core/src/index.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/tokens/tokens.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/utils/layout.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/utils/visibility.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/components/card.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/base/reset.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/utils/spacing.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/components/button.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/components/surface.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/components/input.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/utils/flex.css","Users/amcshan/Developer/Projects/shiftcss/packages/core/src/utils/typography.css"],"sourcesContent":["/**\n * Shift CSS\n * Zero-runtime, OKLCH-native CSS framework\n *\n * Layer order (lowest → highest specificity):\n * 1. shift.reset - Modern browser reset, fluid typography, accessibility\n * 2. shift.tokens - CSS custom properties (generated from JSON)\n * 3. shift.core - UI components (Buttons, Cards, Surface)\n * 4. shift.utils - Atomic utility classes\n *\n * User CSS automatically overrides framework styles (no !important needed)\n */\n\n/* Declare layer order FIRST - establishes specificity */\n@layer shift.reset, shift.tokens, shift.core, shift.utils;\n\n/* Import layer contents */\n@import \"./base/reset.css\" layer(shift.reset);\n@import \"./tokens/tokens.css\" layer(shift.tokens);\n@import \"./components/surface.css\" layer(shift.core);\n@import \"./components/button.css\" layer(shift.core);\n@import \"./components/card.css\" layer(shift.core);\n@import \"./components/input.css\" layer(shift.core);\n@import \"./utils/layout.css\" layer(shift.utils);\n@import \"./utils/visibility.css\" layer(shift.utils);\n@import \"./utils/spacing.css\" layer(shift.utils);\n@import \"./utils/flex.css\" layer(shift.utils);\n@import \"./utils/typography.css\" layer(shift.utils);\n","/**\n * Shift CSS - Design Tokens\n * Auto-generated from tokens/*.json\n * DO NOT EDIT DIRECTLY\n */\n\n@layer shift.tokens {\n :root {\n color-scheme: light dark;\n\n /* SEED HUE CUSTOMIZATION POINTS */\n --shift-hue-primary: 250;\n --shift-hue-secondary: 180;\n --shift-hue-accent: 30;\n --shift-hue-success: 145;\n --shift-hue-warning: 45;\n --shift-hue-danger: 25;\n --shift-hue-neutral: 250;\n\n /* PRIMARY SCALE */\n --s-primary-50: oklch(0.9778 0.0108 var(--shift-hue-primary));\n --s-primary-100: oklch(0.9356 0.0321 var(--shift-hue-primary));\n --s-primary-200: oklch(0.8811 0.0636 var(--shift-hue-primary));\n --s-primary-300: oklch(0.8267 0.0951 var(--shift-hue-primary));\n --s-primary-400: oklch(0.7422 0.1211 var(--shift-hue-primary));\n --s-primary-500: oklch(0.6478 0.1472 var(--shift-hue-primary));\n --s-primary-600: oklch(0.5733 0.1383 var(--shift-hue-primary));\n --s-primary-700: oklch(0.4689 0.1178 var(--shift-hue-primary));\n --s-primary-800: oklch(0.3944 0.0894 var(--shift-hue-primary));\n --s-primary-900: oklch(0.3200 0.0720 var(--shift-hue-primary));\n --s-primary-950: oklch(0.2378 0.0540 var(--shift-hue-primary));\n\n /* SECONDARY SCALE */\n --s-secondary-50: oklch(0.9778 0.0108 var(--shift-hue-secondary));\n --s-secondary-100: oklch(0.9356 0.0321 var(--shift-hue-secondary));\n --s-secondary-200: oklch(0.8811 0.0636 var(--shift-hue-secondary));\n --s-secondary-300: oklch(0.8267 0.0951 var(--shift-hue-secondary));\n --s-secondary-400: oklch(0.7422 0.1211 var(--shift-hue-secondary));\n --s-secondary-500: oklch(0.6478 0.1472 var(--shift-hue-secondary));\n --s-secondary-600: oklch(0.5733 0.1383 var(--shift-hue-secondary));\n --s-secondary-700: oklch(0.4689 0.1178 var(--shift-hue-secondary));\n --s-secondary-800: oklch(0.3944 0.0894 var(--shift-hue-secondary));\n --s-secondary-900: oklch(0.3200 0.0720 var(--shift-hue-secondary));\n --s-secondary-950: oklch(0.2378 0.0540 var(--shift-hue-secondary));\n\n /* ACCENT SCALE */\n --s-accent-50: oklch(0.9778 0.0108 var(--shift-hue-accent));\n --s-accent-100: oklch(0.9356 0.0321 var(--shift-hue-accent));\n --s-accent-200: oklch(0.8811 0.0636 var(--shift-hue-accent));\n --s-accent-300: oklch(0.8267 0.0951 var(--shift-hue-accent));\n --s-accent-400: oklch(0.7422 0.1211 var(--shift-hue-accent));\n --s-accent-500: oklch(0.6478 0.1472 var(--shift-hue-accent));\n --s-accent-600: oklch(0.5733 0.1383 var(--shift-hue-accent));\n --s-accent-700: oklch(0.4689 0.1178 var(--shift-hue-accent));\n --s-accent-800: oklch(0.3944 0.0894 var(--shift-hue-accent));\n --s-accent-900: oklch(0.3200 0.0720 var(--shift-hue-accent));\n --s-accent-950: oklch(0.2378 0.0540 var(--shift-hue-accent));\n\n /* SUCCESS SCALE */\n --s-success-50: oklch(0.9778 0.0108 var(--shift-hue-success));\n --s-success-100: oklch(0.9356 0.0321 var(--shift-hue-success));\n --s-success-200: oklch(0.8811 0.0636 var(--shift-hue-success));\n --s-success-300: oklch(0.8267 0.0951 var(--shift-hue-success));\n --s-success-400: oklch(0.7422 0.1211 var(--shift-hue-success));\n --s-success-500: oklch(0.6478 0.1472 var(--shift-hue-success));\n --s-success-600: oklch(0.5733 0.1383 var(--shift-hue-success));\n --s-success-700: oklch(0.4689 0.1178 var(--shift-hue-success));\n --s-success-800: oklch(0.3944 0.0894 var(--shift-hue-success));\n --s-success-900: oklch(0.3200 0.0720 var(--shift-hue-success));\n --s-success-950: oklch(0.2378 0.0540 var(--shift-hue-success));\n\n /* WARNING SCALE */\n --s-warning-50: oklch(0.9778 0.0108 var(--shift-hue-warning));\n --s-warning-100: oklch(0.9356 0.0321 var(--shift-hue-warning));\n --s-warning-200: oklch(0.8811 0.0636 var(--shift-hue-warning));\n --s-warning-300: oklch(0.8267 0.0951 var(--shift-hue-warning));\n --s-warning-400: oklch(0.7422 0.1211 var(--shift-hue-warning));\n --s-warning-500: oklch(0.6478 0.1472 var(--shift-hue-warning));\n --s-warning-600: oklch(0.5733 0.1383 var(--shift-hue-warning));\n --s-warning-700: oklch(0.4689 0.1178 var(--shift-hue-warning));\n --s-warning-800: oklch(0.3944 0.0894 var(--shift-hue-warning));\n --s-warning-900: oklch(0.3200 0.0720 var(--shift-hue-warning));\n --s-warning-950: oklch(0.2378 0.0540 var(--shift-hue-warning));\n\n /* DANGER SCALE */\n --s-danger-50: oklch(0.9778 0.0108 var(--shift-hue-danger));\n --s-danger-100: oklch(0.9356 0.0321 var(--shift-hue-danger));\n --s-danger-200: oklch(0.8811 0.0636 var(--shift-hue-danger));\n --s-danger-300: oklch(0.8267 0.0951 var(--shift-hue-danger));\n --s-danger-400: oklch(0.7422 0.1211 var(--shift-hue-danger));\n --s-danger-500: oklch(0.6478 0.1472 var(--shift-hue-danger));\n --s-danger-600: oklch(0.5733 0.1383 var(--shift-hue-danger));\n --s-danger-700: oklch(0.4689 0.1178 var(--shift-hue-danger));\n --s-danger-800: oklch(0.3944 0.0894 var(--shift-hue-danger));\n --s-danger-900: oklch(0.3200 0.0720 var(--shift-hue-danger));\n --s-danger-950: oklch(0.2378 0.0540 var(--shift-hue-danger));\n\n /* NEUTRAL SCALE */\n --s-neutral-50: oklch(0.9778 0.0054 var(--shift-hue-neutral));\n --s-neutral-100: oklch(0.9356 0.0072 var(--shift-hue-neutral));\n --s-neutral-200: oklch(0.8811 0.0090 var(--shift-hue-neutral));\n --s-neutral-300: oklch(0.8267 0.0099 var(--shift-hue-neutral));\n --s-neutral-400: oklch(0.7422 0.0108 var(--shift-hue-neutral));\n --s-neutral-500: oklch(0.6478 0.0118 var(--shift-hue-neutral));\n --s-neutral-600: oklch(0.5733 0.0108 var(--shift-hue-neutral));\n --s-neutral-700: oklch(0.4689 0.0099 var(--shift-hue-neutral));\n --s-neutral-800: oklch(0.3944 0.0090 var(--shift-hue-neutral));\n --s-neutral-900: oklch(0.3200 0.0081 var(--shift-hue-neutral));\n --s-neutral-950: oklch(0.2378 0.0072 var(--shift-hue-neutral));\n\n /* SEMANTIC TOKENS with light-dark() */\n\n /* SURFACE */\n --s-surface-base: light-dark(var(--s-neutral-50), var(--s-neutral-950));\n --s-surface-raised: light-dark(var(--s-neutral-100), var(--s-neutral-900));\n --s-surface-sunken: light-dark(var(--s-neutral-200), var(--s-neutral-800));\n --s-surface-overlay: light-dark(var(--s-neutral-900), var(--s-neutral-100));\n\n /* TEXT */\n --s-text-primary: light-dark(var(--s-neutral-900), var(--s-neutral-50));\n --s-text-secondary: light-dark(var(--s-neutral-700), var(--s-neutral-300));\n --s-text-tertiary: light-dark(var(--s-neutral-500), var(--s-neutral-500));\n --s-text-inverse: light-dark(var(--s-neutral-50), var(--s-neutral-900));\n\n /* BORDER */\n --s-border-default: light-dark(var(--s-neutral-200), var(--s-neutral-800));\n --s-border-muted: light-dark(var(--s-neutral-100), var(--s-neutral-900));\n --s-border-strong: light-dark(var(--s-neutral-400), var(--s-neutral-600));\n\n /* INTERACTIVE */\n --s-interactive-primary: light-dark(var(--s-primary-700), var(--s-primary-300));\n --s-interactive-primary-hover: light-dark(var(--s-primary-800), var(--s-primary-200));\n --s-interactive-primary-active: light-dark(var(--s-primary-900), var(--s-primary-100));\n --s-interactive-secondary: light-dark(var(--s-secondary-700), var(--s-secondary-300));\n\n /* STATE */\n --s-state-success: light-dark(var(--s-success-700), var(--s-success-300));\n --s-state-success-bg: light-dark(var(--s-success-100), var(--s-success-900));\n --s-state-warning: light-dark(var(--s-warning-700), var(--s-warning-300));\n --s-state-warning-bg: light-dark(var(--s-warning-100), var(--s-warning-900));\n --s-state-danger: light-dark(var(--s-danger-700), var(--s-danger-300));\n --s-state-danger-bg: light-dark(var(--s-danger-100), var(--s-danger-900));\n\n /* FOCUS */\n --s-focus-ring: light-dark(var(--s-primary-500), var(--s-primary-400));\n --s-focus-ring-offset: light-dark(var(--s-neutral-50), var(--s-neutral-950));\n\n /* SPACING SCALE */\n --s-space-0: 0;\n --s-space-1: 0.25rem;\n --s-space-2: 0.5rem;\n --s-space-3: 0.75rem;\n --s-space-4: 1rem;\n --s-space-5: 1.25rem;\n --s-space-6: 1.5rem;\n --s-space-7: 1.75rem;\n --s-space-8: 2rem;\n --s-space-9: 2.25rem;\n --s-space-10: 2.5rem;\n --s-space-11: 2.75rem;\n --s-space-12: 3rem;\n --s-space-14: 3.5rem;\n --s-space-16: 4rem;\n --s-space-20: 5rem;\n --s-space-24: 6rem;\n --s-space-28: 7rem;\n --s-space-32: 8rem;\n --s-space-36: 9rem;\n --s-space-40: 10rem;\n --s-space-44: 11rem;\n --s-space-48: 12rem;\n --s-space-52: 13rem;\n --s-space-56: 14rem;\n --s-space-60: 15rem;\n --s-space-64: 16rem;\n --s-space-72: 18rem;\n --s-space-80: 20rem;\n --s-space-96: 24rem;\n --s-space-px: 1px;\n --s-space-0_5: 0.125rem;\n --s-space-1_5: 0.375rem;\n --s-space-2_5: 0.625rem;\n --s-space-3_5: 0.875rem;\n\n /* BORDER RADIUS */\n --s-radius-none: 0;\n --s-radius-sm: 0.125rem;\n --s-radius-base: 0.25rem;\n --s-radius-md: 0.375rem;\n --s-radius-lg: 0.5rem;\n --s-radius-xl: 0.75rem;\n --s-radius-2xl: 1rem;\n --s-radius-3xl: 1.5rem;\n --s-radius-full: 9999px;\n\n /* TYPOGRAPHY */\n --s-font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --s-font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --s-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n\n /* FONT SIZES (fluid) */\n --s-text-xs: clamp(0.6875rem, 0.625rem + 0.25vi, 0.75rem);\n --s-text-sm: clamp(0.8125rem, 0.75rem + 0.25vi, 0.875rem);\n --s-text-base: clamp(0.9375rem, 0.875rem + 0.25vi, 1rem);\n --s-text-lg: clamp(1.0625rem, 1rem + 0.25vi, 1.125rem);\n --s-text-xl: clamp(1.1875rem, 1.0625rem + 0.5vi, 1.25rem);\n --s-text-2xl: clamp(1.4375rem, 1.25rem + 0.75vi, 1.5rem);\n --s-text-3xl: clamp(1.75rem, 1.5rem + 1vi, 1.875rem);\n --s-text-4xl: clamp(2.125rem, 1.75rem + 1.5vi, 2.25rem);\n --s-text-5xl: clamp(2.75rem, 2.25rem + 2vi, 3rem);\n\n /* LINE HEIGHTS */\n --s-leading-none: 1;\n --s-leading-tight: 1.25;\n --s-leading-snug: 1.375;\n --s-leading-normal: 1.5;\n --s-leading-relaxed: 1.625;\n --s-leading-loose: 2;\n\n /* FONT WEIGHTS */\n --s-font-thin: 100;\n --s-font-extralight: 200;\n --s-font-light: 300;\n --s-font-normal: 400;\n --s-font-medium: 500;\n --s-font-semibold: 600;\n --s-font-bold: 700;\n --s-font-extrabold: 800;\n --s-font-black: 900;\n\n /* LETTER SPACING */\n --s-tracking-tighter: -0.05em;\n --s-tracking-tight: -0.025em;\n --s-tracking-normal: 0;\n --s-tracking-wide: 0.025em;\n --s-tracking-wider: 0.05em;\n --s-tracking-widest: 0.1em;\n\n /* TRANSITIONS */\n --s-duration-75: 75ms;\n --s-duration-100: 100ms;\n --s-duration-150: 150ms;\n --s-duration-200: 200ms;\n --s-duration-300: 300ms;\n --s-duration-500: 500ms;\n --s-duration-700: 700ms;\n --s-duration-1000: 1000ms;\n\n /* EASING */\n --s-ease-linear: linear;\n --s-ease-in: cubic-bezier(0.4, 0, 1, 1);\n --s-ease-out: cubic-bezier(0, 0, 0.2, 1);\n --s-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --s-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n\n /* SHADOWS */\n --s-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --s-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --s-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --s-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --s-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --s-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --s-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --s-shadow-none: 0 0 #0000;\n }\n}\n","/**\n * Shift CSS - Layout Utilities (Structural)\n *\n * Semantic attribute selectors for layout patterns.\n * These define the \"skeleton\" of your UI.\n *\n * Usage:\n * <div s-flex>Flex container</div>\n * <div s-flex=\"col\">Vertical stack</div>\n * <div s-flex=\"center\">Centered content</div>\n * <div s-grid=\"3\">3-column grid</div>\n * <div s-gap=\"md\">Consistent spacing</div>\n * <div s-container>Centered container</div>\n */\n\n/* =============================================================================\n FLEX LAYOUT\n ============================================================================= */\n\n/* Base flex - just enables flexbox */\n[s-flex] {\n display: flex;\n}\n\n/* Flex direction variants */\n[s-flex=\"row\"] {\n display: flex;\n flex-direction: row;\n}\n\n[s-flex=\"col\"] {\n display: flex;\n flex-direction: column;\n}\n\n[s-flex=\"row-reverse\"] {\n display: flex;\n flex-direction: row-reverse;\n}\n\n[s-flex=\"col-reverse\"] {\n display: flex;\n flex-direction: column-reverse;\n}\n\n/* Common flex patterns */\n[s-flex=\"center\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n[s-flex=\"stack\"] {\n display: flex;\n flex-direction: column;\n}\n\n[s-flex=\"between\"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n[s-flex=\"end\"] {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n/* Flex wrap */\n[s-flex~=\"wrap\"] {\n flex-wrap: wrap;\n}\n\n[s-flex~=\"nowrap\"] {\n flex-wrap: nowrap;\n}\n\n/* =============================================================================\n FLEX ALIGNMENT (composable modifiers)\n ============================================================================= */\n\n/* Justify content */\n[s-justify=\"start\"] {\n justify-content: flex-start;\n}\n\n[s-justify=\"end\"] {\n justify-content: flex-end;\n}\n\n[s-justify=\"center\"] {\n justify-content: center;\n}\n\n[s-justify=\"between\"] {\n justify-content: space-between;\n}\n\n[s-justify=\"around\"] {\n justify-content: space-around;\n}\n\n[s-justify=\"evenly\"] {\n justify-content: space-evenly;\n}\n\n/* Align items */\n[s-items=\"start\"] {\n align-items: flex-start;\n}\n\n[s-items=\"end\"] {\n align-items: flex-end;\n}\n\n[s-items=\"center\"] {\n align-items: center;\n}\n\n[s-items=\"baseline\"] {\n align-items: baseline;\n}\n\n[s-items=\"stretch\"] {\n align-items: stretch;\n}\n\n/* Align content (for wrapped flex) */\n[s-content=\"start\"] {\n align-content: flex-start;\n}\n\n[s-content=\"end\"] {\n align-content: flex-end;\n}\n\n[s-content=\"center\"] {\n align-content: center;\n}\n\n[s-content=\"between\"] {\n align-content: space-between;\n}\n\n[s-content=\"around\"] {\n align-content: space-around;\n}\n\n/* =============================================================================\n GRID LAYOUT\n ============================================================================= */\n\n/* Base grid - just enables grid */\n[s-grid] {\n display: grid;\n}\n\n/* Grid column variants */\n[s-grid=\"1\"] {\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n[s-grid=\"2\"] {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n[s-grid=\"3\"] {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n[s-grid=\"4\"] {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n[s-grid=\"5\"] {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n\n[s-grid=\"6\"] {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n\n[s-grid=\"12\"] {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n/* Auto-fit grid - responsive without media queries */\n[s-grid=\"auto-fit\"] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));\n}\n\n[s-grid=\"auto-fill\"] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));\n}\n\n/* Grid rows */\n[s-grid-rows=\"1\"] {\n grid-template-rows: repeat(1, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"2\"] {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"3\"] {\n grid-template-rows: repeat(3, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"4\"] {\n grid-template-rows: repeat(4, minmax(0, 1fr));\n}\n\n/* =============================================================================\n GRID SPAN (for children)\n ============================================================================= */\n\n[s-col-span=\"1\"] {\n grid-column: span 1 / span 1;\n}\n\n[s-col-span=\"2\"] {\n grid-column: span 2 / span 2;\n}\n\n[s-col-span=\"3\"] {\n grid-column: span 3 / span 3;\n}\n\n[s-col-span=\"4\"] {\n grid-column: span 4 / span 4;\n}\n\n[s-col-span=\"6\"] {\n grid-column: span 6 / span 6;\n}\n\n[s-col-span=\"12\"] {\n grid-column: span 12 / span 12;\n}\n\n[s-col-span=\"full\"] {\n grid-column: 1 / -1;\n}\n\n[s-row-span=\"1\"] {\n grid-row: span 1 / span 1;\n}\n\n[s-row-span=\"2\"] {\n grid-row: span 2 / span 2;\n}\n\n[s-row-span=\"3\"] {\n grid-row: span 3 / span 3;\n}\n\n[s-row-span=\"full\"] {\n grid-row: 1 / -1;\n}\n\n/* =============================================================================\n GAP (Designer's Tool - semantic spacing)\n ============================================================================= */\n\n/* Base gap - applies default medium spacing */\n[s-gap] {\n gap: var(--s-space-4);\n}\n\n/* Gap size variants */\n[s-gap=\"xs\"] {\n gap: var(--s-space-1);\n}\n\n[s-gap=\"sm\"] {\n gap: var(--s-space-2);\n}\n\n[s-gap=\"md\"] {\n gap: var(--s-space-4);\n}\n\n[s-gap=\"lg\"] {\n gap: var(--s-space-6);\n}\n\n[s-gap=\"xl\"] {\n gap: var(--s-space-8);\n}\n\n[s-gap=\"none\"] {\n gap: 0;\n}\n\n/* =============================================================================\n CONTAINER\n ============================================================================= */\n\n[s-container] {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--s-space-4);\n max-width: var(--s-container-max, 80rem);\n}\n\n[s-container=\"sm\"] {\n max-width: 40rem;\n}\n\n[s-container=\"md\"] {\n max-width: 48rem;\n}\n\n[s-container=\"lg\"] {\n max-width: 64rem;\n}\n\n[s-container=\"xl\"] {\n max-width: 80rem;\n}\n\n[s-container=\"full\"] {\n max-width: 100%;\n}\n\n[s-container=\"prose\"] {\n max-width: 65ch;\n}\n\n/* =============================================================================\n POSITION\n ============================================================================= */\n\n[s-position=\"static\"] {\n position: static;\n}\n\n[s-position=\"relative\"] {\n position: relative;\n}\n\n[s-position=\"absolute\"] {\n position: absolute;\n}\n\n[s-position=\"fixed\"] {\n position: fixed;\n}\n\n[s-position=\"sticky\"] {\n position: sticky;\n}\n\n/* Common position patterns */\n[s-inset=\"0\"] {\n inset: 0;\n}\n\n[s-inset=\"auto\"] {\n inset: auto;\n}\n\n/* =============================================================================\n DISPLAY (for non-flex/grid cases)\n ============================================================================= */\n\n[s-display=\"block\"] {\n display: block;\n}\n\n[s-display=\"inline\"] {\n display: inline;\n}\n\n[s-display=\"inline-block\"] {\n display: inline-block;\n}\n\n[s-display=\"contents\"] {\n display: contents;\n}\n\n[s-display=\"inline-flex\"] {\n display: inline-flex;\n}\n\n[s-display=\"inline-grid\"] {\n display: inline-grid;\n}\n","/**\n * Shift CSS - Visibility & State Utilities (Thematic)\n *\n * Semantic attribute selectors for visibility states.\n * These define the \"state\" of elements.\n *\n * Usage:\n * <div s-hidden>Hidden element</div>\n * <span s-sr-only>Screen reader only</span>\n * <div s-hide-on=\"sm\">Hide on small screens</div>\n * <div s-truncate>Truncated text...</div>\n */\n\n/* =============================================================================\n VISIBILITY STATES\n ============================================================================= */\n\n[s-hidden] {\n display: none;\n}\n\n[s-visible] {\n visibility: visible;\n}\n\n[s-invisible] {\n visibility: hidden;\n}\n\n[s-collapse] {\n visibility: collapse;\n}\n\n/* =============================================================================\n SCREEN READER UTILITIES\n ============================================================================= */\n\n/* Visually hidden but accessible to screen readers */\n[s-sr-only] {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* Remove sr-only (for focus states) */\n[s-sr-only=\"focusable\"]:focus,\n[s-sr-only=\"focusable\"]:focus-within {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* =============================================================================\n TEXT OVERFLOW\n ============================================================================= */\n\n[s-truncate] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n[s-truncate=\"2\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n[s-truncate=\"3\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n}\n\n[s-truncate=\"4\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n overflow: hidden;\n}\n\n/* =============================================================================\n OVERFLOW CONTROL\n ============================================================================= */\n\n[s-overflow=\"auto\"] {\n overflow: auto;\n}\n\n[s-overflow=\"hidden\"] {\n overflow: hidden;\n}\n\n[s-overflow=\"visible\"] {\n overflow: visible;\n}\n\n[s-overflow=\"scroll\"] {\n overflow: scroll;\n}\n\n[s-overflow-x=\"auto\"] {\n overflow-x: auto;\n}\n\n[s-overflow-x=\"hidden\"] {\n overflow-x: hidden;\n}\n\n[s-overflow-y=\"auto\"] {\n overflow-y: auto;\n}\n\n[s-overflow-y=\"hidden\"] {\n overflow-y: hidden;\n}\n\n/* =============================================================================\n RESPONSIVE VISIBILITY\n ============================================================================= */\n\n/* Hide on breakpoints */\n@media (width < 640px) {\n [s-hide-on~=\"sm\"] {\n display: none;\n }\n}\n\n@media (width >= 640px) and (width < 768px) {\n [s-hide-on~=\"md\"] {\n display: none;\n }\n}\n\n@media (width >= 768px) and (width < 1024px) {\n [s-hide-on~=\"lg\"] {\n display: none;\n }\n}\n\n@media (width >= 1024px) {\n [s-hide-on~=\"xl\"] {\n display: none;\n }\n}\n\n/* Show only on breakpoints */\n@media (width >= 640px) {\n [s-show-on~=\"sm\"] {\n display: none;\n }\n}\n\n@media (width < 640px), (width >= 768px) {\n [s-show-on~=\"md\"] {\n display: none;\n }\n}\n\n@media (width < 768px), (width >= 1024px) {\n [s-show-on~=\"lg\"] {\n display: none;\n }\n}\n\n@media (width < 1024px) {\n [s-show-on~=\"xl\"] {\n display: none;\n }\n}\n\n/* =============================================================================\n POINTER EVENTS\n ============================================================================= */\n\n[s-pointer=\"none\"] {\n pointer-events: none;\n}\n\n[s-pointer=\"auto\"] {\n pointer-events: auto;\n}\n\n/* =============================================================================\n USER SELECT\n ============================================================================= */\n\n[s-select=\"none\"] {\n user-select: none;\n}\n\n[s-select=\"text\"] {\n user-select: text;\n}\n\n[s-select=\"all\"] {\n user-select: all;\n}\n\n[s-select=\"auto\"] {\n user-select: auto;\n}\n\n/* =============================================================================\n ISOLATION (for stacking contexts)\n ============================================================================= */\n\n[s-isolate] {\n isolation: isolate;\n}\n\n[s-isolate=\"auto\"] {\n isolation: auto;\n}\n","/**\n * Shift CSS - Card Component\n *\n * Flexible card component with header, body, footer sections.\n * Uses semantic attribute selectors and supports container queries.\n *\n * Usage:\n * <article s-card>Basic card content</article>\n * <article s-card s-surface=\"raised\">Elevated card</article>\n * <article s-card s-interactive>Clickable card</article>\n */\n\n/* Base card - zero specificity for easy overrides */\n:where([s-card]) {\n /* Card CSS properties (customization points) */\n --_card-bg: var(--s-surface-raised);\n --_card-border: var(--s-border-muted);\n --_card-radius: var(--s-radius-xl);\n --_card-shadow: var(--s-shadow-base);\n --_card-padding: var(--s-space-4);\n\n container-type: inline-size;\n\n display: flex;\n flex-direction: column;\n\n background-color: var(--_card-bg);\n border: 1px solid var(--_card-border);\n border-radius: var(--_card-radius);\n box-shadow: var(--_card-shadow);\n overflow: hidden;\n\n /* Auto-contrast text */\n color: var(--s-text-primary);\n\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_card-bg) clamp(0.15, calc((0.6 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n}\n\n/* =============================================================================\n CARD SECTIONS\n ============================================================================= */\n\n[s-card-header] {\n padding: var(--_card-padding, var(--s-space-4));\n border-bottom: 1px solid var(--_card-border, var(--s-border-muted));\n}\n\n[s-card-body] {\n padding: var(--_card-padding, var(--s-space-4));\n flex: 1;\n}\n\n[s-card-footer] {\n padding: var(--_card-padding, var(--s-space-4));\n border-top: 1px solid var(--_card-border, var(--s-border-muted));\n}\n\n/* Card media (image at top) */\n[s-card-media] {\n aspect-ratio: 16 / 9;\n overflow: hidden;\n\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n/* Card title */\n[s-card-title] {\n font-size: var(--s-text-lg);\n font-weight: var(--s-font-semibold);\n line-height: var(--s-leading-tight);\n margin-bottom: var(--s-space-1);\n}\n\n/* Card subtitle/description */\n[s-card-subtitle] {\n font-size: var(--s-text-sm);\n color: var(--s-text-secondary);\n}\n\n/* =============================================================================\n CARD VARIANTS\n ============================================================================= */\n\n/* Flat card (no shadow) */\n[s-card=\"flat\"] {\n --_card-shadow: none;\n --_card-border: var(--s-border-default);\n}\n\n/* Elevated card */\n[s-card=\"elevated\"],\n[s-card][s-surface=\"raised\"] {\n --_card-shadow: var(--s-shadow-lg);\n --_card-border: transparent;\n}\n\n/* Floating card (high elevation) */\n[s-card][s-surface=\"floating\"] {\n --_card-shadow: var(--s-shadow-xl);\n --_card-border: transparent;\n}\n\n/* Outline card */\n[s-card=\"outline\"] {\n --_card-shadow: none;\n --_card-border: var(--s-border-strong);\n --_card-bg: transparent;\n}\n\n/* =============================================================================\n CARD MODIFIERS\n ============================================================================= */\n\n/* Interactive card */\n[s-card][s-interactive] {\n cursor: pointer;\n transition:\n transform var(--s-duration-200) var(--s-ease-out),\n box-shadow var(--s-duration-200) var(--s-ease-out);\n\n &:hover {\n transform: translateY(-4px);\n --_card-shadow: var(--s-shadow-xl);\n }\n\n &:active {\n transform: translateY(-2px);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n}\n\n/* Card with link overlay */\n[s-card][s-link] {\n position: relative;\n\n & a::after {\n content: \"\";\n position: absolute;\n inset: 0;\n }\n}\n\n/* Horizontal card layout */\n[s-card][s-horizontal] {\n flex-direction: row;\n\n & [s-card-media] {\n aspect-ratio: 1;\n width: 33%;\n flex-shrink: 0;\n }\n}\n\n/* Container query: Stack horizontal cards on small containers */\n@container (max-width: 24rem) {\n [s-card][s-horizontal] {\n flex-direction: column;\n\n & [s-card-media] {\n width: 100%;\n aspect-ratio: 16 / 9;\n }\n }\n}\n\n/* =============================================================================\n CARD SIZE VARIANTS\n ============================================================================= */\n\n[s-card][s-size=\"sm\"] {\n --_card-padding: var(--s-space-3);\n --_card-radius: var(--s-radius-lg);\n}\n\n[s-card][s-size=\"lg\"] {\n --_card-padding: var(--s-space-6);\n}\n\n/* Feature card (centered, larger padding) */\n[s-card=\"feature\"] {\n text-align: center;\n --_card-padding: var(--s-space-6);\n}\n\n[s-card-icon] {\n font-size: var(--s-text-4xl);\n margin-bottom: var(--s-space-4);\n}\n\n/* =============================================================================\n CARD LAYOUTS\n ============================================================================= */\n\n/* Card grid */\n[s-card-grid] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));\n gap: var(--s-space-4);\n}\n\n/* Card stack (vertical list) */\n[s-card-stack] {\n display: flex;\n flex-direction: column;\n gap: var(--s-space-4);\n}\n","/**\n * Shift CSS - Modern Reset\n *\n * A modern CSS reset optimized for:\n * - Accessibility\n * - Fluid typography\n * - Sensible defaults\n */\n\n/* Box sizing */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* Remove default margins */\n* {\n margin: 0;\n}\n\n/* Fluid typography and smooth scrolling */\nhtml {\n /* Enable light-dark() function for automatic theming */\n color-scheme: light dark;\n\n /* Fluid base font size: 15px at 320px → 16px at 1280px */\n font-size: clamp(0.9375rem, 0.875rem + 0.25vi, 1rem);\n\n /* Smooth scrolling for users who haven't disabled it */\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n\n /* Better text rendering */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n/* Body defaults */\nbody {\n line-height: 1.5;\n min-height: 100dvh;\n font-family: var(--s-font-sans, ui-sans-serif, system-ui, sans-serif);\n background-color: var(--s-surface-base);\n color: var(--s-text-primary);\n}\n\n/* Improved media defaults */\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n/* Inherit fonts for form controls */\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n color: inherit;\n}\n\n/* Remove built-in button styles */\nbutton {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n/* Text overflow handling */\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n}\n\n/* Heading line heights */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n line-height: 1.2;\n text-wrap: balance;\n}\n\n/* Paragraph text wrapping */\np {\n text-wrap: pretty;\n}\n\n/* Remove list styles */\nul,\nol {\n list-style: none;\n padding: 0;\n}\n\n/* Links */\na {\n color: var(--s-interactive-primary);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n/* Focus styles for accessibility */\n:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n}\n\n/* Remove focus outline for mouse users */\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n/* Stacking context for app root */\n#root,\n#__next,\n#app {\n isolation: isolate;\n min-height: 100dvh;\n}\n\n/* Table defaults */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/* Pre/code defaults */\npre,\ncode {\n font-family: var(--s-font-mono, ui-monospace, monospace);\n}\n\npre {\n overflow-x: auto;\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: more) {\n * {\n border-color: currentColor !important;\n }\n}\n\n/* Print styles */\n@media print {\n *,\n *::before,\n *::after {\n background: transparent !important;\n color: #000 !important;\n box-shadow: none !important;\n text-shadow: none !important;\n }\n\n a,\n a:visited {\n text-decoration: underline;\n }\n\n a[href]::after {\n content: \" (\" attr(href) \")\";\n }\n\n pre {\n white-space: pre-wrap !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n","/**\n * Shift CSS - Spacing Utilities\n *\n * Margin, padding, and gap utility classes.\n * Uses spacing tokens for consistency.\n * Namespaced with `s-` prefix.\n */\n\n/* Margin utilities */\n.s-m-0 {\n margin: 0;\n}\n.s-m-1 {\n margin: var(--s-space-1);\n}\n.s-m-2 {\n margin: var(--s-space-2);\n}\n.s-m-3 {\n margin: var(--s-space-3);\n}\n.s-m-4 {\n margin: var(--s-space-4);\n}\n.s-m-5 {\n margin: var(--s-space-5);\n}\n.s-m-6 {\n margin: var(--s-space-6);\n}\n.s-m-8 {\n margin: var(--s-space-8);\n}\n.s-m-10 {\n margin: var(--s-space-10);\n}\n.s-m-12 {\n margin: var(--s-space-12);\n}\n.s-m-auto {\n margin: auto;\n}\n\n/* Margin X (horizontal) */\n.s-mx-0 {\n margin-inline: 0;\n}\n.s-mx-1 {\n margin-inline: var(--s-space-1);\n}\n.s-mx-2 {\n margin-inline: var(--s-space-2);\n}\n.s-mx-3 {\n margin-inline: var(--s-space-3);\n}\n.s-mx-4 {\n margin-inline: var(--s-space-4);\n}\n.s-mx-5 {\n margin-inline: var(--s-space-5);\n}\n.s-mx-6 {\n margin-inline: var(--s-space-6);\n}\n.s-mx-8 {\n margin-inline: var(--s-space-8);\n}\n.s-mx-auto {\n margin-inline: auto;\n}\n\n/* Margin Y (vertical) */\n.s-my-0 {\n margin-block: 0;\n}\n.s-my-1 {\n margin-block: var(--s-space-1);\n}\n.s-my-2 {\n margin-block: var(--s-space-2);\n}\n.s-my-3 {\n margin-block: var(--s-space-3);\n}\n.s-my-4 {\n margin-block: var(--s-space-4);\n}\n.s-my-5 {\n margin-block: var(--s-space-5);\n}\n.s-my-6 {\n margin-block: var(--s-space-6);\n}\n.s-my-8 {\n margin-block: var(--s-space-8);\n}\n.s-my-auto {\n margin-block: auto;\n}\n\n/* Margin top */\n.s-mt-0 {\n margin-top: 0;\n}\n.s-mt-1 {\n margin-top: var(--s-space-1);\n}\n.s-mt-2 {\n margin-top: var(--s-space-2);\n}\n.s-mt-3 {\n margin-top: var(--s-space-3);\n}\n.s-mt-4 {\n margin-top: var(--s-space-4);\n}\n.s-mt-5 {\n margin-top: var(--s-space-5);\n}\n.s-mt-6 {\n margin-top: var(--s-space-6);\n}\n.s-mt-8 {\n margin-top: var(--s-space-8);\n}\n.s-mt-auto {\n margin-top: auto;\n}\n\n/* Margin bottom */\n.s-mb-0 {\n margin-bottom: 0;\n}\n.s-mb-1 {\n margin-bottom: var(--s-space-1);\n}\n.s-mb-2 {\n margin-bottom: var(--s-space-2);\n}\n.s-mb-3 {\n margin-bottom: var(--s-space-3);\n}\n.s-mb-4 {\n margin-bottom: var(--s-space-4);\n}\n.s-mb-5 {\n margin-bottom: var(--s-space-5);\n}\n.s-mb-6 {\n margin-bottom: var(--s-space-6);\n}\n.s-mb-8 {\n margin-bottom: var(--s-space-8);\n}\n.s-mb-auto {\n margin-bottom: auto;\n}\n\n/* Margin left */\n.s-ml-0 {\n margin-left: 0;\n}\n.s-ml-1 {\n margin-left: var(--s-space-1);\n}\n.s-ml-2 {\n margin-left: var(--s-space-2);\n}\n.s-ml-3 {\n margin-left: var(--s-space-3);\n}\n.s-ml-4 {\n margin-left: var(--s-space-4);\n}\n.s-ml-auto {\n margin-left: auto;\n}\n\n/* Margin right */\n.s-mr-0 {\n margin-right: 0;\n}\n.s-mr-1 {\n margin-right: var(--s-space-1);\n}\n.s-mr-2 {\n margin-right: var(--s-space-2);\n}\n.s-mr-3 {\n margin-right: var(--s-space-3);\n}\n.s-mr-4 {\n margin-right: var(--s-space-4);\n}\n.s-mr-auto {\n margin-right: auto;\n}\n\n/* Padding utilities */\n.s-p-0 {\n padding: 0;\n}\n.s-p-1 {\n padding: var(--s-space-1);\n}\n.s-p-2 {\n padding: var(--s-space-2);\n}\n.s-p-3 {\n padding: var(--s-space-3);\n}\n.s-p-4 {\n padding: var(--s-space-4);\n}\n.s-p-5 {\n padding: var(--s-space-5);\n}\n.s-p-6 {\n padding: var(--s-space-6);\n}\n.s-p-8 {\n padding: var(--s-space-8);\n}\n.s-p-10 {\n padding: var(--s-space-10);\n}\n.s-p-12 {\n padding: var(--s-space-12);\n}\n\n/* Padding X (horizontal) */\n.s-px-0 {\n padding-inline: 0;\n}\n.s-px-1 {\n padding-inline: var(--s-space-1);\n}\n.s-px-2 {\n padding-inline: var(--s-space-2);\n}\n.s-px-3 {\n padding-inline: var(--s-space-3);\n}\n.s-px-4 {\n padding-inline: var(--s-space-4);\n}\n.s-px-5 {\n padding-inline: var(--s-space-5);\n}\n.s-px-6 {\n padding-inline: var(--s-space-6);\n}\n.s-px-8 {\n padding-inline: var(--s-space-8);\n}\n\n/* Padding Y (vertical) */\n.s-py-0 {\n padding-block: 0;\n}\n.s-py-1 {\n padding-block: var(--s-space-1);\n}\n.s-py-2 {\n padding-block: var(--s-space-2);\n}\n.s-py-3 {\n padding-block: var(--s-space-3);\n}\n.s-py-4 {\n padding-block: var(--s-space-4);\n}\n.s-py-5 {\n padding-block: var(--s-space-5);\n}\n.s-py-6 {\n padding-block: var(--s-space-6);\n}\n.s-py-8 {\n padding-block: var(--s-space-8);\n}\n\n/* Padding top */\n.s-pt-0 {\n padding-top: 0;\n}\n.s-pt-1 {\n padding-top: var(--s-space-1);\n}\n.s-pt-2 {\n padding-top: var(--s-space-2);\n}\n.s-pt-3 {\n padding-top: var(--s-space-3);\n}\n.s-pt-4 {\n padding-top: var(--s-space-4);\n}\n.s-pt-5 {\n padding-top: var(--s-space-5);\n}\n.s-pt-6 {\n padding-top: var(--s-space-6);\n}\n.s-pt-8 {\n padding-top: var(--s-space-8);\n}\n\n/* Padding bottom */\n.s-pb-0 {\n padding-bottom: 0;\n}\n.s-pb-1 {\n padding-bottom: var(--s-space-1);\n}\n.s-pb-2 {\n padding-bottom: var(--s-space-2);\n}\n.s-pb-3 {\n padding-bottom: var(--s-space-3);\n}\n.s-pb-4 {\n padding-bottom: var(--s-space-4);\n}\n.s-pb-5 {\n padding-bottom: var(--s-space-5);\n}\n.s-pb-6 {\n padding-bottom: var(--s-space-6);\n}\n.s-pb-8 {\n padding-bottom: var(--s-space-8);\n}\n\n/* Padding left */\n.s-pl-0 {\n padding-left: 0;\n}\n.s-pl-1 {\n padding-left: var(--s-space-1);\n}\n.s-pl-2 {\n padding-left: var(--s-space-2);\n}\n.s-pl-3 {\n padding-left: var(--s-space-3);\n}\n.s-pl-4 {\n padding-left: var(--s-space-4);\n}\n\n/* Padding right */\n.s-pr-0 {\n padding-right: 0;\n}\n.s-pr-1 {\n padding-right: var(--s-space-1);\n}\n.s-pr-2 {\n padding-right: var(--s-space-2);\n}\n.s-pr-3 {\n padding-right: var(--s-space-3);\n}\n.s-pr-4 {\n padding-right: var(--s-space-4);\n}\n\n/* Gap utilities */\n.s-gap-0 {\n gap: 0;\n}\n.s-gap-1 {\n gap: var(--s-space-1);\n}\n.s-gap-2 {\n gap: var(--s-space-2);\n}\n.s-gap-3 {\n gap: var(--s-space-3);\n}\n.s-gap-4 {\n gap: var(--s-space-4);\n}\n.s-gap-5 {\n gap: var(--s-space-5);\n}\n.s-gap-6 {\n gap: var(--s-space-6);\n}\n.s-gap-8 {\n gap: var(--s-space-8);\n}\n.s-gap-10 {\n gap: var(--s-space-10);\n}\n.s-gap-12 {\n gap: var(--s-space-12);\n}\n\n/* Column gap */\n.s-gap-x-0 {\n column-gap: 0;\n}\n.s-gap-x-1 {\n column-gap: var(--s-space-1);\n}\n.s-gap-x-2 {\n column-gap: var(--s-space-2);\n}\n.s-gap-x-3 {\n column-gap: var(--s-space-3);\n}\n.s-gap-x-4 {\n column-gap: var(--s-space-4);\n}\n.s-gap-x-6 {\n column-gap: var(--s-space-6);\n}\n.s-gap-x-8 {\n column-gap: var(--s-space-8);\n}\n\n/* Row gap */\n.s-gap-y-0 {\n row-gap: 0;\n}\n.s-gap-y-1 {\n row-gap: var(--s-space-1);\n}\n.s-gap-y-2 {\n row-gap: var(--s-space-2);\n}\n.s-gap-y-3 {\n row-gap: var(--s-space-3);\n}\n.s-gap-y-4 {\n row-gap: var(--s-space-4);\n}\n.s-gap-y-6 {\n row-gap: var(--s-space-6);\n}\n.s-gap-y-8 {\n row-gap: var(--s-space-8);\n}\n\n/* Space between children (using gap in flex/grid context) */\n.s-space-y-1 > * + * {\n margin-top: var(--s-space-1);\n}\n.s-space-y-2 > * + * {\n margin-top: var(--s-space-2);\n}\n.s-space-y-3 > * + * {\n margin-top: var(--s-space-3);\n}\n.s-space-y-4 > * + * {\n margin-top: var(--s-space-4);\n}\n.s-space-y-6 > * + * {\n margin-top: var(--s-space-6);\n}\n.s-space-y-8 > * + * {\n margin-top: var(--s-space-8);\n}\n\n.s-space-x-1 > * + * {\n margin-left: var(--s-space-1);\n}\n.s-space-x-2 > * + * {\n margin-left: var(--s-space-2);\n}\n.s-space-x-3 > * + * {\n margin-left: var(--s-space-3);\n}\n.s-space-x-4 > * + * {\n margin-left: var(--s-space-4);\n}\n.s-space-x-6 > * + * {\n margin-left: var(--s-space-6);\n}\n.s-space-x-8 > * + * {\n margin-left: var(--s-space-8);\n}\n","/**\n * Shift CSS - Button Component\n *\n * Accessible button styles using semantic attribute selectors.\n * Uses s-btn attribute for variants and s-size for scaling.\n *\n * Usage:\n * <button s-btn=\"primary\">Primary</button>\n * <button s-btn=\"secondary\">Secondary</button>\n * <button s-btn=\"ghost\">Ghost</button>\n * <button s-btn=\"primary\" s-size=\"lg\">Large Primary</button>\n */\n\n/* Base button - zero specificity for easy overrides */\n:where([s-btn]) {\n /* Button CSS properties (customization points) */\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n --_btn-border: transparent;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--s-space-2);\n\n padding: var(--s-space-2) var(--s-space-4);\n border-radius: var(--s-radius-md);\n font-weight: var(--s-font-semibold);\n font-size: var(--s-text-sm);\n line-height: 1;\n white-space: nowrap;\n\n background-color: var(--_btn-bg);\n color: var(--_btn-text);\n border: 1px solid var(--_btn-border);\n\n /* Auto-contrast for custom backgrounds */\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_btn-bg) clamp(0.15, calc((0.6 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n\n @supports (color: contrast-color(red)) {\n color: contrast-color(var(--_btn-bg));\n }\n\n /* Transitions */\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n border-color var(--s-duration-150) var(--s-ease-out),\n transform var(--s-duration-100) var(--s-ease-out);\n\n cursor: pointer;\n user-select: none;\n\n /* Hover state */\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-hover);\n }\n\n /* Active state */\n &:active:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-active);\n transform: scale(0.98);\n }\n\n /* Focus state */\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n /* Disabled state */\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n\n/* =============================================================================\n BUTTON VARIANTS (0,1,0 specificity - slightly sticky)\n ============================================================================= */\n\n/* Primary - default, explicit declaration */\n[s-btn=\"primary\"] {\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-hover);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-active);\n }\n}\n\n/* Secondary */\n[s-btn=\"secondary\"] {\n --_btn-bg: var(--s-surface-raised);\n --_btn-text: var(--s-text-primary);\n --_btn-border: var(--s-border-default);\n\n /* Override auto-contrast */\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-surface-sunken);\n }\n}\n\n/* Ghost - transparent background */\n[s-btn=\"ghost\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n\n /* Override auto-contrast for transparent bg */\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-surface-sunken);\n }\n}\n\n/* Link - looks like a link */\n[s-btn=\"link\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n --_btn-border: transparent;\n\n color: var(--_btn-text);\n text-decoration: underline;\n text-underline-offset: 2px;\n\n &:hover:not(:disabled) {\n --_btn-text: var(--s-interactive-primary-hover);\n color: var(--_btn-text);\n }\n}\n\n/* Outline */\n[s-btn=\"outline\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n --_btn-border: var(--s-interactive-primary);\n\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n color: var(--_btn-text);\n }\n}\n\n/* =============================================================================\n STATE VARIANTS\n ============================================================================= */\n\n/* Danger */\n[s-btn=\"danger\"] {\n --_btn-bg: var(--s-state-danger);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-danger-800);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-danger-900);\n }\n}\n\n/* Success */\n[s-btn=\"success\"] {\n --_btn-bg: var(--s-state-success);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-success-800);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-success-900);\n }\n}\n\n/* Warning */\n[s-btn=\"warning\"] {\n --_btn-bg: var(--s-state-warning);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-warning-800);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-warning-900);\n }\n}\n\n/* =============================================================================\n SIZE MODIFIERS (composable via s-size attribute)\n ============================================================================= */\n\n[s-btn][s-size=\"sm\"] {\n padding: var(--s-space-1) var(--s-space-3);\n font-size: var(--s-text-xs);\n}\n\n[s-btn][s-size=\"lg\"] {\n padding: var(--s-space-3) var(--s-space-6);\n font-size: var(--s-text-base);\n}\n\n[s-btn][s-size=\"xl\"] {\n padding: var(--s-space-4) var(--s-space-8);\n font-size: var(--s-text-lg);\n}\n\n/* =============================================================================\n SPECIAL STATES\n ============================================================================= */\n\n/* Icon-only button */\n[s-btn][s-icon] {\n padding: var(--s-space-2);\n aspect-ratio: 1;\n}\n\n/* Full-width button */\n[s-btn][s-block] {\n width: 100%;\n}\n\n/* Loading state */\n[s-btn][s-loading] {\n position: relative;\n color: transparent;\n pointer-events: none;\n\n &::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 1em;\n height: 1em;\n border: 2px solid var(--s-text-inverse);\n border-right-color: transparent;\n border-radius: 50%;\n animation: s-btn-spin 0.6s linear infinite;\n }\n}\n\n@keyframes s-btn-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* =============================================================================\n BUTTON GROUP\n ============================================================================= */\n\n[s-btn-group] {\n display: inline-flex;\n\n & > [s-btn] {\n border-radius: 0;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n }\n\n &:not(:last-child) {\n border-right: none;\n }\n }\n}\n","/**\n * Shift CSS - Surface Component\n *\n * Adaptive surface with automatic contrast text color.\n * Uses semantic attribute selectors for depth/layering.\n *\n * Usage:\n * <section s-surface>Default flat surface</section>\n * <section s-surface=\"raised\">Elevated card-like surface</section>\n * <section s-surface=\"sunken\">Recessed input-like surface</section>\n * <section s-surface=\"floating\">High elevation overlay</section>\n */\n\n/* Base surface - zero specificity for easy overrides */\n:where([s-surface]) {\n /* Enable container queries */\n container-type: inline-size;\n\n /* Surface CSS properties (customization points) */\n --_surface-bg: var(--s-surface-base);\n --_surface-padding: var(--s-space-4);\n --_surface-radius: var(--s-radius-lg);\n\n background-color: var(--_surface-bg);\n padding: var(--_surface-padding);\n border-radius: var(--_surface-radius);\n\n /**\n * AUTO-CONTRAST TEXT COLOR\n *\n * Strategy (best to fallback):\n * 1. contrast-color() - CSS Color Level 6 (Chrome Canary, Safari TP)\n * 2. Relative color syntax - Extract lightness, threshold at L=0.6\n * 3. Semantic token fallback - Pre-defined light-dark() value\n */\n\n /* FALLBACK 1: Semantic token (works everywhere) */\n color: var(--s-text-primary);\n\n /* FALLBACK 2: Relative color syntax (2024+ browsers) */\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_surface-bg)\n /* If L < 0.6, use light text (0.95); otherwise dark text (0.15) */\n clamp(0.15, calc((0.6 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n\n /* PRIMARY: contrast-color() (CSS Color Level 6 - 2025+ browsers) */\n @supports (color: contrast-color(red)) {\n color: contrast-color(var(--_surface-bg));\n }\n}\n\n/* =============================================================================\n SURFACE DEPTH VARIANTS\n ============================================================================= */\n\n/* Flat - default, explicit declaration */\n[s-surface=\"flat\"] {\n --_surface-bg: var(--s-surface-base);\n}\n\n/* Sunken - recessed appearance */\n[s-surface=\"sunken\"] {\n --_surface-bg: var(--s-surface-sunken);\n box-shadow: var(--s-shadow-inner);\n}\n\n/* Raised - elevated card-like appearance */\n[s-surface=\"raised\"] {\n --_surface-bg: var(--s-surface-raised);\n box-shadow: var(--s-shadow-md);\n}\n\n/* Floating - high elevation, for overlays and modals */\n[s-surface=\"floating\"] {\n --_surface-bg: var(--s-surface-raised);\n box-shadow: var(--s-shadow-xl);\n}\n\n/* =============================================================================\n SURFACE MODIFIERS\n ============================================================================= */\n\n/* Bordered surface */\n[s-surface][s-bordered] {\n border: 1px solid var(--s-border-default);\n}\n\n/* Interactive surface (hoverable) */\n[s-surface][s-interactive] {\n cursor: pointer;\n transition:\n transform var(--s-duration-150) var(--s-ease-out),\n box-shadow var(--s-duration-150) var(--s-ease-out);\n\n &:hover {\n transform: translateY(-2px);\n box-shadow: var(--s-shadow-lg);\n }\n\n &:active {\n transform: translateY(0);\n box-shadow: var(--s-shadow-sm);\n }\n}\n\n/* =============================================================================\n COLOR VARIANTS\n ============================================================================= */\n\n/* Brand color surfaces */\n[s-surface=\"primary\"] {\n --_surface-bg: var(--s-primary-500);\n}\n\n[s-surface=\"secondary\"] {\n --_surface-bg: var(--s-secondary-500);\n}\n\n[s-surface=\"accent\"] {\n --_surface-bg: var(--s-accent-500);\n}\n\n/* =============================================================================\n STATE SURFACES (for alerts, notifications)\n ============================================================================= */\n\n[s-surface=\"success\"] {\n --_surface-bg: var(--s-state-success-bg);\n border-left: 4px solid var(--s-state-success);\n color: var(--s-text-primary);\n}\n\n[s-surface=\"warning\"] {\n --_surface-bg: var(--s-state-warning-bg);\n border-left: 4px solid var(--s-state-warning);\n color: var(--s-text-primary);\n}\n\n[s-surface=\"danger\"] {\n --_surface-bg: var(--s-state-danger-bg);\n border-left: 4px solid var(--s-state-danger);\n color: var(--s-text-primary);\n}\n\n/* =============================================================================\n CONTAINER QUERY RESPONSIVE PADDING\n ============================================================================= */\n\n@container (max-width: 20rem) {\n :where([s-surface]) {\n --_surface-padding: var(--s-space-3);\n }\n}\n\n@container (min-width: 40rem) {\n :where([s-surface]) {\n --_surface-padding: var(--s-space-6);\n }\n}\n","/**\n * Shift CSS - Input Component\n *\n * Form input styles using semantic attribute selectors.\n *\n * Usage:\n * <input s-input type=\"text\" placeholder=\"Enter text\">\n * <input s-input s-size=\"lg\" type=\"email\">\n * <textarea s-input>Content</textarea>\n * <select s-input><option>Choose...</option></select>\n */\n\n/* Base input - zero specificity for easy overrides */\n:where([s-input]) {\n /* Input CSS properties (customization points) */\n --_input-bg: var(--s-surface-base);\n --_input-border: var(--s-border-default);\n --_input-text: var(--s-text-primary);\n --_input-placeholder: var(--s-text-tertiary);\n --_input-radius: var(--s-radius-md);\n\n appearance: none;\n display: block;\n width: 100%;\n\n padding: var(--s-space-2) var(--s-space-3);\n background-color: var(--_input-bg);\n border: 2px solid var(--_input-border);\n border-radius: var(--_input-radius);\n color: var(--_input-text);\n font-size: var(--s-text-sm);\n line-height: var(--s-leading-normal);\n\n transition:\n border-color var(--s-duration-150) var(--s-ease-out),\n box-shadow var(--s-duration-150) var(--s-ease-out);\n\n &::placeholder {\n color: var(--_input-placeholder);\n }\n\n /* Hover state */\n &:hover:not(:disabled):not(:focus) {\n --_input-border: var(--s-border-strong);\n }\n\n /* Focus state */\n &:focus {\n --_input-border: var(--s-interactive-primary);\n outline: none;\n box-shadow: 0 0 0 3px oklch(from var(--s-interactive-primary) l c h / 0.2);\n }\n\n /* Disabled state */\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--s-surface-sunken);\n }\n\n /* Invalid state */\n &:invalid:not(:placeholder-shown),\n &[aria-invalid=\"true\"] {\n --_input-border: var(--s-state-danger);\n\n &:focus {\n box-shadow: 0 0 0 3px oklch(from var(--s-state-danger) l c h / 0.2);\n }\n }\n}\n\n/* =============================================================================\n INPUT SIZE VARIANTS\n ============================================================================= */\n\n[s-input][s-size=\"sm\"] {\n padding: var(--s-space-1) var(--s-space-2);\n font-size: var(--s-text-xs);\n}\n\n[s-input][s-size=\"lg\"] {\n padding: var(--s-space-3) var(--s-space-4);\n font-size: var(--s-text-base);\n}\n\n/* =============================================================================\n SPECIFIC INPUT TYPES\n ============================================================================= */\n\n/* Textarea */\ntextarea[s-input] {\n min-height: 6rem;\n resize: vertical;\n}\n\n/* Select */\nselect[s-input] {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--s-space-3) center;\n padding-right: var(--s-space-10);\n}\n\n/* =============================================================================\n INPUT GROUP (with addons)\n ============================================================================= */\n\n[s-input-group] {\n display: flex;\n\n & > [s-input] {\n flex: 1;\n min-width: 0;\n border-radius: 0;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n }\n }\n\n & > [s-input-addon] {\n display: flex;\n align-items: center;\n padding: var(--s-space-2) var(--s-space-3);\n background-color: var(--s-surface-sunken);\n border: 2px solid var(--s-border-default);\n color: var(--s-text-secondary);\n font-size: var(--s-text-sm);\n white-space: nowrap;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n border-right: none;\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n border-left: none;\n }\n }\n}\n\n/* =============================================================================\n FORM FIELD WRAPPER\n ============================================================================= */\n\n[s-field] {\n display: flex;\n flex-direction: column;\n gap: var(--s-space-1);\n}\n\n[s-field-label] {\n font-size: var(--s-text-sm);\n font-weight: var(--s-font-medium);\n color: var(--s-text-primary);\n}\n\n[s-field-hint] {\n font-size: var(--s-text-xs);\n color: var(--s-text-secondary);\n}\n\n[s-field-error] {\n font-size: var(--s-text-xs);\n color: var(--s-state-danger);\n}\n\n/* =============================================================================\n CHECKBOX / RADIO\n ============================================================================= */\n\n[s-checkbox],\n[s-radio] {\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n cursor: pointer;\n\n & input {\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--s-border-default);\n background-color: var(--s-surface-base);\n cursor: pointer;\n\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n border-color var(--s-duration-150) var(--s-ease-out);\n\n &:checked {\n background-color: var(--s-interactive-primary);\n border-color: var(--s-interactive-primary);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n\n[s-checkbox] input {\n border-radius: var(--s-radius-sm);\n\n &:checked {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0.75rem;\n }\n}\n\n[s-radio] input {\n border-radius: 50%;\n\n &:checked {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n }\n}\n\n/* =============================================================================\n TOGGLE SWITCH\n ============================================================================= */\n\n[s-toggle] {\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n cursor: pointer;\n\n & input {\n appearance: none;\n width: 2.5rem;\n height: 1.5rem;\n border-radius: 9999px;\n background-color: var(--s-border-default);\n cursor: pointer;\n position: relative;\n\n transition: background-color var(--s-duration-200) var(--s-ease-out);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: calc(1.5rem - 4px);\n height: calc(1.5rem - 4px);\n border-radius: 50%;\n background-color: var(--s-surface-base);\n box-shadow: var(--s-shadow-sm);\n\n transition: transform var(--s-duration-200) var(--s-ease-out);\n }\n\n &:checked {\n background-color: var(--s-interactive-primary);\n\n &::after {\n transform: translateX(1rem);\n }\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n","/**\n * Shift CSS - Flex/Grid Atomic Utilities\n *\n * Atomic utilities for flex/grid children and sizing.\n * Structural layout patterns are in layout.css (attributes).\n * Namespaced with `s-` prefix.\n */\n\n/* =============================================================================\n FLEX ITEM UTILITIES\n ============================================================================= */\n\n/* Flex shorthand */\n.s-flex-1 {\n flex: 1 1 0%;\n}\n.s-flex-auto {\n flex: 1 1 auto;\n}\n.s-flex-initial {\n flex: 0 1 auto;\n}\n.s-flex-none {\n flex: none;\n}\n\n/* Flex grow */\n.s-grow {\n flex-grow: 1;\n}\n.s-grow-0 {\n flex-grow: 0;\n}\n\n/* Flex shrink */\n.s-shrink {\n flex-shrink: 1;\n}\n.s-shrink-0 {\n flex-shrink: 0;\n}\n\n/* =============================================================================\n ALIGN SELF (for flex/grid children)\n ============================================================================= */\n\n.s-self-auto {\n align-self: auto;\n}\n.s-self-start {\n align-self: flex-start;\n}\n.s-self-end {\n align-self: flex-end;\n}\n.s-self-center {\n align-self: center;\n}\n.s-self-stretch {\n align-self: stretch;\n}\n.s-self-baseline {\n align-self: baseline;\n}\n\n/* =============================================================================\n PLACE UTILITIES (shorthand for align + justify)\n ============================================================================= */\n\n.s-place-items-start {\n place-items: start;\n}\n.s-place-items-end {\n place-items: end;\n}\n.s-place-items-center {\n place-items: center;\n}\n.s-place-items-stretch {\n place-items: stretch;\n}\n\n.s-place-content-start {\n place-content: start;\n}\n.s-place-content-end {\n place-content: end;\n}\n.s-place-content-center {\n place-content: center;\n}\n.s-place-content-between {\n place-content: space-between;\n}\n.s-place-content-around {\n place-content: space-around;\n}\n.s-place-content-evenly {\n place-content: space-evenly;\n}\n\n/* =============================================================================\n ORDER\n ============================================================================= */\n\n.s-order-first {\n order: -9999;\n}\n.s-order-last {\n order: 9999;\n}\n.s-order-none {\n order: 0;\n}\n.s-order-1 {\n order: 1;\n}\n.s-order-2 {\n order: 2;\n}\n.s-order-3 {\n order: 3;\n}\n\n/* =============================================================================\n WIDTH\n ============================================================================= */\n\n.s-w-full {\n width: 100%;\n}\n.s-w-screen {\n width: 100vw;\n}\n.s-w-min {\n width: min-content;\n}\n.s-w-max {\n width: max-content;\n}\n.s-w-fit {\n width: fit-content;\n}\n.s-w-auto {\n width: auto;\n}\n\n/* =============================================================================\n HEIGHT\n ============================================================================= */\n\n.s-h-full {\n height: 100%;\n}\n.s-h-screen {\n height: 100vh;\n}\n.s-h-screen-dvh {\n height: 100dvh;\n}\n.s-h-min {\n height: min-content;\n}\n.s-h-max {\n height: max-content;\n}\n.s-h-fit {\n height: fit-content;\n}\n.s-h-auto {\n height: auto;\n}\n\n/* =============================================================================\n MIN/MAX WIDTH\n ============================================================================= */\n\n.s-min-w-0 {\n min-width: 0;\n}\n.s-min-w-full {\n min-width: 100%;\n}\n.s-max-w-none {\n max-width: none;\n}\n.s-max-w-xs {\n max-width: 20rem;\n}\n.s-max-w-sm {\n max-width: 24rem;\n}\n.s-max-w-md {\n max-width: 28rem;\n}\n.s-max-w-lg {\n max-width: 32rem;\n}\n.s-max-w-xl {\n max-width: 36rem;\n}\n.s-max-w-2xl {\n max-width: 42rem;\n}\n.s-max-w-3xl {\n max-width: 48rem;\n}\n.s-max-w-4xl {\n max-width: 56rem;\n}\n.s-max-w-5xl {\n max-width: 64rem;\n}\n.s-max-w-6xl {\n max-width: 72rem;\n}\n.s-max-w-7xl {\n max-width: 80rem;\n}\n.s-max-w-full {\n max-width: 100%;\n}\n.s-max-w-prose {\n max-width: 65ch;\n}\n\n/* =============================================================================\n MIN/MAX HEIGHT\n ============================================================================= */\n\n.s-min-h-0 {\n min-height: 0;\n}\n.s-min-h-full {\n min-height: 100%;\n}\n.s-min-h-screen {\n min-height: 100vh;\n}\n.s-min-h-screen-dvh {\n min-height: 100dvh;\n}\n.s-max-h-full {\n max-height: 100%;\n}\n.s-max-h-screen {\n max-height: 100vh;\n}\n\n/* =============================================================================\n ASPECT RATIO\n ============================================================================= */\n\n.s-aspect-auto {\n aspect-ratio: auto;\n}\n.s-aspect-square {\n aspect-ratio: 1 / 1;\n}\n.s-aspect-video {\n aspect-ratio: 16 / 9;\n}\n.s-aspect-4-3 {\n aspect-ratio: 4 / 3;\n}\n\n/* =============================================================================\n Z-INDEX\n ============================================================================= */\n\n.s-z-0 {\n z-index: 0;\n}\n.s-z-10 {\n z-index: 10;\n}\n.s-z-20 {\n z-index: 20;\n}\n.s-z-30 {\n z-index: 30;\n}\n.s-z-40 {\n z-index: 40;\n}\n.s-z-50 {\n z-index: 50;\n}\n.s-z-auto {\n z-index: auto;\n}\n","/**\n * Shift CSS - Typography Utilities\n *\n * Text styling, alignment, and color utilities.\n * Namespaced with `s-` prefix.\n */\n\n/* =============================================================================\n FONT FAMILY\n ============================================================================= */\n\n.s-font-sans {\n font-family: var(--s-font-sans);\n}\n.s-font-serif {\n font-family: var(--s-font-serif);\n}\n.s-font-mono {\n font-family: var(--s-font-mono);\n}\n\n/* =============================================================================\n FONT SIZE\n ============================================================================= */\n\n.s-text-xs {\n font-size: var(--s-text-xs);\n}\n.s-text-sm {\n font-size: var(--s-text-sm);\n}\n.s-text-base {\n font-size: var(--s-text-base);\n}\n.s-text-lg {\n font-size: var(--s-text-lg);\n}\n.s-text-xl {\n font-size: var(--s-text-xl);\n}\n.s-text-2xl {\n font-size: var(--s-text-2xl);\n}\n.s-text-3xl {\n font-size: var(--s-text-3xl);\n}\n.s-text-4xl {\n font-size: var(--s-text-4xl);\n}\n.s-text-5xl {\n font-size: var(--s-text-5xl);\n}\n\n/* =============================================================================\n FONT WEIGHT\n ============================================================================= */\n\n.s-font-thin {\n font-weight: var(--s-font-thin);\n}\n.s-font-extralight {\n font-weight: var(--s-font-extralight);\n}\n.s-font-light {\n font-weight: var(--s-font-light);\n}\n.s-font-normal {\n font-weight: var(--s-font-normal);\n}\n.s-font-medium {\n font-weight: var(--s-font-medium);\n}\n.s-font-semibold {\n font-weight: var(--s-font-semibold);\n}\n.s-font-bold {\n font-weight: var(--s-font-bold);\n}\n.s-font-extrabold {\n font-weight: var(--s-font-extrabold);\n}\n.s-font-black {\n font-weight: var(--s-font-black);\n}\n\n/* =============================================================================\n LINE HEIGHT\n ============================================================================= */\n\n.s-leading-none {\n line-height: var(--s-leading-none);\n}\n.s-leading-tight {\n line-height: var(--s-leading-tight);\n}\n.s-leading-snug {\n line-height: var(--s-leading-snug);\n}\n.s-leading-normal {\n line-height: var(--s-leading-normal);\n}\n.s-leading-relaxed {\n line-height: var(--s-leading-relaxed);\n}\n.s-leading-loose {\n line-height: var(--s-leading-loose);\n}\n\n/* =============================================================================\n LETTER SPACING\n ============================================================================= */\n\n.s-tracking-tighter {\n letter-spacing: var(--s-tracking-tighter);\n}\n.s-tracking-tight {\n letter-spacing: var(--s-tracking-tight);\n}\n.s-tracking-normal {\n letter-spacing: var(--s-tracking-normal);\n}\n.s-tracking-wide {\n letter-spacing: var(--s-tracking-wide);\n}\n.s-tracking-wider {\n letter-spacing: var(--s-tracking-wider);\n}\n.s-tracking-widest {\n letter-spacing: var(--s-tracking-widest);\n}\n\n/* =============================================================================\n TEXT ALIGNMENT\n ============================================================================= */\n\n.s-text-left {\n text-align: left;\n}\n.s-text-center {\n text-align: center;\n}\n.s-text-right {\n text-align: right;\n}\n.s-text-justify {\n text-align: justify;\n}\n.s-text-start {\n text-align: start;\n}\n.s-text-end {\n text-align: end;\n}\n\n/* =============================================================================\n VERTICAL ALIGNMENT\n ============================================================================= */\n\n.s-align-baseline {\n vertical-align: baseline;\n}\n.s-align-top {\n vertical-align: top;\n}\n.s-align-middle {\n vertical-align: middle;\n}\n.s-align-bottom {\n vertical-align: bottom;\n}\n.s-align-text-top {\n vertical-align: text-top;\n}\n.s-align-text-bottom {\n vertical-align: text-bottom;\n}\n.s-align-sub {\n vertical-align: sub;\n}\n.s-align-super {\n vertical-align: super;\n}\n\n/* =============================================================================\n TEXT DECORATION\n ============================================================================= */\n\n.s-underline {\n text-decoration-line: underline;\n}\n.s-overline {\n text-decoration-line: overline;\n}\n.s-line-through {\n text-decoration-line: line-through;\n}\n.s-no-underline {\n text-decoration-line: none;\n}\n\n/* Text decoration style */\n.s-decoration-solid {\n text-decoration-style: solid;\n}\n.s-decoration-double {\n text-decoration-style: double;\n}\n.s-decoration-dotted {\n text-decoration-style: dotted;\n}\n.s-decoration-dashed {\n text-decoration-style: dashed;\n}\n.s-decoration-wavy {\n text-decoration-style: wavy;\n}\n\n/* =============================================================================\n TEXT TRANSFORM\n ============================================================================= */\n\n.s-uppercase {\n text-transform: uppercase;\n}\n.s-lowercase {\n text-transform: lowercase;\n}\n.s-capitalize {\n text-transform: capitalize;\n}\n.s-normal-case {\n text-transform: none;\n}\n\n/* =============================================================================\n TEXT OVERFLOW\n ============================================================================= */\n\n.s-text-ellipsis {\n text-overflow: ellipsis;\n}\n.s-text-clip {\n text-overflow: clip;\n}\n\n/* =============================================================================\n TEXT WRAP\n ============================================================================= */\n\n.s-text-wrap {\n text-wrap: wrap;\n}\n.s-text-nowrap {\n text-wrap: nowrap;\n}\n.s-text-balance {\n text-wrap: balance;\n}\n.s-text-pretty {\n text-wrap: pretty;\n}\n\n/* =============================================================================\n WHITESPACE\n ============================================================================= */\n\n.s-whitespace-normal {\n white-space: normal;\n}\n.s-whitespace-nowrap {\n white-space: nowrap;\n}\n.s-whitespace-pre {\n white-space: pre;\n}\n.s-whitespace-pre-line {\n white-space: pre-line;\n}\n.s-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.s-whitespace-break-spaces {\n white-space: break-spaces;\n}\n\n/* =============================================================================\n WORD BREAK\n ============================================================================= */\n\n.s-break-normal {\n overflow-wrap: normal;\n word-break: normal;\n}\n.s-break-words {\n overflow-wrap: break-word;\n}\n.s-break-all {\n word-break: break-all;\n}\n.s-break-keep {\n word-break: keep-all;\n}\n\n/* =============================================================================\n HYPHENS\n ============================================================================= */\n\n.s-hyphens-none {\n hyphens: none;\n}\n.s-hyphens-manual {\n hyphens: manual;\n}\n.s-hyphens-auto {\n hyphens: auto;\n}\n\n/* =============================================================================\n TEXT COLOR (semantic)\n ============================================================================= */\n\n.s-text-primary {\n color: var(--s-text-primary);\n}\n.s-text-secondary {\n color: var(--s-text-secondary);\n}\n.s-text-tertiary {\n color: var(--s-text-tertiary);\n}\n.s-text-inverse {\n color: var(--s-text-inverse);\n}\n\n/* Text color (status) */\n.s-text-success {\n color: var(--s-state-success);\n}\n.s-text-warning {\n color: var(--s-state-warning);\n}\n.s-text-danger {\n color: var(--s-state-danger);\n}\n\n/* =============================================================================\n LINK STYLING\n ============================================================================= */\n\n.s-link {\n color: var(--s-interactive-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n\n &:hover {\n color: var(--s-interactive-primary-hover);\n }\n}\n\n/* =============================================================================\n LIST STYLES\n ============================================================================= */\n\n.s-list-none {\n list-style-type: none;\n}\n.s-list-disc {\n list-style-type: disc;\n}\n.s-list-decimal {\n list-style-type: decimal;\n}\n.s-list-inside {\n list-style-position: inside;\n}\n.s-list-outside {\n list-style-position: outside;\n}\n\n/* =============================================================================\n OPACITY\n ============================================================================= */\n\n.s-opacity-0 {\n opacity: 0;\n}\n.s-opacity-5 {\n opacity: 0.05;\n}\n.s-opacity-10 {\n opacity: 0.1;\n}\n.s-opacity-20 {\n opacity: 0.2;\n}\n.s-opacity-25 {\n opacity: 0.25;\n}\n.s-opacity-30 {\n opacity: 0.3;\n}\n.s-opacity-40 {\n opacity: 0.4;\n}\n.s-opacity-50 {\n opacity: 0.5;\n}\n.s-opacity-60 {\n opacity: 0.6;\n}\n.s-opacity-70 {\n opacity: 0.7;\n}\n.s-opacity-75 {\n opacity: 0.75;\n}\n.s-opacity-80 {\n opacity: 0.8;\n}\n.s-opacity-90 {\n opacity: 0.9;\n}\n.s-opacity-95 {\n opacity: 0.95;\n}\n.s-opacity-100 {\n opacity: 1;\n}\n"],"names":[]}
package/dist/shift.min.css ADDED
@@ -0,0 +1 @@
1
+ @layer shift.reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{color-scheme:light dark;font-size:clamp(.9375rem,.875rem + .25vi,1rem);@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{min-height:100dvh;line-height:1.5;font-family:var(--s-font-sans,ui-sans-serif,system-ui,sans-serif);background-color:var(--s-surface-base);color:var(--s-text-primary)}img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.2}p{text-wrap:pretty}ul,ol{padding:0;list-style:none}a{color:var(--s-interactive-primary);text-decoration:none;&:hover{text-decoration:underline}}:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}:focus:not(:focus-visible){outline:none}#root,#__next,#app{isolation:isolate;min-height:100dvh}table{border-collapse:collapse;border-spacing:0}pre,code{font-family:var(--s-font-mono,ui-monospace,monospace)}pre{overflow-x:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-contrast:more){*{border-color:currentColor!important}}@media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:0 0!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}pre{white-space:pre-wrap!important}@page{margin:2cm}}}@layer shift.tokens{@layer shift.tokens{:root{color-scheme:light dark;--shift-hue-primary:250;--shift-hue-secondary:180;--shift-hue-accent:30;--shift-hue-success:145;--shift-hue-warning:45;--shift-hue-danger:25;--shift-hue-neutral:250;--s-primary-50:oklch(.9778 .0108 var(--shift-hue-primary));--s-primary-100:oklch(.9356 .0321 var(--shift-hue-primary));--s-primary-200:oklch(.8811 .0636 var(--shift-hue-primary));--s-primary-300:oklch(.8267 .0951 var(--shift-hue-primary));--s-primary-400:oklch(.7422 .1211 var(--shift-hue-primary));--s-primary-500:oklch(.6478 .1472 var(--shift-hue-primary));--s-primary-600:oklch(.5733 .1383 var(--shift-hue-primary));--s-primary-700:oklch(.4689 .1178 var(--shift-hue-primary));--s-primary-800:oklch(.3944 .0894 var(--shift-hue-primary));--s-primary-900:oklch(.32 .072 var(--shift-hue-primary));--s-primary-950:oklch(.2378 .054 var(--shift-hue-primary));--s-secondary-50:oklch(.9778 .0108 var(--shift-hue-secondary));--s-secondary-100:oklch(.9356 .0321 var(--shift-hue-secondary));--s-secondary-200:oklch(.8811 .0636 var(--shift-hue-secondary));--s-secondary-300:oklch(.8267 .0951 var(--shift-hue-secondary));--s-secondary-400:oklch(.7422 .1211 var(--shift-hue-secondary));--s-secondary-500:oklch(.6478 .1472 var(--shift-hue-secondary));--s-secondary-600:oklch(.5733 .1383 var(--shift-hue-secondary));--s-secondary-700:oklch(.4689 .1178 var(--shift-hue-secondary));--s-secondary-800:oklch(.3944 .0894 var(--shift-hue-secondary));--s-secondary-900:oklch(.32 .072 var(--shift-hue-secondary));--s-secondary-950:oklch(.2378 .054 var(--shift-hue-secondary));--s-accent-50:oklch(.9778 .0108 var(--shift-hue-accent));--s-accent-100:oklch(.9356 .0321 var(--shift-hue-accent));--s-accent-200:oklch(.8811 .0636 var(--shift-hue-accent));--s-accent-300:oklch(.8267 .0951 var(--shift-hue-accent));--s-accent-400:oklch(.7422 .1211 var(--shift-hue-accent));--s-accent-500:oklch(.6478 .1472 var(--shift-hue-accent));--s-accent-600:oklch(.5733 .1383 var(--shift-hue-accent));--s-accent-700:oklch(.4689 .1178 var(--shift-hue-accent));--s-accent-800:oklch(.3944 .0894 var(--shift-hue-accent));--s-accent-900:oklch(.32 .072 var(--shift-hue-accent));--s-accent-950:oklch(.2378 .054 var(--shift-hue-accent));--s-success-50:oklch(.9778 .0108 var(--shift-hue-success));--s-success-100:oklch(.9356 .0321 var(--shift-hue-success));--s-success-200:oklch(.8811 .0636 var(--shift-hue-success));--s-success-300:oklch(.8267 .0951 var(--shift-hue-success));--s-success-400:oklch(.7422 .1211 var(--shift-hue-success));--s-success-500:oklch(.6478 .1472 var(--shift-hue-success));--s-success-600:oklch(.5733 .1383 var(--shift-hue-success));--s-success-700:oklch(.4689 .1178 var(--shift-hue-success));--s-success-800:oklch(.3944 .0894 var(--shift-hue-success));--s-success-900:oklch(.32 .072 var(--shift-hue-success));--s-success-950:oklch(.2378 .054 var(--shift-hue-success));--s-warning-50:oklch(.9778 .0108 var(--shift-hue-warning));--s-warning-100:oklch(.9356 .0321 var(--shift-hue-warning));--s-warning-200:oklch(.8811 .0636 var(--shift-hue-warning));--s-warning-300:oklch(.8267 .0951 var(--shift-hue-warning));--s-warning-400:oklch(.7422 .1211 var(--shift-hue-warning));--s-warning-500:oklch(.6478 .1472 var(--shift-hue-warning));--s-warning-600:oklch(.5733 .1383 var(--shift-hue-warning));--s-warning-700:oklch(.4689 .1178 var(--shift-hue-warning));--s-warning-800:oklch(.3944 .0894 var(--shift-hue-warning));--s-warning-900:oklch(.32 .072 var(--shift-hue-warning));--s-warning-950:oklch(.2378 .054 var(--shift-hue-warning));--s-danger-50:oklch(.9778 .0108 var(--shift-hue-danger));--s-danger-100:oklch(.9356 .0321 var(--shift-hue-danger));--s-danger-200:oklch(.8811 .0636 var(--shift-hue-danger));--s-danger-300:oklch(.8267 .0951 var(--shift-hue-danger));--s-danger-400:oklch(.7422 .1211 var(--shift-hue-danger));--s-danger-500:oklch(.6478 .1472 var(--shift-hue-danger));--s-danger-600:oklch(.5733 .1383 var(--shift-hue-danger));--s-danger-700:oklch(.4689 .1178 var(--shift-hue-danger));--s-danger-800:oklch(.3944 .0894 var(--shift-hue-danger));--s-danger-900:oklch(.32 .072 var(--shift-hue-danger));--s-danger-950:oklch(.2378 .054 var(--shift-hue-danger));--s-neutral-50:oklch(.9778 .0054 var(--shift-hue-neutral));--s-neutral-100:oklch(.9356 .0072 var(--shift-hue-neutral));--s-neutral-200:oklch(.8811 .009 var(--shift-hue-neutral));--s-neutral-300:oklch(.8267 .0099 var(--shift-hue-neutral));--s-neutral-400:oklch(.7422 .0108 var(--shift-hue-neutral));--s-neutral-500:oklch(.6478 .0118 var(--shift-hue-neutral));--s-neutral-600:oklch(.5733 .0108 var(--shift-hue-neutral));--s-neutral-700:oklch(.4689 .0099 var(--shift-hue-neutral));--s-neutral-800:oklch(.3944 .009 var(--shift-hue-neutral));--s-neutral-900:oklch(.32 .0081 var(--shift-hue-neutral));--s-neutral-950:oklch(.2378 .0072 var(--shift-hue-neutral));--s-surface-base:light-dark(var(--s-neutral-50),var(--s-neutral-950));--s-surface-raised:light-dark(var(--s-neutral-100),var(--s-neutral-900));--s-surface-sunken:light-dark(var(--s-neutral-200),var(--s-neutral-800));--s-surface-overlay:light-dark(var(--s-neutral-900),var(--s-neutral-100));--s-text-primary:light-dark(var(--s-neutral-900),var(--s-neutral-50));--s-text-secondary:light-dark(var(--s-neutral-700),var(--s-neutral-300));--s-text-tertiary:light-dark(var(--s-neutral-500),var(--s-neutral-500));--s-text-inverse:light-dark(var(--s-neutral-50),var(--s-neutral-900));--s-border-default:light-dark(var(--s-neutral-200),var(--s-neutral-800));--s-border-muted:light-dark(var(--s-neutral-100),var(--s-neutral-900));--s-border-strong:light-dark(var(--s-neutral-400),var(--s-neutral-600));--s-interactive-primary:light-dark(var(--s-primary-700),var(--s-primary-300));--s-interactive-primary-hover:light-dark(var(--s-primary-800),var(--s-primary-200));--s-interactive-primary-active:light-dark(var(--s-primary-900),var(--s-primary-100));--s-interactive-secondary:light-dark(var(--s-secondary-700),var(--s-secondary-300));--s-state-success:light-dark(var(--s-success-700),var(--s-success-300));--s-state-success-bg:light-dark(var(--s-success-100),var(--s-success-900));--s-state-warning:light-dark(var(--s-warning-700),var(--s-warning-300));--s-state-warning-bg:light-dark(var(--s-warning-100),var(--s-warning-900));--s-state-danger:light-dark(var(--s-danger-700),var(--s-danger-300));--s-state-danger-bg:light-dark(var(--s-danger-100),var(--s-danger-900));--s-focus-ring:light-dark(var(--s-primary-500),var(--s-primary-400));--s-focus-ring-offset:light-dark(var(--s-neutral-50),var(--s-neutral-950));--s-space-0:0;--s-space-1:.25rem;--s-space-2:.5rem;--s-space-3:.75rem;--s-space-4:1rem;--s-space-5:1.25rem;--s-space-6:1.5rem;--s-space-7:1.75rem;--s-space-8:2rem;--s-space-9:2.25rem;--s-space-10:2.5rem;--s-space-11:2.75rem;--s-space-12:3rem;--s-space-14:3.5rem;--s-space-16:4rem;--s-space-20:5rem;--s-space-24:6rem;--s-space-28:7rem;--s-space-32:8rem;--s-space-36:9rem;--s-space-40:10rem;--s-space-44:11rem;--s-space-48:12rem;--s-space-52:13rem;--s-space-56:14rem;--s-space-60:15rem;--s-space-64:16rem;--s-space-72:18rem;--s-space-80:20rem;--s-space-96:24rem;--s-space-px:1px;--s-space-0_5:.125rem;--s-space-1_5:.375rem;--s-space-2_5:.625rem;--s-space-3_5:.875rem;--s-radius-none:0;--s-radius-sm:.125rem;--s-radius-base:.25rem;--s-radius-md:.375rem;--s-radius-lg:.5rem;--s-radius-xl:.75rem;--s-radius-2xl:1rem;--s-radius-3xl:1.5rem;--s-radius-full:9999px;--s-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--s-font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--s-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--s-text-xs:clamp(.6875rem,.625rem + .25vi,.75rem);--s-text-sm:clamp(.8125rem,.75rem + .25vi,.875rem);--s-text-base:clamp(.9375rem,.875rem + .25vi,1rem);--s-text-lg:clamp(1.0625rem,1rem + .25vi,1.125rem);--s-text-xl:clamp(1.1875rem,1.0625rem + .5vi,1.25rem);--s-text-2xl:clamp(1.4375rem,1.25rem + .75vi,1.5rem);--s-text-3xl:clamp(1.75rem,1.5rem + 1vi,1.875rem);--s-text-4xl:clamp(2.125rem,1.75rem + 1.5vi,2.25rem);--s-text-5xl:clamp(2.75rem,2.25rem + 2vi,3rem);--s-leading-none:1;--s-leading-tight:1.25;--s-leading-snug:1.375;--s-leading-normal:1.5;--s-leading-relaxed:1.625;--s-leading-loose:2;--s-font-thin:100;--s-font-extralight:200;--s-font-light:300;--s-font-normal:400;--s-font-medium:500;--s-font-semibold:600;--s-font-bold:700;--s-font-extrabold:800;--s-font-black:900;--s-tracking-tighter:-.05em;--s-tracking-tight:-.025em;--s-tracking-normal:0;--s-tracking-wide:.025em;--s-tracking-wider:.05em;--s-tracking-widest:.1em;--s-duration-75:75ms;--s-duration-100:.1s;--s-duration-150:.15s;--s-duration-200:.2s;--s-duration-300:.3s;--s-duration-500:.5s;--s-duration-700:.7s;--s-duration-1000:1s;--s-ease-linear:linear;--s-ease-in:cubic-bezier(.4,0,1,1);--s-ease-out:cubic-bezier(0,0,.2,1);--s-ease-in-out:cubic-bezier(.4,0,.2,1);--s-ease-bounce:cubic-bezier(.68,-.55,.265,1.55);--s-shadow-sm:0 1px 2px 0 #0000000d;--s-shadow-base:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--s-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--s-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--s-shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--s-shadow-2xl:0 25px 50px -12px #00000040;--s-shadow-inner:inset 0 2px 4px 0 #0000000d;--s-shadow-none:0 0 #0000}}}@layer shift.core{:where([s-surface]){--_surface-bg:var(--s-surface-base);--_surface-padding:var(--s-space-4);--_surface-radius:var(--s-radius-lg);background-color:var(--_surface-bg);padding:var(--_surface-padding);border-radius:var(--_surface-radius);color:var(--s-text-primary);container-type:inline-size;@supports (color:oklch(from red l c h)){color:oklch(from var(--_surface-bg)clamp(.15,calc((.6 - l)*1000 + .15),.95)0 0)}@supports (color:contrast-color(red)){color:contrast-color(var(--_surface-bg))}}[s-surface=flat]{--_surface-bg:var(--s-surface-base)}[s-surface=sunken]{--_surface-bg:var(--s-surface-sunken);box-shadow:var(--s-shadow-inner)}[s-surface=raised]{--_surface-bg:var(--s-surface-raised);box-shadow:var(--s-shadow-md)}[s-surface=floating]{--_surface-bg:var(--s-surface-raised);box-shadow:var(--s-shadow-xl)}[s-surface][s-bordered]{border:1px solid var(--s-border-default)}[s-surface][s-interactive]{cursor:pointer;transition:transform var(--s-duration-150)var(--s-ease-out),box-shadow var(--s-duration-150)var(--s-ease-out);&:hover{box-shadow:var(--s-shadow-lg);transform:translateY(-2px)}&:active{box-shadow:var(--s-shadow-sm);transform:translateY(0)}}[s-surface=primary]{--_surface-bg:var(--s-primary-500)}[s-surface=secondary]{--_surface-bg:var(--s-secondary-500)}[s-surface=accent]{--_surface-bg:var(--s-accent-500)}[s-surface=success]{--_surface-bg:var(--s-state-success-bg);border-left:4px solid var(--s-state-success);color:var(--s-text-primary)}[s-surface=warning]{--_surface-bg:var(--s-state-warning-bg);border-left:4px solid var(--s-state-warning);color:var(--s-text-primary)}[s-surface=danger]{--_surface-bg:var(--s-state-danger-bg);border-left:4px solid var(--s-state-danger);color:var(--s-text-primary)}@container (width<=20rem){:where([s-surface]){--_surface-padding:var(--s-space-3)}}@container (width>=40rem){:where([s-surface]){--_surface-padding:var(--s-space-6)}}:where([s-btn]){--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);--_btn-border:transparent;justify-content:center;align-items:center;gap:var(--s-space-2);padding:var(--s-space-2)var(--s-space-4);border-radius:var(--s-radius-md);font-weight:var(--s-font-semibold);font-size:var(--s-text-sm);white-space:nowrap;background-color:var(--_btn-bg);color:var(--_btn-text);border:1px solid var(--_btn-border);line-height:1;display:inline-flex;@supports (color:oklch(from red l c h)){color:oklch(from var(--_btn-bg)clamp(.15,calc((.6 - l)*1000 + .15),.95)0 0)}@supports (color:contrast-color(red)){color:contrast-color(var(--_btn-bg))}transition:background-color var(--s-duration-150)var(--s-ease-out),border-color var(--s-duration-150)var(--s-ease-out),transform var(--s-duration-100)var(--s-ease-out);cursor:pointer;user-select:none&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary-hover)}&:active:not(:disabled){--_btn-bg:var(--s-interactive-primary-active);transform:scale(.98)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}}[s-btn=primary]{--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary-hover)}&:active:not(:disabled){--_btn-bg:var(--s-interactive-primary-active)}}[s-btn=secondary]{--_btn-bg:var(--s-surface-raised);--_btn-text:var(--s-text-primary);--_btn-border:var(--s-border-default);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-surface-sunken)}}[s-btn=ghost]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-surface-sunken)}}[s-btn=link]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);--_btn-border:transparent;color:var(--_btn-text);text-underline-offset:2px;text-decoration:underline;&:hover:not(:disabled){--_btn-text:var(--s-interactive-primary-hover);color:var(--_btn-text)}}[s-btn=outline]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);--_btn-border:var(--s-interactive-primary);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);color:var(--_btn-text)}}[s-btn=danger]{--_btn-bg:var(--s-state-danger);&:hover:not(:disabled){--_btn-bg:var(--s-danger-800)}&:active:not(:disabled){--_btn-bg:var(--s-danger-900)}}[s-btn=success]{--_btn-bg:var(--s-state-success);&:hover:not(:disabled){--_btn-bg:var(--s-success-800)}&:active:not(:disabled){--_btn-bg:var(--s-success-900)}}[s-btn=warning]{--_btn-bg:var(--s-state-warning);&:hover:not(:disabled){--_btn-bg:var(--s-warning-800)}&:active:not(:disabled){--_btn-bg:var(--s-warning-900)}}[s-btn][s-size=sm]{padding:var(--s-space-1)var(--s-space-3);font-size:var(--s-text-xs)}[s-btn][s-size=lg]{padding:var(--s-space-3)var(--s-space-6);font-size:var(--s-text-base)}[s-btn][s-size=xl]{padding:var(--s-space-4)var(--s-space-8);font-size:var(--s-text-lg)}[s-btn][s-icon]{padding:var(--s-space-2);aspect-ratio:1}[s-btn][s-block]{width:100%}[s-btn][s-loading]{color:#0000;pointer-events:none;position:relative;&:after{content:"";border:2px solid var(--s-text-inverse);border-right-color:#0000;border-radius:50%;width:1em;height:1em;margin:auto;animation:.6s linear infinite s-btn-spin;position:absolute;inset:0}}@keyframes s-btn-spin{to{transform:rotate(360deg)}}[s-btn-group]{display:inline-flex;&>[s-btn]{border-radius:0;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md)}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0}&:not(:last-child){border-right:none}}}:where([s-card]){--_card-bg:var(--s-surface-raised);--_card-border:var(--s-border-muted);--_card-radius:var(--s-radius-xl);--_card-shadow:var(--s-shadow-base);--_card-padding:var(--s-space-4);background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--_card-radius);box-shadow:var(--_card-shadow);color:var(--s-text-primary);flex-direction:column;display:flex;overflow:hidden;container-type:inline-size;@supports (color:oklch(from red l c h)){color:oklch(from var(--_card-bg)clamp(.15,calc((.6 - l)*1000 + .15),.95)0 0)}}[s-card-header]{padding:var(--_card-padding,var(--s-space-4));border-bottom:1px solid var(--_card-border,var(--s-border-muted))}[s-card-body]{padding:var(--_card-padding,var(--s-space-4));flex:1}[s-card-footer]{padding:var(--_card-padding,var(--s-space-4));border-top:1px solid var(--_card-border,var(--s-border-muted))}[s-card-media]{aspect-ratio:16/9;overflow:hidden;&>img{object-fit:cover;width:100%;height:100%}}[s-card-title]{font-size:var(--s-text-lg);font-weight:var(--s-font-semibold);line-height:var(--s-leading-tight);margin-bottom:var(--s-space-1)}[s-card-subtitle]{font-size:var(--s-text-sm);color:var(--s-text-secondary)}[s-card=flat]{--_card-shadow:none;--_card-border:var(--s-border-default)}[s-card=elevated],[s-card][s-surface=raised]{--_card-shadow:var(--s-shadow-lg);--_card-border:transparent}[s-card][s-surface=floating]{--_card-shadow:var(--s-shadow-xl);--_card-border:transparent}[s-card=outline]{--_card-shadow:none;--_card-border:var(--s-border-strong);--_card-bg:transparent}[s-card][s-interactive]{cursor:pointer;transition:transform var(--s-duration-200)var(--s-ease-out),box-shadow var(--s-duration-200)var(--s-ease-out);&:hover{--_card-shadow:var(--s-shadow-xl);transform:translateY(-4px)}&:active{transform:translateY(-2px)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}}[s-card][s-link]{position:relative;& a:after{content:"";position:absolute;inset:0}}[s-card][s-horizontal]{flex-direction:row;& [s-card-media]{aspect-ratio:1;flex-shrink:0;width:33%}}@container (width<=24rem){[s-card][s-horizontal]{flex-direction:column;& [s-card-media]{aspect-ratio:16/9;width:100%}}}[s-card][s-size=sm]{--_card-padding:var(--s-space-3);--_card-radius:var(--s-radius-lg)}[s-card][s-size=lg]{--_card-padding:var(--s-space-6)}[s-card=feature]{text-align:center;--_card-padding:var(--s-space-6)}[s-card-icon]{font-size:var(--s-text-4xl);margin-bottom:var(--s-space-4)}[s-card-grid]{gap:var(--s-space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));display:grid}[s-card-stack]{gap:var(--s-space-4);flex-direction:column;display:flex}:where([s-input]){--_input-bg:var(--s-surface-base);--_input-border:var(--s-border-default);--_input-text:var(--s-text-primary);--_input-placeholder:var(--s-text-tertiary);--_input-radius:var(--s-radius-md);appearance:none;width:100%;padding:var(--s-space-2)var(--s-space-3);background-color:var(--_input-bg);border:2px solid var(--_input-border);border-radius:var(--_input-radius);color:var(--_input-text);font-size:var(--s-text-sm);line-height:var(--s-leading-normal);transition:border-color var(--s-duration-150)var(--s-ease-out),box-shadow var(--s-duration-150)var(--s-ease-out);display:block;&::placeholder{color:var(--_input-placeholder)}&:hover:not(:disabled):not(:focus){--_input-border:var(--s-border-strong)}&:focus{--_input-border:var(--s-interactive-primary);box-shadow:0 0 0 3px oklch(from var(--s-interactive-primary)l c h/.2);outline:none}&:disabled{opacity:.5;cursor:not-allowed;background-color:var(--s-surface-sunken)}&:invalid:not(:placeholder-shown),&[aria-invalid=true]{--_input-border:var(--s-state-danger);&:focus{box-shadow:0 0 0 3px oklch(from var(--s-state-danger)l c h/.2)}}}[s-input][s-size=sm]{padding:var(--s-space-1)var(--s-space-2);font-size:var(--s-text-xs)}[s-input][s-size=lg]{padding:var(--s-space-3)var(--s-space-4);font-size:var(--s-text-base)}textarea[s-input]{resize:vertical;min-height:6rem}select[s-input]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s-space-3)center;padding-right:var(--s-space-10)}[s-input-group]{display:flex;&>[s-input]{border-radius:0;flex:1;min-width:0;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md)}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0}}&>[s-input-addon]{padding:var(--s-space-2)var(--s-space-3);background-color:var(--s-surface-sunken);border:2px solid var(--s-border-default);color:var(--s-text-secondary);font-size:var(--s-text-sm);white-space:nowrap;align-items:center;display:flex;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md);border-right:none}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0;border-left:none}}}[s-field]{gap:var(--s-space-1);flex-direction:column;display:flex}[s-field-label]{font-size:var(--s-text-sm);font-weight:var(--s-font-medium);color:var(--s-text-primary)}[s-field-hint]{font-size:var(--s-text-xs);color:var(--s-text-secondary)}[s-field-error]{font-size:var(--s-text-xs);color:var(--s-state-danger)}[s-checkbox],[s-radio]{align-items:center;gap:var(--s-space-2);cursor:pointer;display:inline-flex;& input{appearance:none;border:2px solid var(--s-border-default);background-color:var(--s-surface-base);cursor:pointer;width:1.25rem;height:1.25rem;transition:background-color var(--s-duration-150)var(--s-ease-out),border-color var(--s-duration-150)var(--s-ease-out);&:checked{background-color:var(--s-interactive-primary);border-color:var(--s-interactive-primary)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed}}}[s-checkbox] input{border-radius:var(--s-radius-sm);&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:.75rem}}[s-radio] input{border-radius:50%;&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat}}[s-toggle]{align-items:center;gap:var(--s-space-2);cursor:pointer;display:inline-flex;& input{appearance:none;background-color:var(--s-border-default);cursor:pointer;width:2.5rem;height:1.5rem;transition:background-color var(--s-duration-200)var(--s-ease-out);border-radius:9999px;position:relative;&:after{content:"";background-color:var(--s-surface-base);width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);box-shadow:var(--s-shadow-sm);transition:transform var(--s-duration-200)var(--s-ease-out);border-radius:50%;position:absolute;top:2px;left:2px}&:checked{background-color:var(--s-interactive-primary);&:after{transform:translate(1rem)}}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed}}}}@layer shift.utils{[s-flex]{display:flex}[s-flex=row]{flex-direction:row;display:flex}[s-flex=col]{flex-direction:column;display:flex}[s-flex=row-reverse]{flex-direction:row-reverse;display:flex}[s-flex=col-reverse]{flex-direction:column-reverse;display:flex}[s-flex=center]{justify-content:center;align-items:center;display:flex}[s-flex=stack]{flex-direction:column;display:flex}[s-flex=between]{justify-content:space-between;align-items:center;display:flex}[s-flex=end]{justify-content:flex-end;align-items:center;display:flex}[s-flex~=wrap]{flex-wrap:wrap}[s-flex~=nowrap]{flex-wrap:nowrap}[s-justify=start]{justify-content:flex-start}[s-justify=end]{justify-content:flex-end}[s-justify=center]{justify-content:center}[s-justify=between]{justify-content:space-between}[s-justify=around]{justify-content:space-around}[s-justify=evenly]{justify-content:space-evenly}[s-items=start]{align-items:flex-start}[s-items=end]{align-items:flex-end}[s-items=center]{align-items:center}[s-items=baseline]{align-items:baseline}[s-items=stretch]{align-items:stretch}[s-content=start]{align-content:flex-start}[s-content=end]{align-content:flex-end}[s-content=center]{align-content:center}[s-content=between]{align-content:space-between}[s-content=around]{align-content:space-around}[s-grid]{display:grid}[s-grid="1"]{grid-template-columns:repeat(1,minmax(0,1fr));display:grid}[s-grid="2"]{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}[s-grid="3"]{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}[s-grid="4"]{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}[s-grid="5"]{grid-template-columns:repeat(5,minmax(0,1fr));display:grid}[s-grid="6"]{grid-template-columns:repeat(6,minmax(0,1fr));display:grid}[s-grid="12"]{grid-template-columns:repeat(12,minmax(0,1fr));display:grid}[s-grid=auto-fit]{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));display:grid}[s-grid=auto-fill]{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));display:grid}[s-grid-rows="1"]{grid-template-rows:repeat(1,minmax(0,1fr))}[s-grid-rows="2"]{grid-template-rows:repeat(2,minmax(0,1fr))}[s-grid-rows="3"]{grid-template-rows:repeat(3,minmax(0,1fr))}[s-grid-rows="4"]{grid-template-rows:repeat(4,minmax(0,1fr))}[s-col-span="1"]{grid-column:span 1/span 1}[s-col-span="2"]{grid-column:span 2/span 2}[s-col-span="3"]{grid-column:span 3/span 3}[s-col-span="4"]{grid-column:span 4/span 4}[s-col-span="6"]{grid-column:span 6/span 6}[s-col-span="12"]{grid-column:span 12/span 12}[s-col-span=full]{grid-column:1/-1}[s-row-span="1"]{grid-row:span 1/span 1}[s-row-span="2"]{grid-row:span 2/span 2}[s-row-span="3"]{grid-row:span 3/span 3}[s-row-span=full]{grid-row:1/-1}[s-gap]{gap:var(--s-space-4)}[s-gap=xs]{gap:var(--s-space-1)}[s-gap=sm]{gap:var(--s-space-2)}[s-gap=md]{gap:var(--s-space-4)}[s-gap=lg]{gap:var(--s-space-6)}[s-gap=xl]{gap:var(--s-space-8)}[s-gap=none]{gap:0}[s-container]{width:100%;padding-inline:var(--s-space-4);max-width:var(--s-container-max,80rem);margin-inline:auto}[s-container=sm]{max-width:40rem}[s-container=md]{max-width:48rem}[s-container=lg]{max-width:64rem}[s-container=xl]{max-width:80rem}[s-container=full]{max-width:100%}[s-container=prose]{max-width:65ch}[s-position=static]{position:static}[s-position=relative]{position:relative}[s-position=absolute]{position:absolute}[s-position=fixed]{position:fixed}[s-position=sticky]{position:sticky}[s-inset="0"]{inset:0}[s-inset=auto]{inset:auto}[s-display=block]{display:block}[s-display=inline]{display:inline}[s-display=inline-block]{display:inline-block}[s-display=contents]{display:contents}[s-display=inline-flex]{display:inline-flex}[s-display=inline-grid]{display:inline-grid}[s-hidden]{display:none}[s-visible]{visibility:visible}[s-invisible]{visibility:hidden}[s-collapse]{visibility:collapse}[s-sr-only]{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[s-sr-only=focusable]:focus,[s-sr-only=focusable]:focus-within{clip:auto;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}[s-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[s-truncate="2"]{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-truncate="3"]{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-truncate="4"]{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-overflow=auto]{overflow:auto}[s-overflow=hidden]{overflow:hidden}[s-overflow=visible]{overflow:visible}[s-overflow=scroll]{overflow:scroll}[s-overflow-x=auto]{overflow-x:auto}[s-overflow-x=hidden]{overflow-x:hidden}[s-overflow-y=auto]{overflow-y:auto}[s-overflow-y=hidden]{overflow-y:hidden}@media (width<640px){[s-hide-on~=sm]{display:none}}@media (width>=640px) and (width<768px){[s-hide-on~=md]{display:none}}@media (width>=768px) and (width<1024px){[s-hide-on~=lg]{display:none}}@media (width>=1024px){[s-hide-on~=xl]{display:none}}@media (width>=640px){[s-show-on~=sm]{display:none}}@media (width<640px),(width>=768px){[s-show-on~=md]{display:none}}@media (width<768px),(width>=1024px){[s-show-on~=lg]{display:none}}@media (width<1024px){[s-show-on~=xl]{display:none}}[s-pointer=none]{pointer-events:none}[s-pointer=auto]{pointer-events:auto}[s-select=none]{user-select:none}[s-select=text]{user-select:text}[s-select=all]{user-select:all}[s-select=auto]{user-select:auto}[s-isolate]{isolation:isolate}[s-isolate=auto]{isolation:auto}.s-m-0{margin:0}.s-m-1{margin:var(--s-space-1)}.s-m-2{margin:var(--s-space-2)}.s-m-3{margin:var(--s-space-3)}.s-m-4{margin:var(--s-space-4)}.s-m-5{margin:var(--s-space-5)}.s-m-6{margin:var(--s-space-6)}.s-m-8{margin:var(--s-space-8)}.s-m-10{margin:var(--s-space-10)}.s-m-12{margin:var(--s-space-12)}.s-m-auto{margin:auto}.s-mx-0{margin-inline:0}.s-mx-1{margin-inline:var(--s-space-1)}.s-mx-2{margin-inline:var(--s-space-2)}.s-mx-3{margin-inline:var(--s-space-3)}.s-mx-4{margin-inline:var(--s-space-4)}.s-mx-5{margin-inline:var(--s-space-5)}.s-mx-6{margin-inline:var(--s-space-6)}.s-mx-8{margin-inline:var(--s-space-8)}.s-mx-auto{margin-inline:auto}.s-my-0{margin-block:0}.s-my-1{margin-block:var(--s-space-1)}.s-my-2{margin-block:var(--s-space-2)}.s-my-3{margin-block:var(--s-space-3)}.s-my-4{margin-block:var(--s-space-4)}.s-my-5{margin-block:var(--s-space-5)}.s-my-6{margin-block:var(--s-space-6)}.s-my-8{margin-block:var(--s-space-8)}.s-my-auto{margin-block:auto}.s-mt-0{margin-top:0}.s-mt-1{margin-top:var(--s-space-1)}.s-mt-2{margin-top:var(--s-space-2)}.s-mt-3{margin-top:var(--s-space-3)}.s-mt-4{margin-top:var(--s-space-4)}.s-mt-5{margin-top:var(--s-space-5)}.s-mt-6{margin-top:var(--s-space-6)}.s-mt-8{margin-top:var(--s-space-8)}.s-mt-auto{margin-top:auto}.s-mb-0{margin-bottom:0}.s-mb-1{margin-bottom:var(--s-space-1)}.s-mb-2{margin-bottom:var(--s-space-2)}.s-mb-3{margin-bottom:var(--s-space-3)}.s-mb-4{margin-bottom:var(--s-space-4)}.s-mb-5{margin-bottom:var(--s-space-5)}.s-mb-6{margin-bottom:var(--s-space-6)}.s-mb-8{margin-bottom:var(--s-space-8)}.s-mb-auto{margin-bottom:auto}.s-ml-0{margin-left:0}.s-ml-1{margin-left:var(--s-space-1)}.s-ml-2{margin-left:var(--s-space-2)}.s-ml-3{margin-left:var(--s-space-3)}.s-ml-4{margin-left:var(--s-space-4)}.s-ml-auto{margin-left:auto}.s-mr-0{margin-right:0}.s-mr-1{margin-right:var(--s-space-1)}.s-mr-2{margin-right:var(--s-space-2)}.s-mr-3{margin-right:var(--s-space-3)}.s-mr-4{margin-right:var(--s-space-4)}.s-mr-auto{margin-right:auto}.s-p-0{padding:0}.s-p-1{padding:var(--s-space-1)}.s-p-2{padding:var(--s-space-2)}.s-p-3{padding:var(--s-space-3)}.s-p-4{padding:var(--s-space-4)}.s-p-5{padding:var(--s-space-5)}.s-p-6{padding:var(--s-space-6)}.s-p-8{padding:var(--s-space-8)}.s-p-10{padding:var(--s-space-10)}.s-p-12{padding:var(--s-space-12)}.s-px-0{padding-inline:0}.s-px-1{padding-inline:var(--s-space-1)}.s-px-2{padding-inline:var(--s-space-2)}.s-px-3{padding-inline:var(--s-space-3)}.s-px-4{padding-inline:var(--s-space-4)}.s-px-5{padding-inline:var(--s-space-5)}.s-px-6{padding-inline:var(--s-space-6)}.s-px-8{padding-inline:var(--s-space-8)}.s-py-0{padding-block:0}.s-py-1{padding-block:var(--s-space-1)}.s-py-2{padding-block:var(--s-space-2)}.s-py-3{padding-block:var(--s-space-3)}.s-py-4{padding-block:var(--s-space-4)}.s-py-5{padding-block:var(--s-space-5)}.s-py-6{padding-block:var(--s-space-6)}.s-py-8{padding-block:var(--s-space-8)}.s-pt-0{padding-top:0}.s-pt-1{padding-top:var(--s-space-1)}.s-pt-2{padding-top:var(--s-space-2)}.s-pt-3{padding-top:var(--s-space-3)}.s-pt-4{padding-top:var(--s-space-4)}.s-pt-5{padding-top:var(--s-space-5)}.s-pt-6{padding-top:var(--s-space-6)}.s-pt-8{padding-top:var(--s-space-8)}.s-pb-0{padding-bottom:0}.s-pb-1{padding-bottom:var(--s-space-1)}.s-pb-2{padding-bottom:var(--s-space-2)}.s-pb-3{padding-bottom:var(--s-space-3)}.s-pb-4{padding-bottom:var(--s-space-4)}.s-pb-5{padding-bottom:var(--s-space-5)}.s-pb-6{padding-bottom:var(--s-space-6)}.s-pb-8{padding-bottom:var(--s-space-8)}.s-pl-0{padding-left:0}.s-pl-1{padding-left:var(--s-space-1)}.s-pl-2{padding-left:var(--s-space-2)}.s-pl-3{padding-left:var(--s-space-3)}.s-pl-4{padding-left:var(--s-space-4)}.s-pr-0{padding-right:0}.s-pr-1{padding-right:var(--s-space-1)}.s-pr-2{padding-right:var(--s-space-2)}.s-pr-3{padding-right:var(--s-space-3)}.s-pr-4{padding-right:var(--s-space-4)}.s-gap-0{gap:0}.s-gap-1{gap:var(--s-space-1)}.s-gap-2{gap:var(--s-space-2)}.s-gap-3{gap:var(--s-space-3)}.s-gap-4{gap:var(--s-space-4)}.s-gap-5{gap:var(--s-space-5)}.s-gap-6{gap:var(--s-space-6)}.s-gap-8{gap:var(--s-space-8)}.s-gap-10{gap:var(--s-space-10)}.s-gap-12{gap:var(--s-space-12)}.s-gap-x-0{column-gap:0}.s-gap-x-1{column-gap:var(--s-space-1)}.s-gap-x-2{column-gap:var(--s-space-2)}.s-gap-x-3{column-gap:var(--s-space-3)}.s-gap-x-4{column-gap:var(--s-space-4)}.s-gap-x-6{column-gap:var(--s-space-6)}.s-gap-x-8{column-gap:var(--s-space-8)}.s-gap-y-0{row-gap:0}.s-gap-y-1{row-gap:var(--s-space-1)}.s-gap-y-2{row-gap:var(--s-space-2)}.s-gap-y-3{row-gap:var(--s-space-3)}.s-gap-y-4{row-gap:var(--s-space-4)}.s-gap-y-6{row-gap:var(--s-space-6)}.s-gap-y-8{row-gap:var(--s-space-8)}.s-space-y-1>*+*{margin-top:var(--s-space-1)}.s-space-y-2>*+*{margin-top:var(--s-space-2)}.s-space-y-3>*+*{margin-top:var(--s-space-3)}.s-space-y-4>*+*{margin-top:var(--s-space-4)}.s-space-y-6>*+*{margin-top:var(--s-space-6)}.s-space-y-8>*+*{margin-top:var(--s-space-8)}.s-space-x-1>*+*{margin-left:var(--s-space-1)}.s-space-x-2>*+*{margin-left:var(--s-space-2)}.s-space-x-3>*+*{margin-left:var(--s-space-3)}.s-space-x-4>*+*{margin-left:var(--s-space-4)}.s-space-x-6>*+*{margin-left:var(--s-space-6)}.s-space-x-8>*+*{margin-left:var(--s-space-8)}.s-flex-1{flex:1}.s-flex-auto{flex:auto}.s-flex-initial{flex:0 auto}.s-flex-none{flex:none}.s-grow{flex-grow:1}.s-grow-0{flex-grow:0}.s-shrink{flex-shrink:1}.s-shrink-0{flex-shrink:0}.s-self-auto{align-self:auto}.s-self-start{align-self:flex-start}.s-self-end{align-self:flex-end}.s-self-center{align-self:center}.s-self-stretch{align-self:stretch}.s-self-baseline{align-self:baseline}.s-place-items-start{place-items:start}.s-place-items-end{place-items:end}.s-place-items-center{place-items:center}.s-place-items-stretch{place-items:stretch stretch}.s-place-content-start{place-content:start}.s-place-content-end{place-content:end}.s-place-content-center{place-content:center}.s-place-content-between{place-content:space-between}.s-place-content-around{place-content:space-around}.s-place-content-evenly{place-content:space-evenly}.s-order-first{order:-9999}.s-order-last{order:9999}.s-order-none{order:0}.s-order-1{order:1}.s-order-2{order:2}.s-order-3{order:3}.s-w-full{width:100%}.s-w-screen{width:100vw}.s-w-min{width:min-content}.s-w-max{width:max-content}.s-w-fit{width:fit-content}.s-w-auto{width:auto}.s-h-full{height:100%}.s-h-screen{height:100vh}.s-h-screen-dvh{height:100dvh}.s-h-min{height:min-content}.s-h-max{height:max-content}.s-h-fit{height:fit-content}.s-h-auto{height:auto}.s-min-w-0{min-width:0}.s-min-w-full{min-width:100%}.s-max-w-none{max-width:none}.s-max-w-xs{max-width:20rem}.s-max-w-sm{max-width:24rem}.s-max-w-md{max-width:28rem}.s-max-w-lg{max-width:32rem}.s-max-w-xl{max-width:36rem}.s-max-w-2xl{max-width:42rem}.s-max-w-3xl{max-width:48rem}.s-max-w-4xl{max-width:56rem}.s-max-w-5xl{max-width:64rem}.s-max-w-6xl{max-width:72rem}.s-max-w-7xl{max-width:80rem}.s-max-w-full{max-width:100%}.s-max-w-prose{max-width:65ch}.s-min-h-0{min-height:0}.s-min-h-full{min-height:100%}.s-min-h-screen{min-height:100vh}.s-min-h-screen-dvh{min-height:100dvh}.s-max-h-full{max-height:100%}.s-max-h-screen{max-height:100vh}.s-aspect-auto{aspect-ratio:auto}.s-aspect-square{aspect-ratio:1}.s-aspect-video{aspect-ratio:16/9}.s-aspect-4-3{aspect-ratio:4/3}.s-z-0{z-index:0}.s-z-10{z-index:10}.s-z-20{z-index:20}.s-z-30{z-index:30}.s-z-40{z-index:40}.s-z-50{z-index:50}.s-z-auto{z-index:auto}.s-font-sans{font-family:var(--s-font-sans)}.s-font-serif{font-family:var(--s-font-serif)}.s-font-mono{font-family:var(--s-font-mono)}.s-text-xs{font-size:var(--s-text-xs)}.s-text-sm{font-size:var(--s-text-sm)}.s-text-base{font-size:var(--s-text-base)}.s-text-lg{font-size:var(--s-text-lg)}.s-text-xl{font-size:var(--s-text-xl)}.s-text-2xl{font-size:var(--s-text-2xl)}.s-text-3xl{font-size:var(--s-text-3xl)}.s-text-4xl{font-size:var(--s-text-4xl)}.s-text-5xl{font-size:var(--s-text-5xl)}.s-font-thin{font-weight:var(--s-font-thin)}.s-font-extralight{font-weight:var(--s-font-extralight)}.s-font-light{font-weight:var(--s-font-light)}.s-font-normal{font-weight:var(--s-font-normal)}.s-font-medium{font-weight:var(--s-font-medium)}.s-font-semibold{font-weight:var(--s-font-semibold)}.s-font-bold{font-weight:var(--s-font-bold)}.s-font-extrabold{font-weight:var(--s-font-extrabold)}.s-font-black{font-weight:var(--s-font-black)}.s-leading-none{line-height:var(--s-leading-none)}.s-leading-tight{line-height:var(--s-leading-tight)}.s-leading-snug{line-height:var(--s-leading-snug)}.s-leading-normal{line-height:var(--s-leading-normal)}.s-leading-relaxed{line-height:var(--s-leading-relaxed)}.s-leading-loose{line-height:var(--s-leading-loose)}.s-tracking-tighter{letter-spacing:var(--s-tracking-tighter)}.s-tracking-tight{letter-spacing:var(--s-tracking-tight)}.s-tracking-normal{letter-spacing:var(--s-tracking-normal)}.s-tracking-wide{letter-spacing:var(--s-tracking-wide)}.s-tracking-wider{letter-spacing:var(--s-tracking-wider)}.s-tracking-widest{letter-spacing:var(--s-tracking-widest)}.s-text-left{text-align:left}.s-text-center{text-align:center}.s-text-right{text-align:right}.s-text-justify{text-align:justify}.s-text-start{text-align:start}.s-text-end{text-align:end}.s-align-baseline{vertical-align:baseline}.s-align-top{vertical-align:top}.s-align-middle{vertical-align:middle}.s-align-bottom{vertical-align:bottom}.s-align-text-top{vertical-align:text-top}.s-align-text-bottom{vertical-align:text-bottom}.s-align-sub{vertical-align:sub}.s-align-super{vertical-align:super}.s-underline{text-decoration-line:underline}.s-overline{text-decoration-line:overline}.s-line-through{text-decoration-line:line-through}.s-no-underline{text-decoration-line:none}.s-decoration-solid{text-decoration-style:solid}.s-decoration-double{text-decoration-style:double}.s-decoration-dotted{text-decoration-style:dotted}.s-decoration-dashed{text-decoration-style:dashed}.s-decoration-wavy{text-decoration-style:wavy}.s-uppercase{text-transform:uppercase}.s-lowercase{text-transform:lowercase}.s-capitalize{text-transform:capitalize}.s-normal-case{text-transform:none}.s-text-ellipsis{text-overflow:ellipsis}.s-text-clip{text-overflow:clip}.s-text-wrap{text-wrap:wrap}.s-text-nowrap{text-wrap:nowrap}.s-text-balance{text-wrap:balance}.s-text-pretty{text-wrap:pretty}.s-whitespace-normal{white-space:normal}.s-whitespace-nowrap{white-space:nowrap}.s-whitespace-pre{white-space:pre}.s-whitespace-pre-line{white-space:pre-line}.s-whitespace-pre-wrap{white-space:pre-wrap}.s-whitespace-break-spaces{white-space:break-spaces}.s-break-normal{overflow-wrap:normal;word-break:normal}.s-break-words{overflow-wrap:break-word}.s-break-all{word-break:break-all}.s-break-keep{word-break:keep-all}.s-hyphens-none{hyphens:none}.s-hyphens-manual{hyphens:manual}.s-hyphens-auto{hyphens:auto}.s-text-primary{color:var(--s-text-primary)}.s-text-secondary{color:var(--s-text-secondary)}.s-text-tertiary{color:var(--s-text-tertiary)}.s-text-inverse{color:var(--s-text-inverse)}.s-text-success{color:var(--s-state-success)}.s-text-warning{color:var(--s-state-warning)}.s-text-danger{color:var(--s-state-danger)}.s-link{color:var(--s-interactive-primary);text-underline-offset:2px;text-decoration:underline;&:hover{color:var(--s-interactive-primary-hover)}}.s-list-none{list-style-type:none}.s-list-disc{list-style-type:disc}.s-list-decimal{list-style-type:decimal}.s-list-inside{list-style-position:inside}.s-list-outside{list-style-position:outside}.s-opacity-0{opacity:0}.s-opacity-5{opacity:.05}.s-opacity-10{opacity:.1}.s-opacity-20{opacity:.2}.s-opacity-25{opacity:.25}.s-opacity-30{opacity:.3}.s-opacity-40{opacity:.4}.s-opacity-50{opacity:.5}.s-opacity-60{opacity:.6}.s-opacity-70{opacity:.7}.s-opacity-75{opacity:.75}.s-opacity-80{opacity:.8}.s-opacity-90{opacity:.9}.s-opacity-95{opacity:.95}.s-opacity-100{opacity:1}}
package/dist/tokens.css ADDED
@@ -0,0 +1,210 @@
1
+ @layer shift.tokens {
2
+ :root {
3
+ color-scheme: light dark;
4
+ --shift-hue-primary: 250;
5
+ --shift-hue-secondary: 180;
6
+ --shift-hue-accent: 30;
7
+ --shift-hue-success: 145;
8
+ --shift-hue-warning: 45;
9
+ --shift-hue-danger: 25;
10
+ --shift-hue-neutral: 250;
11
+ --s-primary-50: oklch(.9778 .0108 var(--shift-hue-primary));
12
+ --s-primary-100: oklch(.9356 .0321 var(--shift-hue-primary));
13
+ --s-primary-200: oklch(.8811 .0636 var(--shift-hue-primary));
14
+ --s-primary-300: oklch(.8267 .0951 var(--shift-hue-primary));
15
+ --s-primary-400: oklch(.7422 .1211 var(--shift-hue-primary));
16
+ --s-primary-500: oklch(.6478 .1472 var(--shift-hue-primary));
17
+ --s-primary-600: oklch(.5733 .1383 var(--shift-hue-primary));
18
+ --s-primary-700: oklch(.4689 .1178 var(--shift-hue-primary));
19
+ --s-primary-800: oklch(.3944 .0894 var(--shift-hue-primary));
20
+ --s-primary-900: oklch(.32 .072 var(--shift-hue-primary));
21
+ --s-primary-950: oklch(.2378 .054 var(--shift-hue-primary));
22
+ --s-secondary-50: oklch(.9778 .0108 var(--shift-hue-secondary));
23
+ --s-secondary-100: oklch(.9356 .0321 var(--shift-hue-secondary));
24
+ --s-secondary-200: oklch(.8811 .0636 var(--shift-hue-secondary));
25
+ --s-secondary-300: oklch(.8267 .0951 var(--shift-hue-secondary));
26
+ --s-secondary-400: oklch(.7422 .1211 var(--shift-hue-secondary));
27
+ --s-secondary-500: oklch(.6478 .1472 var(--shift-hue-secondary));
28
+ --s-secondary-600: oklch(.5733 .1383 var(--shift-hue-secondary));
29
+ --s-secondary-700: oklch(.4689 .1178 var(--shift-hue-secondary));
30
+ --s-secondary-800: oklch(.3944 .0894 var(--shift-hue-secondary));
31
+ --s-secondary-900: oklch(.32 .072 var(--shift-hue-secondary));
32
+ --s-secondary-950: oklch(.2378 .054 var(--shift-hue-secondary));
33
+ --s-accent-50: oklch(.9778 .0108 var(--shift-hue-accent));
34
+ --s-accent-100: oklch(.9356 .0321 var(--shift-hue-accent));
35
+ --s-accent-200: oklch(.8811 .0636 var(--shift-hue-accent));
36
+ --s-accent-300: oklch(.8267 .0951 var(--shift-hue-accent));
37
+ --s-accent-400: oklch(.7422 .1211 var(--shift-hue-accent));
38
+ --s-accent-500: oklch(.6478 .1472 var(--shift-hue-accent));
39
+ --s-accent-600: oklch(.5733 .1383 var(--shift-hue-accent));
40
+ --s-accent-700: oklch(.4689 .1178 var(--shift-hue-accent));
41
+ --s-accent-800: oklch(.3944 .0894 var(--shift-hue-accent));
42
+ --s-accent-900: oklch(.32 .072 var(--shift-hue-accent));
43
+ --s-accent-950: oklch(.2378 .054 var(--shift-hue-accent));
44
+ --s-success-50: oklch(.9778 .0108 var(--shift-hue-success));
45
+ --s-success-100: oklch(.9356 .0321 var(--shift-hue-success));
46
+ --s-success-200: oklch(.8811 .0636 var(--shift-hue-success));
47
+ --s-success-300: oklch(.8267 .0951 var(--shift-hue-success));
48
+ --s-success-400: oklch(.7422 .1211 var(--shift-hue-success));
49
+ --s-success-500: oklch(.6478 .1472 var(--shift-hue-success));
50
+ --s-success-600: oklch(.5733 .1383 var(--shift-hue-success));
51
+ --s-success-700: oklch(.4689 .1178 var(--shift-hue-success));
52
+ --s-success-800: oklch(.3944 .0894 var(--shift-hue-success));
53
+ --s-success-900: oklch(.32 .072 var(--shift-hue-success));
54
+ --s-success-950: oklch(.2378 .054 var(--shift-hue-success));
55
+ --s-warning-50: oklch(.9778 .0108 var(--shift-hue-warning));
56
+ --s-warning-100: oklch(.9356 .0321 var(--shift-hue-warning));
57
+ --s-warning-200: oklch(.8811 .0636 var(--shift-hue-warning));
58
+ --s-warning-300: oklch(.8267 .0951 var(--shift-hue-warning));
59
+ --s-warning-400: oklch(.7422 .1211 var(--shift-hue-warning));
60
+ --s-warning-500: oklch(.6478 .1472 var(--shift-hue-warning));
61
+ --s-warning-600: oklch(.5733 .1383 var(--shift-hue-warning));
62
+ --s-warning-700: oklch(.4689 .1178 var(--shift-hue-warning));
63
+ --s-warning-800: oklch(.3944 .0894 var(--shift-hue-warning));
64
+ --s-warning-900: oklch(.32 .072 var(--shift-hue-warning));
65
+ --s-warning-950: oklch(.2378 .054 var(--shift-hue-warning));
66
+ --s-danger-50: oklch(.9778 .0108 var(--shift-hue-danger));
67
+ --s-danger-100: oklch(.9356 .0321 var(--shift-hue-danger));
68
+ --s-danger-200: oklch(.8811 .0636 var(--shift-hue-danger));
69
+ --s-danger-300: oklch(.8267 .0951 var(--shift-hue-danger));
70
+ --s-danger-400: oklch(.7422 .1211 var(--shift-hue-danger));
71
+ --s-danger-500: oklch(.6478 .1472 var(--shift-hue-danger));
72
+ --s-danger-600: oklch(.5733 .1383 var(--shift-hue-danger));
73
+ --s-danger-700: oklch(.4689 .1178 var(--shift-hue-danger));
74
+ --s-danger-800: oklch(.3944 .0894 var(--shift-hue-danger));
75
+ --s-danger-900: oklch(.32 .072 var(--shift-hue-danger));
76
+ --s-danger-950: oklch(.2378 .054 var(--shift-hue-danger));
77
+ --s-neutral-50: oklch(.9778 .0054 var(--shift-hue-neutral));
78
+ --s-neutral-100: oklch(.9356 .0072 var(--shift-hue-neutral));
79
+ --s-neutral-200: oklch(.8811 .009 var(--shift-hue-neutral));
80
+ --s-neutral-300: oklch(.8267 .0099 var(--shift-hue-neutral));
81
+ --s-neutral-400: oklch(.7422 .0108 var(--shift-hue-neutral));
82
+ --s-neutral-500: oklch(.6478 .0118 var(--shift-hue-neutral));
83
+ --s-neutral-600: oklch(.5733 .0108 var(--shift-hue-neutral));
84
+ --s-neutral-700: oklch(.4689 .0099 var(--shift-hue-neutral));
85
+ --s-neutral-800: oklch(.3944 .009 var(--shift-hue-neutral));
86
+ --s-neutral-900: oklch(.32 .0081 var(--shift-hue-neutral));
87
+ --s-neutral-950: oklch(.2378 .0072 var(--shift-hue-neutral));
88
+ --s-surface-base: light-dark(var(--s-neutral-50), var(--s-neutral-950));
89
+ --s-surface-raised: light-dark(var(--s-neutral-100), var(--s-neutral-900));
90
+ --s-surface-sunken: light-dark(var(--s-neutral-200), var(--s-neutral-800));
91
+ --s-surface-overlay: light-dark(var(--s-neutral-900), var(--s-neutral-100));
92
+ --s-text-primary: light-dark(var(--s-neutral-900), var(--s-neutral-50));
93
+ --s-text-secondary: light-dark(var(--s-neutral-700), var(--s-neutral-300));
94
+ --s-text-tertiary: light-dark(var(--s-neutral-500), var(--s-neutral-500));
95
+ --s-text-inverse: light-dark(var(--s-neutral-50), var(--s-neutral-900));
96
+ --s-border-default: light-dark(var(--s-neutral-200), var(--s-neutral-800));
97
+ --s-border-muted: light-dark(var(--s-neutral-100), var(--s-neutral-900));
98
+ --s-border-strong: light-dark(var(--s-neutral-400), var(--s-neutral-600));
99
+ --s-interactive-primary: light-dark(var(--s-primary-700), var(--s-primary-300));
100
+ --s-interactive-primary-hover: light-dark(var(--s-primary-800), var(--s-primary-200));
101
+ --s-interactive-primary-active: light-dark(var(--s-primary-900), var(--s-primary-100));
102
+ --s-interactive-secondary: light-dark(var(--s-secondary-700), var(--s-secondary-300));
103
+ --s-state-success: light-dark(var(--s-success-700), var(--s-success-300));
104
+ --s-state-success-bg: light-dark(var(--s-success-100), var(--s-success-900));
105
+ --s-state-warning: light-dark(var(--s-warning-700), var(--s-warning-300));
106
+ --s-state-warning-bg: light-dark(var(--s-warning-100), var(--s-warning-900));
107
+ --s-state-danger: light-dark(var(--s-danger-700), var(--s-danger-300));
108
+ --s-state-danger-bg: light-dark(var(--s-danger-100), var(--s-danger-900));
109
+ --s-focus-ring: light-dark(var(--s-primary-500), var(--s-primary-400));
110
+ --s-focus-ring-offset: light-dark(var(--s-neutral-50), var(--s-neutral-950));
111
+ --s-space-0: 0;
112
+ --s-space-1: .25rem;
113
+ --s-space-2: .5rem;
114
+ --s-space-3: .75rem;
115
+ --s-space-4: 1rem;
116
+ --s-space-5: 1.25rem;
117
+ --s-space-6: 1.5rem;
118
+ --s-space-7: 1.75rem;
119
+ --s-space-8: 2rem;
120
+ --s-space-9: 2.25rem;
121
+ --s-space-10: 2.5rem;
122
+ --s-space-11: 2.75rem;
123
+ --s-space-12: 3rem;
124
+ --s-space-14: 3.5rem;
125
+ --s-space-16: 4rem;
126
+ --s-space-20: 5rem;
127
+ --s-space-24: 6rem;
128
+ --s-space-28: 7rem;
129
+ --s-space-32: 8rem;
130
+ --s-space-36: 9rem;
131
+ --s-space-40: 10rem;
132
+ --s-space-44: 11rem;
133
+ --s-space-48: 12rem;
134
+ --s-space-52: 13rem;
135
+ --s-space-56: 14rem;
136
+ --s-space-60: 15rem;
137
+ --s-space-64: 16rem;
138
+ --s-space-72: 18rem;
139
+ --s-space-80: 20rem;
140
+ --s-space-96: 24rem;
141
+ --s-space-px: 1px;
142
+ --s-space-0_5: .125rem;
143
+ --s-space-1_5: .375rem;
144
+ --s-space-2_5: .625rem;
145
+ --s-space-3_5: .875rem;
146
+ --s-radius-none: 0;
147
+ --s-radius-sm: .125rem;
148
+ --s-radius-base: .25rem;
149
+ --s-radius-md: .375rem;
150
+ --s-radius-lg: .5rem;
151
+ --s-radius-xl: .75rem;
152
+ --s-radius-2xl: 1rem;
153
+ --s-radius-3xl: 1.5rem;
154
+ --s-radius-full: 9999px;
155
+ --s-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
156
+ --s-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
157
+ --s-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
158
+ --s-text-xs: clamp(.6875rem, .625rem + .25vi, .75rem);
159
+ --s-text-sm: clamp(.8125rem, .75rem + .25vi, .875rem);
160
+ --s-text-base: clamp(.9375rem, .875rem + .25vi, 1rem);
161
+ --s-text-lg: clamp(1.0625rem, 1rem + .25vi, 1.125rem);
162
+ --s-text-xl: clamp(1.1875rem, 1.0625rem + .5vi, 1.25rem);
163
+ --s-text-2xl: clamp(1.4375rem, 1.25rem + .75vi, 1.5rem);
164
+ --s-text-3xl: clamp(1.75rem, 1.5rem + 1vi, 1.875rem);
165
+ --s-text-4xl: clamp(2.125rem, 1.75rem + 1.5vi, 2.25rem);
166
+ --s-text-5xl: clamp(2.75rem, 2.25rem + 2vi, 3rem);
167
+ --s-leading-none: 1;
168
+ --s-leading-tight: 1.25;
169
+ --s-leading-snug: 1.375;
170
+ --s-leading-normal: 1.5;
171
+ --s-leading-relaxed: 1.625;
172
+ --s-leading-loose: 2;
173
+ --s-font-thin: 100;
174
+ --s-font-extralight: 200;
175
+ --s-font-light: 300;
176
+ --s-font-normal: 400;
177
+ --s-font-medium: 500;
178
+ --s-font-semibold: 600;
179
+ --s-font-bold: 700;
180
+ --s-font-extrabold: 800;
181
+ --s-font-black: 900;
182
+ --s-tracking-tighter: -.05em;
183
+ --s-tracking-tight: -.025em;
184
+ --s-tracking-normal: 0;
185
+ --s-tracking-wide: .025em;
186
+ --s-tracking-wider: .05em;
187
+ --s-tracking-widest: .1em;
188
+ --s-duration-75: 75ms;
189
+ --s-duration-100: .1s;
190
+ --s-duration-150: .15s;
191
+ --s-duration-200: .2s;
192
+ --s-duration-300: .3s;
193
+ --s-duration-500: .5s;
194
+ --s-duration-700: .7s;
195
+ --s-duration-1000: 1s;
196
+ --s-ease-linear: linear;
197
+ --s-ease-in: cubic-bezier(.4, 0, 1, 1);
198
+ --s-ease-out: cubic-bezier(0, 0, .2, 1);
199
+ --s-ease-in-out: cubic-bezier(.4, 0, .2, 1);
200
+ --s-ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);
201
+ --s-shadow-sm: 0 1px 2px 0 #0000000d;
202
+ --s-shadow-base: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
203
+ --s-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
204
+ --s-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
205
+ --s-shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
206
+ --s-shadow-2xl: 0 25px 50px -12px #00000040;
207
+ --s-shadow-inner: inset 0 2px 4px 0 #0000000d;
208
+ --s-shadow-none: 0 0 #0000;
209
+ }
210
+ }
package/package.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "name": "@shift-css/core",
3
+ "version": "0.0.1",
4
+ "description": "Zero-runtime, OKLCH-native CSS framework with cascade layers and native light-dark() theming",
5
+ "type": "module",
6
+ "main": "./dist/shift.css",
7
+ "exports": {
8
+ ".": "./dist/shift.css",
9
+ "./min": "./dist/shift.min.css",
10
+ "./reset": "./dist/reset.css",
11
+ "./tokens": "./dist/tokens.css",
12
+ "./package.json": "./package.json"
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "build": "tsx scripts/build.ts",
19
+ "build:tokens": "tsx scripts/generate-colors.ts",
20
+ "dev": "tsx scripts/build.ts --watch",
21
+ "clean": "rm -rf dist",
22
+ "test": "bun test",
23
+ "test:unit": "bun test tests/*.test.ts",
24
+ "test:e2e": "playwright test",
25
+ "test:visual": "playwright test --project=visual-chrome",
26
+ "test:visual:all": "playwright test tests/e2e/*.visual.ts",
27
+ "test:a11y": "playwright test --project=accessibility",
28
+ "test:contrast": "playwright test --project=contrast",
29
+ "test:update-snapshots": "playwright test --update-snapshots",
30
+ "serve-fixtures": "bun run scripts/serve-fixtures.ts"
31
+ },
32
+ "devDependencies": {
33
+ "@axe-core/playwright": "^4.10.1",
34
+ "@playwright/test": "^1.50.1",
35
+ "@types/bun": "^1.3.6",
36
+ "@types/node": "^22.10.5",
37
+ "lightningcss": "^1.30.2",
38
+ "tsx": "^4.21.0",
39
+ "typescript": "^5.9.3"
40
+ },
41
+ "keywords": [
42
+ "css",
43
+ "css-framework",
44
+ "oklch",
45
+ "design-tokens",
46
+ "cascade-layers",
47
+ "light-dark",
48
+ "zero-runtime",
49
+ "color-system"
50
+ ],
51
+ "author": "",
52
+ "license": "MIT",
53
+ "repository": {
54
+ "type": "git",
55
+ "url": "git+https://github.com/auswm85/shift-css.git"
56
+ },
57
+ "bugs": {
58
+ "url": "https://github.com/auswm85/shift-css/issues"
59
+ },
60
+ "homepage": "https://github.com/auswm85/shift-css#readme",
61
+ "sideEffects": [
62
+ "**/*.css"
63
+ ]
64
+ }