/**
 * CBL Design System - Design Tokens
 * Optimized CSS Variables
 * 
 * Structure:
 * 1. Base Tokens (raw values)
 * 2. Semantic Tokens (meaningful assignments)
 * 3. Component Tokens (component-specific)
 * 4. Theme Overrides (dark, high-contrast)
 * 5. Density & Motion
 * 
 * DO NOT EDIT DIRECTLY - Generated from JSON token files
 */

:root {
  /* ============================================
   * 1. BASE COLORS
   * ============================================ */
  
  /* Neutrals */
  --ds-color-white: #FFFFFF;
  --ds-color-black: #000000;
  --ds-color-transparent: transparent;
  
  /* Gray Scale */
  --ds-color-gray-50: #F9FAFB;
  --ds-color-gray-100: #F3F4F6;
  --ds-color-gray-200: #E5E7EB;
  --ds-color-gray-300: #D1D5DB;
  --ds-color-gray-400: #9CA3AF;
  --ds-color-gray-500: #6B7280;
  --ds-color-gray-600: #4B5563;
  --ds-color-gray-700: #374151;
  --ds-color-gray-800: #1F2937;
  --ds-color-gray-900: #111827;
  --ds-color-gray-950: #030712;
  
  /* CBL Brand Blue (Official Palette) */
  --ds-color-cbl-50: #EFF6FF;
  --ds-color-cbl-100: #DBEAFE;
  --ds-color-cbl-200: #BFDBFE;
  --ds-color-cbl-300: #93C5FD;
  --ds-color-cbl-400: #60A5FA;
  --ds-color-cbl-500: #3B82F6;
  --ds-color-cbl-600: #2563EB;
  --ds-color-cbl-700: #1E4976;
  --ds-color-cbl-800: #1A365D;
  --ds-color-cbl-900: #0F2442;
  --ds-color-cbl-950: #0A1628;
  
  /* Blue Scale */
  --ds-color-blue-50: #EFF6FF;
  --ds-color-blue-100: #DBEAFE;
  --ds-color-blue-200: #BFDBFE;
  --ds-color-blue-300: #93C5FD;
  --ds-color-blue-400: #60A5FA;
  --ds-color-blue-500: #3B82F6;
  --ds-color-blue-600: #2563EB;
  --ds-color-blue-700: #1D4ED8;
  --ds-color-blue-800: #1E40AF;
  --ds-color-blue-900: #1E3A8A;
  --ds-color-blue-950: #172554;
  
  /* Red Scale */
  --ds-color-red-50: #FEF2F2;
  --ds-color-red-100: #FEE2E2;
  --ds-color-red-200: #FECACA;
  --ds-color-red-300: #FCA5A5;
  --ds-color-red-400: #F87171;
  --ds-color-red-500: #EF4444;
  --ds-color-red-600: #DC2626;
  --ds-color-red-700: #B91C1C;
  --ds-color-red-800: #991B1B;
  --ds-color-red-900: #7F1D1D;
  --ds-color-red-950: #450A0A;
  
  /* Green Scale */
  --ds-color-green-50: #F0FDF4;
  --ds-color-green-100: #DCFCE7;
  --ds-color-green-200: #BBF7D0;
  --ds-color-green-300: #86EFAC;
  --ds-color-green-400: #4ADE80;
  --ds-color-green-500: #22C55E;
  --ds-color-green-600: #16A34A;
  --ds-color-green-700: #15803D;
  --ds-color-green-800: #166534;
  --ds-color-green-900: #14532D;
  --ds-color-green-950: #052E16;
  
  /* Amber Scale */
  --ds-color-amber-50: #FFFBEB;
  --ds-color-amber-100: #FEF3C7;
  --ds-color-amber-200: #FDE68A;
  --ds-color-amber-300: #FCD34D;
  --ds-color-amber-400: #FBBF24;
  --ds-color-amber-500: #F59E0B;
  --ds-color-amber-600: #D97706;
  --ds-color-amber-700: #B45309;
  --ds-color-amber-800: #92400E;
  --ds-color-amber-900: #78350F;
  --ds-color-amber-950: #451A03;
  
  /* Cyan Scale */
  --ds-color-cyan-50: #ECFEFF;
  --ds-color-cyan-100: #CFFAFE;
  --ds-color-cyan-200: #A5F3FC;
  --ds-color-cyan-300: #67E8F9;
  --ds-color-cyan-400: #22D3EE;
  --ds-color-cyan-500: #06B6D4;
  --ds-color-cyan-600: #0891B2;
  --ds-color-cyan-700: #0E7490;
  --ds-color-cyan-800: #155E75;
  --ds-color-cyan-900: #164E63;
  --ds-color-cyan-950: #083344;
  
  /* Purple Scale */
  --ds-color-purple-50: #FAF5FF;
  --ds-color-purple-100: #F3E8FF;
  --ds-color-purple-200: #E9D5FF;
  --ds-color-purple-300: #D8B4FE;
  --ds-color-purple-400: #C084FC;
  --ds-color-purple-500: #A855F7;
  --ds-color-purple-600: #9333EA;
  --ds-color-purple-700: #7E22CE;
  --ds-color-purple-800: #6B21A8;
  --ds-color-purple-900: #581C87;
  --ds-color-purple-950: #3B0764;

  /* ============================================
   * 2. SEMANTIC COLORS (Light Theme Default)
   * ============================================ */
  
  /* Backgrounds */
  --ds-color-bg: var(--ds-color-white);
  --ds-color-bg-alt: var(--ds-color-gray-50);
  --ds-color-bg-muted: var(--ds-color-gray-100);
  --ds-color-bg-subtle: var(--ds-color-gray-50);
  
  /* Surfaces */
  --ds-color-surface: var(--ds-color-white);
  --ds-color-surface-alt: var(--ds-color-gray-50);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-sunken: var(--ds-color-gray-100);
  
  /* Text */
  --ds-color-text: var(--ds-color-gray-900);
  --ds-color-text-primary: var(--ds-color-gray-900);
  --ds-color-text-secondary: var(--ds-color-gray-600);
  --ds-color-text-muted: var(--ds-color-gray-400);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-disabled: var(--ds-color-gray-400);
  --ds-color-text-placeholder: var(--ds-color-gray-400);
  
  /* Borders */
  --ds-color-border: var(--ds-color-gray-200);
  --ds-color-border-strong: var(--ds-color-gray-300);
  --ds-color-border-muted: var(--ds-color-gray-100);
  --ds-color-border-focus: var(--ds-color-blue-500);
  --ds-color-divider: var(--ds-color-gray-100);
  
  /* Primary (CBL Brand) */
  --ds-color-primary: var(--ds-color-cbl-700);
  --ds-color-primary-hover: var(--ds-color-cbl-800);
  --ds-color-primary-active: var(--ds-color-cbl-900);
  --ds-color-primary-subtle: var(--ds-color-blue-50);
  --ds-color-primary-muted: var(--ds-color-blue-100);
  --ds-color-primary-text: var(--ds-color-white);
  
  /* Secondary */
  --ds-color-secondary: var(--ds-color-gray-100);
  --ds-color-secondary-hover: var(--ds-color-gray-200);
  --ds-color-secondary-active: var(--ds-color-gray-300);
  --ds-color-secondary-text: var(--ds-color-gray-900);
  
  /* Danger */
  --ds-color-danger: var(--ds-color-red-600);
  --ds-color-danger-hover: var(--ds-color-red-700);
  --ds-color-danger-active: var(--ds-color-red-800);
  --ds-color-danger-subtle: var(--ds-color-red-50);
  --ds-color-danger-muted: var(--ds-color-red-100);
  --ds-color-danger-text: var(--ds-color-white);
  
  /* Success */
  --ds-color-success: var(--ds-color-green-600);
  --ds-color-success-hover: var(--ds-color-green-700);
  --ds-color-success-active: var(--ds-color-green-800);
  --ds-color-success-subtle: var(--ds-color-green-50);
  --ds-color-success-muted: var(--ds-color-green-100);
  --ds-color-success-text: var(--ds-color-white);
  
  /* Warning */
  --ds-color-warning: var(--ds-color-amber-500);
  --ds-color-warning-hover: var(--ds-color-amber-600);
  --ds-color-warning-active: var(--ds-color-amber-700);
  --ds-color-warning-subtle: var(--ds-color-amber-50);
  --ds-color-warning-muted: var(--ds-color-amber-100);
  --ds-color-warning-text: var(--ds-color-black);
  
  /* Info */
  --ds-color-info: var(--ds-color-cyan-600);
  --ds-color-info-hover: var(--ds-color-cyan-700);
  --ds-color-info-active: var(--ds-color-cyan-800);
  --ds-color-info-subtle: var(--ds-color-cyan-50);
  --ds-color-info-muted: var(--ds-color-cyan-100);
  --ds-color-info-text: var(--ds-color-white);
  
  /* Disabled */
  --ds-color-disabled-bg: var(--ds-color-gray-100);
  --ds-color-disabled-text: var(--ds-color-gray-400);
  --ds-color-disabled-border: var(--ds-color-gray-200);
  
  /* Focus */
  --ds-color-focus-ring: var(--ds-color-blue-500);
  --ds-color-focus-ring-offset: var(--ds-color-white);
  
  /* Links */
  --ds-color-link: var(--ds-color-blue-600);
  --ds-color-link-hover: var(--ds-color-blue-700);
  --ds-color-link-visited: var(--ds-color-blue-800);
  
  /* Misc */
  --ds-color-skeleton: var(--ds-color-gray-200);
  --ds-color-skeleton-shine: var(--ds-color-gray-100);
  --ds-color-backdrop: rgba(0, 0, 0, 0.5);
  --ds-color-backdrop-blur: rgba(255, 255, 255, 0.8);

  /* ============================================
   * 3. TYPOGRAPHY
   * ============================================ */
  
  /* Font Families */
  --ds-font-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --ds-font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Tahoma', sans-serif;
  --ds-font-arabic-alt: 'Noto Sans Arabic', 'Cairo', 'Tajawal', sans-serif;
  --ds-font-arabic-display: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  --ds-font-arabic-traditional: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
  --ds-font-english: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --ds-font-mono: 'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;
  --ds-font-display: 'IBM Plex Sans', system-ui, sans-serif;
  
  /* Arabic Typography Adjustments */
  --ds-arabic-line-height-adjustment: 1.2;
  --ds-arabic-letter-spacing: 0;
  --ds-arabic-word-spacing: 0.05em;
  
  /* Font Sizes */
  --ds-text-2xs: 0.625rem;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.25rem;
  --ds-text-2xl: 1.5rem;
  --ds-text-3xl: 1.875rem;
  --ds-text-4xl: 2.25rem;
  --ds-text-5xl: 3rem;
  --ds-text-6xl: 3.75rem;
  --ds-text-7xl: 4.5rem;
  
  /* Arabic Font Sizes (slightly larger for readability) */
  --ds-text-arabic-2xs: 0.6875rem;
  --ds-text-arabic-xs: 0.8125rem;
  --ds-text-arabic-sm: 0.9375rem;
  --ds-text-arabic-base: 1.0625rem;
  --ds-text-arabic-md: 1.0625rem;
  --ds-text-arabic-lg: 1.1875rem;
  --ds-text-arabic-xl: 1.3125rem;
  --ds-text-arabic-2xl: 1.5625rem;
  --ds-text-arabic-3xl: 1.9375rem;
  --ds-text-arabic-4xl: 2.3125rem;
  --ds-text-arabic-5xl: 3.0625rem;
  
  /* Font Weights */
  --ds-font-thin: 100;
  --ds-font-light: 300;
  --ds-font-normal: 400;
  --ds-font-medium: 500;
  --ds-font-semibold: 600;
  --ds-font-bold: 700;
  --ds-font-extrabold: 800;
  
  /* Line Heights */
  --ds-leading-none: 1;
  --ds-leading-tight: 1.25;
  --ds-leading-snug: 1.375;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.625;
  --ds-leading-loose: 2;
  
  /* Arabic Line Heights (adjusted for diacritics and character height) */
  --ds-leading-arabic-tight: 1.4;
  --ds-leading-arabic-snug: 1.5;
  --ds-leading-arabic-normal: 1.7;
  --ds-leading-arabic-relaxed: 1.85;
  --ds-leading-arabic-loose: 2.2;
  
  /* Letter Spacing */
  --ds-tracking-tighter: -0.05em;
  --ds-tracking-tight: -0.025em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.025em;
  --ds-tracking-wider: 0.05em;
  --ds-tracking-widest: 0.1em;

  /* ============================================
   * 4. SPACING
   * ============================================ */
  
  --ds-space-0: 0;
  --ds-space-px: 1px;
  --ds-space-0-5: 0.125rem;
  --ds-space-1: 0.25rem;
  --ds-space-1-5: 0.375rem;
  --ds-space-2: 0.5rem;
  --ds-space-2-5: 0.625rem;
  --ds-space-3: 0.75rem;
  --ds-space-3-5: 0.875rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-7: 1.75rem;
  --ds-space-8: 2rem;
  --ds-space-9: 2.25rem;
  --ds-space-10: 2.5rem;
  --ds-space-11: 2.75rem;
  --ds-space-12: 3rem;
  --ds-space-14: 3.5rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-24: 6rem;
  --ds-space-28: 7rem;
  --ds-space-32: 8rem;
  --ds-space-36: 9rem;
  --ds-space-40: 10rem;
  --ds-space-48: 12rem;
  --ds-space-56: 14rem;
  --ds-space-64: 16rem;
  --ds-space-72: 18rem;
  --ds-space-80: 20rem;
  --ds-space-96: 24rem;

  /* ============================================
   * 5. BORDER RADIUS
   * ============================================ */
  
  --ds-radius-none: 0;
  --ds-radius-sm: 0.125rem;
  --ds-radius-md: 0.375rem;
  --ds-radius-lg: 0.5rem;
  --ds-radius-xl: 0.75rem;
  --ds-radius-2xl: 1rem;
  --ds-radius-3xl: 1.5rem;
  --ds-radius-full: 9999px;

  /* ============================================
   * 6. SHADOWS
   * ============================================ */
  
  --ds-shadow-none: none;
  --ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --ds-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --ds-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --ds-shadow-focus: 0 0 0 3px var(--ds-color-primary-muted);

  /* ============================================
   * 7. Z-INDEX
   * ============================================ */
  
  --ds-z-hide: -1;
  --ds-z-base: 0;
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1100;
  --ds-z-fixed: 1200;
  --ds-z-modal-backdrop: 1300;
  --ds-z-modal: 1400;
  --ds-z-popover: 1500;
  --ds-z-tooltip: 1600;
  --ds-z-toast: 1700;
  --ds-z-max: 9999;

  /* ============================================
   * 8. MOTION
   * ============================================ */
  
  --ds-duration-instant: 0ms;
  --ds-duration-fastest: 50ms;
  --ds-duration-fast: 100ms;
  --ds-duration-normal: 200ms;
  --ds-duration-slow: 300ms;
  --ds-duration-slower: 500ms;
  --ds-duration-slowest: 1000ms;
  
  --ds-ease-linear: linear;
  --ds-ease-default: ease;
  --ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ds-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================
   * 9. BREAKPOINTS
   * ============================================ */
  
  --ds-bp-mobile: 320px;
  --ds-bp-tablet: 768px;
  --ds-bp-laptop: 1024px;
  --ds-bp-desktop: 1280px;
  --ds-bp-wide: 1536px;

  /* ============================================
   * 10. COMPONENT TOKENS
   * ============================================ */
  
  /* Button */
  --ds-button-height-sm: 32px;
  --ds-button-height-md: 40px;
  --ds-button-height-lg: 48px;
  --ds-button-padding-sm: var(--ds-space-3);
  --ds-button-padding-md: var(--ds-space-4);
  --ds-button-padding-lg: var(--ds-space-5);
  --ds-button-font-sm: var(--ds-text-sm);
  --ds-button-font-md: var(--ds-text-base);
  --ds-button-font-lg: var(--ds-text-lg);
  --ds-button-radius: var(--ds-radius-md);
  
  /* Input */
  --ds-input-height-sm: 32px;
  --ds-input-height-md: 40px;
  --ds-input-height-lg: 48px;
  --ds-input-padding-sm: var(--ds-space-2);
  --ds-input-padding-md: var(--ds-space-3);
  --ds-input-padding-lg: var(--ds-space-4);
  --ds-input-radius: var(--ds-radius-md);
  --ds-input-border: var(--ds-color-border);
  --ds-input-border-focus: var(--ds-color-primary);
  --ds-input-border-error: var(--ds-color-danger);
  
  /* Card */
  --ds-card-padding: var(--ds-space-5);
  --ds-card-radius: var(--ds-radius-lg);
  --ds-card-shadow: var(--ds-shadow-sm);
  --ds-card-border: var(--ds-color-border);
  
  /* Modal */
  --ds-modal-radius: var(--ds-radius-xl);
  --ds-modal-shadow: var(--ds-shadow-xl);
  --ds-modal-backdrop: var(--ds-color-backdrop);
  
  /* Header */
  --ds-header-height: 64px;
  --ds-header-bg: var(--ds-color-cbl-900);
  --ds-header-text: var(--ds-color-white);
  
  /* Sidebar */
  --ds-sidebar-width: 260px;
  --ds-sidebar-width-collapsed: 72px;
  --ds-sidebar-bg: var(--ds-color-surface);
  --ds-sidebar-border: var(--ds-color-border);
  
  /* Table */
  --ds-table-header-bg: var(--ds-color-gray-50);
  --ds-table-row-hover: var(--ds-color-gray-50);
  --ds-table-row-selected: var(--ds-color-primary-subtle);
  --ds-table-border: var(--ds-color-border);
  --ds-table-cell-padding: var(--ds-space-4);

  /* ============================================
   * 11. DENSITY
   * ============================================ */
  
  --ds-density-spacing: var(--ds-space-4);
  --ds-density-row-height: 48px;
  --ds-density-font-size: var(--ds-text-base);
  --ds-density-touch-target: 44px;

  /* ============================================
   * 12. FOCUS RING
   * ============================================ */
  
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-focus-ring-color: var(--ds-color-focus-ring);
}

/* ============================================
 * DARK THEME
 * ============================================ */

[data-theme="dark"],
.ds-theme-dark {
  /* Backgrounds */
  --ds-color-bg: var(--ds-color-gray-950);
  --ds-color-bg-alt: var(--ds-color-gray-900);
  --ds-color-bg-muted: var(--ds-color-gray-800);
  --ds-color-bg-subtle: var(--ds-color-gray-900);
  
  /* Surfaces */
  --ds-color-surface: var(--ds-color-gray-900);
  --ds-color-surface-alt: var(--ds-color-gray-800);
  --ds-color-surface-raised: var(--ds-color-gray-800);
  --ds-color-surface-overlay: var(--ds-color-gray-900);
  --ds-color-surface-sunken: var(--ds-color-gray-950);
  
  /* Text */
  --ds-color-text: var(--ds-color-gray-50);
  --ds-color-text-primary: var(--ds-color-gray-50);
  --ds-color-text-secondary: var(--ds-color-gray-300);
  --ds-color-text-muted: var(--ds-color-gray-500);
  --ds-color-text-inverse: var(--ds-color-gray-900);
  --ds-color-text-disabled: var(--ds-color-gray-600);
  --ds-color-text-placeholder: var(--ds-color-gray-500);
  
  /* Borders */
  --ds-color-border: var(--ds-color-gray-700);
  --ds-color-border-strong: var(--ds-color-gray-600);
  --ds-color-border-muted: var(--ds-color-gray-800);
  --ds-color-border-focus: var(--ds-color-blue-400);
  --ds-color-divider: var(--ds-color-gray-800);
  
  /* Primary */
  --ds-color-primary: var(--ds-color-blue-500);
  --ds-color-primary-hover: var(--ds-color-blue-400);
  --ds-color-primary-active: var(--ds-color-blue-300);
  --ds-color-primary-subtle: var(--ds-color-blue-950);
  --ds-color-primary-muted: var(--ds-color-blue-900);
  
  /* Danger */
  --ds-color-danger: var(--ds-color-red-500);
  --ds-color-danger-hover: var(--ds-color-red-400);
  --ds-color-danger-active: var(--ds-color-red-300);
  --ds-color-danger-subtle: var(--ds-color-red-950);
  --ds-color-danger-muted: var(--ds-color-red-900);
  
  /* Success */
  --ds-color-success: var(--ds-color-green-500);
  --ds-color-success-hover: var(--ds-color-green-400);
  --ds-color-success-active: var(--ds-color-green-300);
  --ds-color-success-subtle: var(--ds-color-green-950);
  --ds-color-success-muted: var(--ds-color-green-900);
  
  /* Warning */
  --ds-color-warning: var(--ds-color-amber-400);
  --ds-color-warning-hover: var(--ds-color-amber-300);
  --ds-color-warning-active: var(--ds-color-amber-200);
  --ds-color-warning-subtle: var(--ds-color-amber-950);
  --ds-color-warning-muted: var(--ds-color-amber-900);
  
  /* Info */
  --ds-color-info: var(--ds-color-cyan-400);
  --ds-color-info-hover: var(--ds-color-cyan-300);
  --ds-color-info-active: var(--ds-color-cyan-200);
  --ds-color-info-subtle: var(--ds-color-cyan-950);
  --ds-color-info-muted: var(--ds-color-cyan-900);
  
  /* Disabled */
  --ds-color-disabled-bg: var(--ds-color-gray-800);
  --ds-color-disabled-text: var(--ds-color-gray-600);
  --ds-color-disabled-border: var(--ds-color-gray-700);
  
  /* Focus */
  --ds-color-focus-ring: var(--ds-color-blue-400);
  --ds-color-focus-ring-offset: var(--ds-color-gray-900);
  
  /* Links */
  --ds-color-link: var(--ds-color-blue-400);
  --ds-color-link-hover: var(--ds-color-blue-300);
  
  /* Misc */
  --ds-color-skeleton: var(--ds-color-gray-800);
  --ds-color-skeleton-shine: var(--ds-color-gray-700);
  --ds-color-backdrop: rgba(0, 0, 0, 0.75);
  
  /* Shadows */
  --ds-shadow-sm: 0 0 0 1px var(--ds-color-gray-800), 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --ds-shadow-md: 0 0 0 1px var(--ds-color-gray-700), 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --ds-shadow-lg: 0 0 0 1px var(--ds-color-gray-600), 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --ds-shadow-xl: 0 0 0 1px var(--ds-color-gray-600), 0 20px 25px -5px rgb(0 0 0 / 0.6);
  --ds-shadow-focus: 0 0 0 3px var(--ds-color-primary-muted);
  
  /* Component Overrides */
  --ds-header-bg: var(--ds-color-gray-950);
  --ds-sidebar-bg: var(--ds-color-gray-900);
  --ds-table-header-bg: var(--ds-color-gray-800);
  --ds-table-row-hover: var(--ds-color-gray-800);
}

/* ============================================
 * HIGH CONTRAST THEME
 * ============================================ */

[data-theme="high-contrast"],
.ds-theme-hc {
  /* Backgrounds */
  --ds-color-bg: var(--ds-color-black);
  --ds-color-bg-alt: var(--ds-color-black);
  --ds-color-bg-muted: #1a1a1a;
  --ds-color-bg-subtle: #0d0d0d;
  
  /* Surfaces */
  --ds-color-surface: var(--ds-color-black);
  --ds-color-surface-alt: #0d0d0d;
  --ds-color-surface-raised: #1a1a1a;
  --ds-color-surface-overlay: var(--ds-color-black);
  
  /* Text */
  --ds-color-text: var(--ds-color-white);
  --ds-color-text-primary: var(--ds-color-white);
  --ds-color-text-secondary: var(--ds-color-white);
  --ds-color-text-muted: #cccccc;
  --ds-color-text-inverse: var(--ds-color-black);
  --ds-color-text-disabled: #808080;
  --ds-color-text-placeholder: #999999;
  
  /* Borders */
  --ds-color-border: var(--ds-color-white);
  --ds-color-border-strong: var(--ds-color-white);
  --ds-color-border-muted: #666666;
  --ds-color-border-focus: #ffff00;
  --ds-color-divider: var(--ds-color-white);
  
  /* Primary - Yellow for high visibility */
  --ds-color-primary: #ffff00;
  --ds-color-primary-hover: #ffff66;
  --ds-color-primary-active: #cccc00;
  --ds-color-primary-subtle: #333300;
  --ds-color-primary-muted: #4d4d00;
  --ds-color-primary-text: var(--ds-color-black);
  
  /* Secondary */
  --ds-color-secondary: var(--ds-color-white);
  --ds-color-secondary-hover: #e6e6e6;
  --ds-color-secondary-active: #cccccc;
  --ds-color-secondary-text: var(--ds-color-black);
  
  /* Danger */
  --ds-color-danger: #ff6666;
  --ds-color-danger-hover: #ff9999;
  --ds-color-danger-subtle: #330000;
  --ds-color-danger-muted: #4d0000;
  --ds-color-danger-text: var(--ds-color-black);
  
  /* Success */
  --ds-color-success: #66ff66;
  --ds-color-success-hover: #99ff99;
  --ds-color-success-subtle: #003300;
  --ds-color-success-muted: #004d00;
  --ds-color-success-text: var(--ds-color-black);
  
  /* Warning */
  --ds-color-warning: #ffff00;
  --ds-color-warning-hover: #ffff66;
  --ds-color-warning-subtle: #333300;
  --ds-color-warning-muted: #4d4d00;
  --ds-color-warning-text: var(--ds-color-black);
  
  /* Info */
  --ds-color-info: #66ffff;
  --ds-color-info-hover: #99ffff;
  --ds-color-info-subtle: #003333;
  --ds-color-info-muted: #004d4d;
  --ds-color-info-text: var(--ds-color-black);
  
  /* Disabled */
  --ds-color-disabled-bg: #333333;
  --ds-color-disabled-text: #808080;
  --ds-color-disabled-border: #666666;
  
  /* Focus - Yellow for high visibility */
  --ds-color-focus-ring: #ffff00;
  --ds-color-focus-ring-offset: var(--ds-color-black);
  
  /* Links */
  --ds-color-link: #66ccff;
  --ds-color-link-hover: #99ddff;
  --ds-color-link-visited: #cc99ff;
  
  /* Misc */
  --ds-color-skeleton: #333333;
  --ds-color-backdrop: rgba(0, 0, 0, 0.9);
  
  /* Shadows (thick borders for high contrast) */
  --ds-shadow-sm: 0 0 0 2px var(--ds-color-white);
  --ds-shadow-md: 0 0 0 2px var(--ds-color-white);
  --ds-shadow-lg: 0 0 0 3px var(--ds-color-white);
  --ds-shadow-xl: 0 0 0 4px var(--ds-color-white);
  --ds-shadow-focus: 0 0 0 4px #ffff00;
  
  /* Enhanced focus */
  --ds-focus-ring-width: 3px;
  --ds-focus-ring-offset: 3px;
}

/* ============================================
 * COMPACT DENSITY
 * ============================================ */

[data-density="compact"],
.ds-density-compact {
  --ds-density-spacing: var(--ds-space-2);
  --ds-density-row-height: 36px;
  --ds-density-font-size: var(--ds-text-sm);
  --ds-density-touch-target: 36px;
  
  /* Compact button sizes */
  --ds-button-height-sm: 28px;
  --ds-button-height-md: 32px;
  --ds-button-height-lg: 40px;
  --ds-button-padding-sm: var(--ds-space-2);
  --ds-button-padding-md: var(--ds-space-3);
  --ds-button-padding-lg: var(--ds-space-4);
  
  /* Compact input sizes */
  --ds-input-height-sm: 28px;
  --ds-input-height-md: 32px;
  --ds-input-height-lg: 40px;
  
  /* Compact card */
  --ds-card-padding: var(--ds-space-3);
  
  /* Compact table */
  --ds-table-cell-padding: var(--ds-space-2);
}

/* ============================================
 * SPACIOUS DENSITY
 * ============================================ */

[data-density="spacious"],
.ds-density-spacious {
  --ds-density-spacing: var(--ds-space-6);
  --ds-density-row-height: 56px;
  --ds-density-font-size: var(--ds-text-lg);
  --ds-density-touch-target: 56px;
  
  /* Spacious button sizes */
  --ds-button-height-sm: 40px;
  --ds-button-height-md: 48px;
  --ds-button-height-lg: 56px;
  --ds-button-padding-sm: var(--ds-space-4);
  --ds-button-padding-md: var(--ds-space-5);
  --ds-button-padding-lg: var(--ds-space-6);
  
  /* Spacious input sizes */
  --ds-input-height-sm: 40px;
  --ds-input-height-md: 48px;
  --ds-input-height-lg: 56px;
  
  /* Spacious card */
  --ds-card-padding: var(--ds-space-8);
  
  /* Spacious table */
  --ds-table-cell-padding: var(--ds-space-6);
}

/* ============================================
 * REDUCED MOTION
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-instant: 0ms;
    --ds-duration-fastest: 0ms;
    --ds-duration-fast: 0ms;
    --ds-duration-normal: 0ms;
    --ds-duration-slow: 0ms;
    --ds-duration-slower: 0ms;
    --ds-duration-slowest: 0ms;
  }
}

/* ============================================
 * DARK MODE SYSTEM PREFERENCE
 * ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="high-contrast"]) {
    /* Inherit dark theme variables */
    --ds-color-bg: var(--ds-color-gray-950);
    --ds-color-surface: var(--ds-color-gray-900);
    --ds-color-text: var(--ds-color-gray-50);
    --ds-color-text-primary: var(--ds-color-gray-50);
    --ds-color-border: var(--ds-color-gray-700);
  }
}