@casoon/tailwindcss-utilities/dist.css

Complete utility system for Tailwind CSS v4 - Essential layout, accessibility, and UI utilities with tree-shaking

/*!
 * tailwindcss-utilities - Plain CSS Distribution
 * Version: 0.9.0
 * 
 * This version can be used WITHOUT Tailwind CSS.
 * All @utility directives converted to standard CSS classes.
 */

/*!
 * Casoon Utilities - Complete Utility System for Tailwind v4
 * Version: 0.9.0 — COMPLETELY CONSOLIDATED & ENHANCED
 * 
 * SYSTEMATICALLY CONSOLIDATED FROM:
 * - src/index.css (main file with .definitions)
 * - src/styles/base/tokens.css
 * - src/styles/tokens/design-tokens.css
 * - src/styles/utilities/core.css
 * - src/styles/utilities/layout.css
 * - src/styles/utilities/effects.css
 * - src/styles/components/surfaces.css
 * - src/styles/patterns/component-presets.css
 * 
 * TOTAL: 8 CSS FILES → Pure Tailwind v4 (120+ classes + 80+ @utility)
 * 
 * Features:
 * ✅ Tree-Shaking Support with @utility directives
 * ✅ Modern Design System with comprehensive tokens
 * ✅ Accessibility-first components and utilities
 * ✅ Progressive Enhancement & Fallbacks
 * ✅ Container Queries & Responsive Design
 * ✅ Performance optimized with reduced motion support
 * 
 * Usage: 
 */

/* Note:  should be added by the consumer */

/* =========================================================
   CONSOLIDATED DESIGN TOKENS & THEME
   Complete design system with light/dark theme support
   ========================================================= */
:root {
  /* === CORE COLOR SYSTEM === */
  --cs-bg: #0b0c0f;
  --cs-surface: #14161a;
  --cs-elev1: #1b1e24;
  --cs-elev2: #21252d;
  --cs-text: #eef1f6;
  --cs-text-muted: #b6bfcc;
  --cs-border: #2a2f39;
  --cs-brand: #4f7cff;
  --cs-brand-contrast: #0b0d12;
  --cs-brand-ink: var(--cs-brand, #4f7cff);

  /* STATE COLORS */
  --cs-success: #22c55e;
  --cs-warning: #f59e0b;
  --cs-danger: #ef4444;
  --cs-info: #06b6d4;

  /* === TYPOGRAPHY SYSTEM === */
  --cs-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --cs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --cs-font-size: 16px;
  --cs-line: 1.5;

  /* FLUID TYPOGRAPHY SCALE */
  --cs-fs-xs: clamp(0.78rem, 0.75rem + 0.2cqi, 0.84rem);
  --cs-fs-sm: clamp(0.88rem, 0.82rem + 0.3cqi, 0.95rem);
  --cs-fs-md: clamp(1rem, 0.95rem + 0.4cqi, 1.125rem);
  --cs-fs-lg: clamp(1.25rem, 1.05rem + 0.8cqi, 1.5rem);
  --cs-fs-xl: clamp(1.5rem, 1.2rem + 1.2cqi, 1.875rem);
  --cs-fs-2xl: clamp(1.875rem, 1.4rem + 1.6cqi, 2.25rem);
  
  /* TYPOGRAPHY UTILITIES */
  --cs-leading-relaxed: 1.625;
  --cs-leading-loose: 2;
  --cs-text-balance: balance;

  /* === SPACING SYSTEM === */
  --cs-density: 1;
  --cs-space-1: calc(4px * var(--cs-density));
  --cs-space-2: calc(8px * var(--cs-density));
  --cs-space-3: calc(12px * var(--cs-density));
  --cs-space-4: calc(16px * var(--cs-density));
  --cs-space-6: calc(24px * var(--cs-density));
  --cs-space-8: calc(32px * var(--cs-density));

  /* === RADIUS & SHADOW SYSTEM === */
  --cs-radius: 10px;
  --cs-radius-sm: calc(var(--cs-radius) - 4px);
  --cs-radius-lg: calc(var(--cs-radius) + 6px);
  
  --cs-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.1);
  --cs-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.18);

  /* === MOTION SYSTEM === */
  --cs-transition: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --cs-anim-duration-sm: 160ms;
  --cs-anim-duration-md: 280ms;
  --cs-anim-duration-lg: 420ms;
  --cs-anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cs-anim-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --cs-anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* === Z-INDEX SYSTEM === */
  --cs-z-0: 0;
  --cs-z-1: 1;
  --cs-z-base: 1;
  --cs-z-10: 10;
  --cs-z-20: 20;
  --cs-z-30: 30;
  --cs-z-popover: 30;
  --cs-z-40: 40;
  --cs-z-tooltip: 40;
  --cs-z-50: 50;
  --cs-z-toast: 50;
  --cs-z-60: 60;
  --cs-z-modal: 60;
  --cs-z-70: 70;
  --cs-z-80: 80;
  --cs-z-90: 90;
  --cs-z-100: 100;
  --cs-z-200: 200;
  --cs-z-300: 300;
  --cs-z-400: 400;
  --cs-z-500: 500;
  --cs-z-600: 600;
  --cs-z-700: 700;
  --cs-z-800: 800;
  --cs-z-900: 900;
  --cs-z-999: 999;
  --cs-z-9999: 9999;
  --cs-z-max: 2147483647;

  /* === LAYOUT SYSTEM === */
  --cs-page-max: 1200px;
  --cs-page-pad: var(--cs-space-4);

  /* === GLASS/BACKDROP SYSTEM === */
  --cs-acrylic-blur: 14px;
  --cs-acrylic-tint: rgba(20, 22, 26, 0.55);
  --cs-acrylic-border: rgba(255, 255, 255, 0.06);

  /* === PROGRESSIVE COLOR TOKENS === */
  --cs-brand-oklch: oklch(60% 0.15 255);
}

/* =========================================================
   LIGHT THEME SUPPORT
   Complete theme switching system
   ========================================================= */
@media (prefers-color-scheme: light) {
  @theme {
    --cs-bg: #ffffff;
    --cs-surface: #f7f8fa;
    --cs-elev1: #ffffff;
    --cs-elev2: #ffffff;
    --cs-text: #101217;
    --cs-text-muted: #475066;
    --cs-border: #dfe3ea;
    --cs-brand: #375dfb;
    --cs-brand-contrast: #ffffff;
    --cs-shadow-1: 0 1px 2px rgba(18, 24, 40, 0.06), 0 1px 1px rgba(18, 24, 40, 0.04);
    --cs-shadow-2: 0 10px 24px rgba(18, 24, 40, 0.1), 0 2px 8px rgba(18, 24, 40, 0.06);
    --cs-acrylic-tint: rgba(255, 255, 255, 0.65);
    --cs-acrylic-border: rgba(0, 0, 0, 0.06);
  }
}

/* Manual theme override classes */
.cs-theme-light {
  --cs-bg: #ffffff;
  --cs-surface: #f7f8fa;
  --cs-elev1: #ffffff;
  --cs-elev2: #ffffff;
  --cs-text: #101217;
  --cs-text-muted: #475066;
  --cs-border: #dfe3ea;
  --cs-brand: #375dfb;
  --cs-brand-contrast: #ffffff;
  --cs-shadow-1: 0 1px 2px rgba(18, 24, 40, 0.06), 0 1px 1px rgba(18, 24, 40, 0.04);
  --cs-shadow-2: 0 10px 24px rgba(18, 24, 40, 0.1), 0 2px 8px rgba(18, 24, 40, 0.06);
  --cs-acrylic-tint: rgba(255, 255, 255, 0.65);
  --cs-acrylic-border: rgba(0, 0, 0, 0.06);
}

.cs-theme-dark {
  --cs-bg: #0b0c0f;
  --cs-surface: #14161a;
  --cs-elev1: #1b1e24;
  --cs-elev2: #21252d;
  --cs-text: #eef1f6;
  --cs-text-muted: #b6bfcc;
  --cs-border: #2a2f39;
  --cs-brand: #4f7cff;
  --cs-brand-contrast: #0b0d12;
}

/* =========================================================
   ACCESSIBILITY UTILITIES
   Screen readers, focus management, keyboard navigation
   ========================================================= */

.cs-sr-only  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cs-focus-ring  {
  outline: none;
  
  &:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--cs-brand, #4f7cff), 0 0 0 4px rgba(79, 124, 255, 20%);
    transition: box-shadow var(--cs-transition);
  }
}

.cs-focus-ring-within  {
  &:focus-within {
    box-shadow: 0 0 0 2px var(--cs-brand, #4f7cff), 0 0 0 6px rgba(79, 124, 255, 22%);
    border-radius: var(--cs-radius);
  }
}

/* =========================================================
   Z-INDEX UTILITIES
   Complete z-index scale for modern UI layering
   ========================================================= */

.cs-z-0  { z-index: var(--cs-z-0); position: relative; }
.cs-z-1  { z-index: var(--cs-z-1); position: relative; }
.cs-z-base  { z-index: var(--cs-z-base); position: relative; }
.cs-z-10  { z-index: var(--cs-z-10); position: relative; }
.cs-z-20  { z-index: var(--cs-z-20); position: relative; }
.cs-z-30  { z-index: var(--cs-z-30); position: relative; }
.cs-z-popover  { z-index: var(--cs-z-popover); position: relative; }
.cs-z-40  { z-index: var(--cs-z-40); position: relative; }
.cs-z-tooltip  { z-index: var(--cs-z-tooltip); position: relative; }
.cs-z-50  { z-index: var(--cs-z-50); position: relative; }
.cs-z-toast  { z-index: var(--cs-z-toast); position: relative; }
.cs-z-60  { z-index: var(--cs-z-60); position: relative; }
.cs-z-modal  { z-index: var(--cs-z-modal); position: relative; }
.cs-z-70  { z-index: var(--cs-z-70); position: relative; }
.cs-z-80  { z-index: var(--cs-z-80); position: relative; }
.cs-z-90  { z-index: var(--cs-z-90); position: relative; }
.cs-z-100  { z-index: var(--cs-z-100); position: relative; }
.cs-z-200  { z-index: var(--cs-z-200); position: relative; }
.cs-z-300  { z-index: var(--cs-z-300); position: relative; }
.cs-z-400  { z-index: var(--cs-z-400); position: relative; }
.cs-z-500  { z-index: var(--cs-z-500); position: relative; }
.cs-z-600  { z-index: var(--cs-z-600); position: relative; }
.cs-z-700  { z-index: var(--cs-z-700); position: relative; }
.cs-z-800  { z-index: var(--cs-z-800); position: relative; }
.cs-z-900  { z-index: var(--cs-z-900); position: relative; }
.cs-z-999  { z-index: var(--cs-z-999); position: relative; }
.cs-z-9999  { z-index: var(--cs-z-9999); position: relative; }
.cs-z-max  { z-index: var(--cs-z-max); position: relative; }

/* =========================================================
   CORE UTILITIES & COMPONENTS
   Main utility definitions using modern .syntax
   ========================================================= */

/* === LOADING & PROGRESS UTILITIES === */

@utility cs-spinner  {
  animation: cs-rotate 1s linear infinite;
  will-change: transform;
}

.cs-skeleton  {
  background: linear-gradient(
    90deg, 
    var(--cs-border) 25%, 
    var(--cs-elev1) 50%, 
    var(--cs-border) 75%
  );
  background-size: 200% 100%;
  animation: cs-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--cs-radius);
}

@keyframes cs-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes cs-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cs-progress  {
  width: 100%;
  height: 8px;
  background: var(--cs-border);
  border-radius: var(--cs-radius);
  overflow: hidden;
  position: relative;
}

.cs-progress-bar  {
  height: 100%;
  background: var(--cs-brand, #4f7cff);
  border-radius: inherit;
  transition: width var(--cs-transition);
}

.cs-progress-indeterminate  {
  background: linear-gradient(
    90deg,
    transparent,
    var(--cs-brand, #4f7cff),
    transparent
  );
  background-size: 200% 100%;
  animation: cs-progress-slide 1.5s ease-in-out infinite;
}

@keyframes cs-progress-slide {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === SCROLL & OVERFLOW UTILITIES === */

.cs-scroll-smooth  {
  scroll-behavior: smooth;
}

.cs-scroll-auto  {
  scroll-behavior: auto;
}

.cs-scrollbar-thin  {
  scrollbar-width: thin;
}

.cs-scrollbar-none  {
  scrollbar-width: none;
  -ms-overflow-style: none;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.cs-snap-x  {
  scroll-snap-type: x mandatory;
}

.cs-snap-y  {
  scroll-snap-type: y mandatory;
}

.cs-snap-both  {
  scroll-snap-type: both mandatory;
}

.cs-snap-none  {
  scroll-snap-type: none;
}

.cs-snap-start  {
  scroll-snap-align: start;
}

.cs-snap-end  {
  scroll-snap-align: end;
}

.cs-snap-center  {
  scroll-snap-align: center;
}

/* === ENHANCED CARD UTILITIES === */

.cs-card-product  {
  background: var(--cs-elev1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-6);
  transition: all var(--cs-transition);
  position: relative;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--cs-shadow-2);
    border-color: var(--cs-brand, #4f7cff);
  }
}

.cs-card-hero  {
  background: linear-gradient(135deg, var(--cs-elev1), var(--cs-elev2));
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cs-brand, #4f7cff), var(--cs-success), var(--cs-info));
  }
}

.cs-card-compact  {
  background: var(--cs-elev1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-4);
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  transition: all var(--cs-transition);
  
  &:hover {
    background: var(--cs-elev2);
  }
}

.cs-container-fluid  {
  width: 100%;
  padding-left: var(--cs-page-pad);
  padding-right: var(--cs-page-pad);
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  background-color: var(--cs-surface, #14161a);
  color: var(--cs-text, #eef1f6);
  
  @container (min-width: 768px) {
    padding-left: calc(var(--cs-page-pad) + var(--cs-space-2));
    padding-right: calc(var(--cs-page-pad) + var(--cs-space-2));
  }
  
  @container (min-width: 1200px) {
    max-width: var(--cs-page-max);
  }
}

/* =========================================================
   LAYOUT UTILITIES
   Modern layout patterns and micro-recipes
   ========================================================= */

.cs-stack  {
  display: grid;
  gap: var(--cs-space-3);
}

.cs-stack-sm  {
  display: grid;
  gap: var(--cs-space-2);
}

.cs-stack-lg  {
  display: grid;
  gap: var(--cs-space-6);
}

.cs-cluster  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
  align-items: center;
}

.cs-center  {
  display: grid;
  place-items: center;
}

.cs-grid-fit  {
  display: grid;
  gap: var(--cs-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.cs-aspect  {
  aspect-ratio: var(--cs-aspect, 16 / 9);
}

.cs-bleed-x  {
  margin-inline: calc(var(--cs-page-pad) * -1);
  
  @container (min-width: 960px) {
    margin-inline: calc((var(--cs-page-pad) + var(--cs-space-3)) * -1);
  }
}

.cs-safe-pad  {
  padding-inline: max(var(--cs-page-pad), env(safe-area-inset-left));
  padding-inline-end: max(var(--cs-page-pad), env(safe-area-inset-right));
  padding-block-end: max(var(--cs-space-4), env(safe-area-inset-bottom));
}

/* Layout positioning utilities */
.cs-sticky  {
  position: sticky;
  top: 0;
}

.cs-will-change-transform  {
  will-change: transform;
}

.cs-will-change-opacity  {
  will-change: opacity;
}

/* =========================================================
   TYPOGRAPHY UTILITIES
   Fluid typography with line height optimization
   ========================================================= */

.cs-text-xs  { 
  font-size: var(--cs-fs-xs); 
  line-height: var(--cs-line); 
}

.cs-text-sm  { 
  font-size: var(--cs-fs-sm); 
  line-height: var(--cs-line); 
}

.cs-text-md  { 
  font-size: var(--cs-fs-md); 
  line-height: var(--cs-line); 
}

.cs-text-lg  { 
  font-size: var(--cs-fs-lg); 
  line-height: calc(var(--cs-line) + 0.05); 
}

.cs-text-xl  { 
  font-size: var(--cs-fs-xl); 
  line-height: calc(var(--cs-line) + 0.1); 
}

.cs-text-2xl  { 
  font-size: var(--cs-fs-2xl); 
  line-height: calc(var(--cs-line) + 0.12); 
}

.cs-font-sans  { 
  font-family: var(--cs-font-sans); 
}

.cs-font-mono  { 
  font-family: var(--cs-font-mono); 
}

/* =========================================================
   GRID UTILITIES
   Advanced grid system with auto-fit patterns
   ========================================================= */

.cs-grid-auto-fit-sm  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cs-space-4);
}

.cs-grid-auto-fit-md  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--cs-space-4);
}

.cs-grid-auto-fit-lg  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--cs-space-4);
}

.cs-grid-12  {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--cs-space-4);
}

/* Fixed grid columns */
.cs-grid-cols-2  { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: var(--cs-space-4); 
}

.cs-grid-cols-3  { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: var(--cs-space-4); 
}

.cs-grid-cols-4  { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: var(--cs-space-4); 
}

.cs-grid-cols-6  { 
  display: grid; 
  grid-template-columns: repeat(6, 1fr); 
  gap: var(--cs-space-4); 
}

.cs-grid-cols-8  { 
  display: grid; 
  grid-template-columns: repeat(8, 1fr); 
  gap: var(--cs-space-4); 
}

.cs-grid-cols-9  { 
  display: grid; 
  grid-template-columns: repeat(9, 1fr); 
  gap: var(--cs-space-4); 
}

.cs-grid-cols-12  { 
  display: grid; 
  grid-template-columns: repeat(12, 1fr); 
  gap: var(--cs-space-4); 
}

/* Column spanning utilities for use within cs-grid-12 */
.cs-col-1  { grid-column: span 1; }
.cs-col-2  { grid-column: span 2; }
.cs-col-3  { grid-column: span 3; }
.cs-col-4  { grid-column: span 4; }
.cs-col-5  { grid-column: span 5; }
.cs-col-6  { grid-column: span 6; }
.cs-col-7  { grid-column: span 7; }
.cs-col-8  { grid-column: span 8; }
.cs-col-9  { grid-column: span 9; }
.cs-col-10  { grid-column: span 10; }
.cs-col-11  { grid-column: span 11; }
.cs-col-12  { grid-column: span 12; }

/* =========================================================
   SPACING UTILITIES
   Gap, padding, margin utilities using design tokens
   ========================================================= */

.cs-space-1  { gap: var(--cs-space-1); }
.cs-space-2  { gap: var(--cs-space-2); }
.cs-space-3  { gap: var(--cs-space-3); }
.cs-space-4  { gap: var(--cs-space-4); }
.cs-space-6  { gap: var(--cs-space-6); }
.cs-space-8  { gap: var(--cs-space-8); }

.cs-p-1  { padding: var(--cs-space-1); }
.cs-p-2  { padding: var(--cs-space-2); }
.cs-p-3  { padding: var(--cs-space-3); }
.cs-p-4  { padding: var(--cs-space-4); }
.cs-p-6  { padding: var(--cs-space-6); }
.cs-p-8  { padding: var(--cs-space-8); }

.cs-m-1  { margin: var(--cs-space-1); }
.cs-m-2  { margin: var(--cs-space-2); }
.cs-m-3  { margin: var(--cs-space-3); }
.cs-m-4  { margin: var(--cs-space-4); }
.cs-m-6  { margin: var(--cs-space-6); }
.cs-m-8  { margin: var(--cs-space-8); }

/* Directional spacing utilities */
.cs-px-1  { padding-inline: var(--cs-space-1); }
.cs-px-2  { padding-inline: var(--cs-space-2); }
.cs-px-3  { padding-inline: var(--cs-space-3); }
.cs-px-4  { padding-inline: var(--cs-space-4); }

.cs-py-1  { padding-block: var(--cs-space-1); }
.cs-py-2  { padding-block: var(--cs-space-2); }
.cs-py-3  { padding-block: var(--cs-space-3); }
.cs-py-4  { padding-block: var(--cs-space-4); }

/* === TYPOGRAPHY UTILITIES === */

.cs-text-balance  {
  text-wrap: var(--cs-text, #eef1f6);
}

.cs-text-gradient  {
  background: linear-gradient(135deg, var(--cs-brand, #4f7cff), var(--cs-success));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cs-prose  {
  max-width: 65ch;
  line-height: var(--cs-leading-relaxed);
  
  & h1, & h2, & h3 {
    text-wrap: var(--cs-text, #eef1f6);
    margin-top: 2em;
    margin-bottom: 1em;
  }
  
  & p {
    margin-bottom: 1.25em;
  }
  
  & ul, & ol {
    padding-left: 2em;
    margin-bottom: 1.25em;
  }
  
  & blockquote {
    border-left: 4px solid var(--cs-border);
    padding-left: 1em;
    font-style: italic;
    margin: 1.5em 0;
  }
}

.cs-font-feature-numbers  {
  font-feature-settings: "tnum";
}

/* =========================================================
   REDUCED MOTION SUPPORT & ACCESSIBILITY
   Full accessibility compliance for motion-sensitive users
   ========================================================= */

.cs-surface  {
  background: var(--cs-surface, #14161a);
  color: var(--cs-text, #eef1f6);
}

.cs-surface-elevated  {
  background: var(--cs-elev1);
  color: var(--cs-text, #eef1f6);
}

.cs-surface-raised  {
  background: var(--cs-elev2);
  color: var(--cs-text, #eef1f6);
}

.cs-bg-brand  {
  background-color: var(--cs-brand, #4f7cff);
  color: var(--cs-brand, #4f7cff);
}

/* Radius utilities */
.cs-radius-sm  { border-radius: var(--cs-radius-sm); }
.cs-radius  { border-radius: var(--cs-radius); }
.cs-radius-lg  { border-radius: var(--cs-radius-lg); }

/* Shadow utilities */
.cs-shadow  { box-shadow: var(--cs-shadow-1); }
.cs-shadow-lg  { box-shadow: var(--cs-shadow-2); }

/* =========================================================
   CARD COMPONENTS
   Complete card system with variants
   ========================================================= */

.cs-card  {
  background: var(--cs-surface, #14161a);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-4);
  box-shadow: var(--cs-shadow-1);
}

.cs-card-elevated  {
  background: var(--cs-elev1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-4);
  box-shadow: var(--cs-shadow-2);
}

/* =========================================================
   BUTTON COMPONENTS
   Complete button system with variants
   ========================================================= */

.cs-btn  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cs-space-2) var(--cs-space-4);
  border-radius: var(--cs-radius);
  font-weight: 500;
  text-decoration: none;
  transition: var(--cs-transition);
  cursor: pointer;
  border: 0;
  min-height: 44px; /* Touch target compliance */
  min-width: 44px;
}

.cs-btn-primary  {
  background: var(--cs-brand, #4f7cff);
  color: var(--cs-brand, #4f7cff);
  
  &:hover {
    background: rgba(79, 124, 255, 85%);
  }
  
  &:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--cs-brand, #4f7cff), 0 0 0 4px rgba(79, 124, 255, 25%);
  }
}

.cs-btn-secondary  {
  background: var(--cs-elev1);
  color: var(--cs-text, #eef1f6);
  border: 1px solid var(--cs-border);
  
  &:hover {
    background: var(--cs-elev2);
  }
  
  &:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--cs-border), 0 0 0 4px color-mix(in srgb, var(--cs-text, #eef1f6) 15%, transparent);
  }
}

.cs-btn-outline  {
  background: transparent;
  color: var(--cs-brand, #4f7cff);
  border: 1px solid var(--cs-brand, #4f7cff);
  
  &:hover {
    background: var(--cs-brand, #4f7cff);
    color: var(--cs-brand, #4f7cff);
  }
  
  &:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--cs-brand, #4f7cff), 0 0 0 4px rgba(79, 124, 255, 25%);
  }
}

.cs-btn-ghost  {
  background: transparent;
  color: var(--cs-text, #eef1f6);
  border: 1px solid transparent;
  
  &:hover {
    background: var(--cs-elev1);
    border-color: var(--cs-border);
  }
  
  &:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--cs-border), 0 0 0 4px color-mix(in srgb, var(--cs-text, #eef1f6) 15%, transparent);
  }
}

/* Button sizes */
.cs-btn-sm  {
  padding: var(--cs-space-1) var(--cs-space-3);
  font-size: var(--cs-fs-sm);
  min-height: 36px;
  min-width: 36px;
}

.cs-btn-lg  {
  padding: var(--cs-space-3) var(--cs-space-6);
  font-size: var(--cs-fs-lg);
  min-height: 52px;
  min-width: 52px;
}

/* =========================================================
   ALERT COMPONENTS
   Semantic feedback alerts with state colors
   ========================================================= */

.cs-alert  {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  padding: var(--cs-space-4);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface, #14161a);
}

.cs-alert-info  {
  border-color: var(--cs-info, #0ea5e9);
  background: color-mix(in srgb, var(--cs-info, #0ea5e9) 8%, var(--cs-surface, #14161a));
  color: var(--cs-info, #0ea5e9);
}

.cs-alert-success  {
  border-color: var(--cs-success, #22c55e);
  background: color-mix(in srgb, var(--cs-success, #22c55e) 8%, var(--cs-surface, #14161a));
  color: var(--cs-success, #22c55e);
}

.cs-alert-warning  {
  border-color: var(--cs-warning, #f59e0b);
  background: color-mix(in srgb, var(--cs-warning, #f59e0b) 8%, var(--cs-surface, #14161a));
  color: var(--cs-warning, #f59e0b);
}

.cs-alert-danger  {
  border-color: var(--cs-danger, #ef4444);
  background: color-mix(in srgb, var(--cs-danger, #ef4444) 8%, var(--cs-surface, #14161a));
  color: var(--cs-danger, #ef4444);
}

/* =========================================================
   BADGE COMPONENTS
   Status badges and tags with variants
   ========================================================= */

.cs-badge  {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-1);
  padding: var(--cs-space-1) var(--cs-space-2);
  border-radius: var(--cs-radius-sm);
  font-size: var(--cs-fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.cs-badge-primary  {
  background: var(--cs-brand, #4f7cff);
  color: var(--cs-brand, #4f7cff);
}

.cs-badge-secondary  {
  background: var(--cs-text, #eef1f6);
  color: var(--cs-bg);
}

.cs-badge-success  {
  background: var(--cs-success, #22c55e);
  color: white;
}

.cs-badge-warning  {
  background: var(--cs-warning, #f59e0b);
  color: white;
}

.cs-badge-danger  {
  background: var(--cs-danger, #ef4444);
  color: white;
}

.cs-badge-outline  {
  background: transparent;
  border: 1px solid currentColor;
}

/* =========================================================
   ACRYLIC SURFACE COMPONENT
   Modern glass effect with backdrop filtering
   ========================================================= */

.cs-acrylic  {
  background: var(--cs-acrylic-tint, rgba(20, 22, 26, 0.55));
  border: 1px solid var(--cs-acrylic-border, rgba(255, 255, 255, 0.06));
  border-radius: var(--cs-radius, 10px);
  box-shadow: var(--cs-shadow-2);
  -webkit-backdrop-filter: saturate(140%) blur(var(--cs-acrylic-blur, 14px));
  backdrop-filter: saturate(140%) blur(var(--cs-acrylic-blur, 14px));
  background-clip: padding-box;
  
  @media (max-width: 480px) {
    --cs-acrylic-blur: 8px;
    box-shadow: var(--cs-shadow-1);
  }
}

/* =========================================================
   ANIMATION UTILITIES
   Performance-optimized micro-interactions
   ========================================================= */

.cs-pulse  {
  animation: csPulse 1.2s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes csPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.75; }
  100% { transform: scale(1); opacity: 1; }
}

.cs-fade-delayed  {
  opacity: 0;
  animation: csFadeIn var(--cs-anim-duration-lg, 420ms) var(--cs-anim-ease-out, ease-out) forwards;
  animation-delay: 0.4s;
}

@keyframes csFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cs-shimmer  {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--cs-elev1), var(--cs-elev2), var(--cs-elev1));
  background-size: 200% 100%;
  animation: csShimmer 2s linear infinite;
}

@keyframes csShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.cs-spin  {
  animation: csSpin 1s linear infinite;
}

@keyframes csSpin {
  to { transform: rotate(360deg); }
}

/* Glow effect utility */
.cs-glow  {
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 0.4s ease-out;
  
  &.cs-glow-active {
    box-shadow:
      0 0 0 3px rgba(79, 124, 255, 40%),
      0 0 12px rgba(79, 124, 255, 65%);
  }
}

/* =========================================================
   RESPONSIVE VISIBILITY UTILITIES
   Container query based visibility controls
   ========================================================= */

@container (max-width: 640px) {
  .cs-hide-mobile { display: none !important; }
  .cs-show-mobile { display: block !important; }
}

@container (min-width: 641px) and (max-width: 1024px) {
  .cs-hide-tablet { display: none !important; }
  .cs-show-tablet { display: block !important; }
}

@container (min-width: 1025px) {
  .cs-hide-desktop { display: none !important; }
  .cs-show-desktop { display: block !important; }
}

/* =========================================================
   PROGRESSIVE ENHANCEMENT
   Modern CSS features with fallbacks
   ========================================================= */

/* Progressive enhancement for color-mix support */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cs-btn-primary:hover {
    background: rgba(79, 124, 255, 0.85);
  }
  
  .cs-alert-info {
    background: rgba(14, 165, 233, 0.08);
  }
  
  .cs-alert-success {
    background: rgba(34, 197, 94, 0.08);
  }
  
  .cs-alert-warning {
    background: rgba(245, 158, 11, 0.08);
  }
  
  .cs-alert-danger {
    background: rgba(239, 68, 68, 0.08);
  }
}

/* Fallback for backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .cs-acrylic {
    background: color-mix(in srgb, var(--cs-acrylic-tint) 80%, var(--cs-elev1));
  }
}

/* Progressive enhancement for oklch colors */
@supports (color: oklch(60% 0.2 250)) {
  .cs-theme {
    --cs-brand-oklch: oklch(from var(--cs-brand, #4f7cff) l c h);
  }
}

/* =========================================================
   ACCESSIBILITY OPTIMIZATIONS
   Reduced motion and high contrast support
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cs-pulse,
  .cs-shimmer,
  .cs-fade-delayed,
  .cs-spin {
    animation: none !important;
  }
  
  .cs-btn:hover,
  .cs-focus-ring:focus-visible,
  .cs-focus-ring-within:focus-within {
    transition: none !important;
  }
  
  .cs-glow {
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  .cs-theme {
    --cs-border: currentColor;
    --cs-text-muted: var(--cs-text, #eef1f6);
  }
  
  .cs-btn {
    border: 2px solid currentColor;
  }
  
  .cs-card,
  .cs-card-elevated {
    border: 2px solid var(--cs-border);
  }
}