npm - @shift-css/core - Versions diffs - 0.0.1 → 0.4.0 - Mend

@shift-css/core 0.0.1 → 0.4.0

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 (2) hide show

package/dist/shift.css.map +1 -1
package/package.json +1 -1

package/dist/shift.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":null,"mappings":"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;;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":[]}
1	+ {"version":3,"sourceRoot":null,"mappings":"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;;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;;;;ECrdA;;;;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;;;;EIrRA;;;;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":["home/runner/work/shift-css/shift-css/packages/core/src/index.css","home/runner/work/shift-css/shift-css/packages/core/src/base/reset.css","home/runner/work/shift-css/shift-css/packages/core/src/components/input.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/spacing.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/flex.css","home/runner/work/shift-css/shift-css/packages/core/src/tokens/tokens.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/layout.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/visibility.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/typography.css","home/runner/work/shift-css/shift-css/packages/core/src/components/surface.css","home/runner/work/shift-css/shift-css/packages/core/src/components/button.css","home/runner/work/shift-css/shift-css/packages/core/src/components/card.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 - 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 - 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 - 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 - 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 - 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 - 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","/\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 - 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 - 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"],"names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@shift-css/core",
-  "version": "0.0.1",
+  "version": "0.4.0",
   "description": "Zero-runtime, OKLCH-native CSS framework with cascade layers and native light-dark() theming",
   "type": "module",
   "main": "./dist/shift.css",