claritykit-svelte/dist/styles/tokens.css

A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility

/**
 * ClarityKit Design Tokens
 * ADHD-Optimized Design System
 * 
 * This file defines the core design tokens for the ClarityKit component library.
 * All components should use these variables for styling to ensure consistency
 * and support for accessibility features like dark mode and reduced motion.
 */

/* 
 * Default Theme (Dark) - Applied to :root
 * This provides the default dark theme that serves as the foundation
 */
:root {
  /* 
   * Color Palette - Nord-Fusion Theme
   * Consistent naming pattern with clear semantic meaning
   * High contrast ratios for better readability
   */
  
  /* Background Colors */
  --ck-bg-primary: #2E3440;      /* Main background */
  --ck-bg-secondary: #3B4252;    /* Card/surface background */
  --ck-bg-tertiary: #434C5E;     /* Elevated surfaces */
  --ck-bg-hover: #4C566A;        /* Hover states */
  
  /* Text Colors */
  --ck-text-primary: #FFFFFF;    /* Main text - 15.8:1 contrast with bg-primary */
  --ck-text-secondary: #ECEFF4;  /* Secondary text - 13.7:1 contrast with bg-primary */
  --ck-text-muted: #9FAAB8;      /* Muted/disabled text - 7.1:1 contrast with bg-primary */
  --ck-text-inverse: #2E3440;    /* Text on light backgrounds */
  
  /* Accent Colors - Purple Theme */
  --ck-accent: #CBA6F7;          /* Primary purple accent - 8.5:1 contrast with bg-primary */
  --ck-accent-hover: #D4ACFF;    /* Hover state - 9.2:1 contrast with bg-primary */
  --ck-accent-active: #B794E8;   /* Active state - 7.3:1 contrast with bg-primary */
  --ck-accent-light: #E5D4FF;    /* Light variant - 11.2:1 contrast with bg-primary */
  --ck-accent-dark: #A67AE4;     /* Dark variant - 5.8:1 contrast with bg-primary */
  
  /* Status Colors - Consistent naming pattern across all status types */
  --ck-success: #A3BE8C;         /* Success/positive - 6.5:1 contrast with bg-primary */
  --ck-success-hover: #B8D4A0;   /* Success hover - 8.2:1 contrast with bg-primary */
  --ck-success-active: #8CAA78;  /* Success active - 5.4:1 contrast with bg-primary */
  --ck-success-light: #D4E8C8;   /* Success light - 11.3:1 contrast with bg-primary */
  
  --ck-warning: #EBCB8B;         /* Warning/caution - 10.2:1 contrast with bg-primary */
  --ck-warning-hover: #F0D7A3;   /* Warning hover - 11.8:1 contrast with bg-primary */
  --ck-warning-active: #D9B974;  /* Warning active - 8.9:1 contrast with bg-primary */
  --ck-warning-light: #F8ECCD;   /* Warning light - 14.5:1 contrast with bg-primary */
  
  --ck-error: #BF616A;           /* Error/danger - 5.2:1 contrast with bg-primary */
  --ck-error-hover: #D08A92;     /* Error hover - 6.8:1 contrast with bg-primary */
  --ck-error-active: #A8545C;    /* Error active - 4.1:1 contrast with bg-primary */
  --ck-error-light: #E8C5C9;     /* Error light - 10.3:1 contrast with bg-primary */
  
  --ck-info: #5E81AC;            /* Information - 3.8:1 contrast with bg-primary */
  --ck-info-hover: #7B9BC4;      /* Info hover - 5.2:1 contrast with bg-primary */
  --ck-info-active: #4C6A8F;     /* Info active - 3.1:1 contrast with bg-primary */
  --ck-info-light: #B5CAE3;      /* Info light - 9.1:1 contrast with bg-primary */
  
  /* Border Colors */
  --ck-border: #4C566A;          /* Default borders */
  --ck-border-light: #616E88;    /* Lighter borders */
  --ck-border-focus: #CBA6F7;    /* Focus borders (same as accent) */
  --ck-border-error: #BF616A;    /* Error borders (same as error) */
  --ck-border-success: #A3BE8C;  /* Success borders (same as success) */
  --ck-border-warning: #EBCB8B;  /* Warning borders (same as warning) */
  
  /* 
   * Typography - Optimized for readability and accessibility
   * Font families include multiple fallbacks for better cross-platform support
   */
  --ck-font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ck-font-mono: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  
  /* 
   * Font Sizes - Consistent scale with clear relationships
   * Using rem units for better accessibility and user preference support
   */
  --ck-text-xs: 0.75rem;         /* 12px - Small labels, captions */
  --ck-text-sm: 0.875rem;        /* 14px - Secondary text, small buttons */
  --ck-text-base: 1rem;          /* 16px - Body text, default size */
  --ck-text-lg: 1.125rem;        /* 18px - Large text, headings */
  --ck-text-xl: 1.25rem;         /* 20px - Extra large text */
  --ck-text-2xl: 1.5rem;         /* 24px - Section headings */
  --ck-text-3xl: 1.875rem;       /* 30px - Page headings */
  --ck-text-4xl: 2.25rem;        /* 36px - Major headings */
  
  /* Font Weights - Standard weights with clear naming */
  --ck-font-normal: 400;         /* Regular text */
  --ck-font-medium: 500;         /* Medium emphasis */
  --ck-font-semibold: 600;       /* High emphasis */
  --ck-font-bold: 700;           /* Maximum emphasis */
  
  /* 
   * Line Heights - Optimized for readability
   * Higher line heights improve readability for ADHD users
   */
  --ck-leading-none: 1;          /* No line height (used rarely) */
  --ck-leading-tight: 1.25;      /* Tight - for headings */
  --ck-leading-normal: 1.5;      /* Normal - for body text */
  --ck-leading-relaxed: 1.75;    /* Relaxed - for longer text blocks */
  --ck-leading-loose: 2;         /* Loose - for maximum readability */
  
  /* 
   * Spacing Scale - ADHD Optimized
   * Larger touch targets and more generous spacing
   * Consistent 4px (0.25rem) base unit with clear progression
   */
  --ck-space-1: 0.25rem;         /* 4px - Minimum spacing */
  --ck-space-2: 0.5rem;          /* 8px - Tight spacing */
  --ck-space-3: 0.75rem;         /* 12px - Default inner spacing */
  --ck-space-4: 1rem;            /* 16px - Standard spacing */
  --ck-space-5: 1.25rem;         /* 20px - Medium spacing */
  --ck-space-6: 1.5rem;          /* 24px - Default outer spacing */
  --ck-space-8: 2rem;            /* 32px - Large spacing */
  --ck-space-10: 2.5rem;         /* 40px - Extra large spacing */
  --ck-space-12: 3rem;           /* 48px - Section spacing */
  --ck-space-16: 4rem;           /* 64px - Page spacing */
  --ck-space-20: 5rem;           /* 80px - Major section spacing */
  --ck-space-24: 6rem;           /* 96px - Maximum spacing */
  
  /* 
   * Border Radius - Consistent scale
   * Slightly rounded corners for visual interest without being distracting
   */
  --ck-radius-sm: 0.25rem;       /* 4px - Subtle rounding */
  --ck-radius-md: 0.5rem;        /* 8px - Default rounding */
  --ck-radius-lg: 0.75rem;       /* 12px - Prominent rounding */
  --ck-radius-xl: 1rem;          /* 16px - Major rounding */
  --ck-radius-full: 9999px;      /* Fully rounded (circles, pills) */
  
  /* 
   * Shadows - Subtle and calming
   * Provide depth without being overwhelming
   */
  --ck-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);       /* Subtle shadow */
  --ck-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);       /* Default shadow */
  --ck-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);      /* Prominent shadow */
  --ck-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);     /* Major shadow */
  
  /* 
   * Focus Ring - High contrast for accessibility
   * Clear visual indicator for keyboard navigation
   */
  --ck-focus-ring: 0 0 0 3px rgba(203, 166, 247, 0.4); /* Purple focus ring */
  --ck-focus-ring-offset: 2px;                         /* Offset for focus ring */
  
  /* 
   * Transitions - Smooth but not distracting
   * Standardized timing functions for consistency
   */
  --ck-transition-fast: 150ms ease;    /* Quick transitions */
  --ck-transition: 200ms ease;         /* Default transitions */
  --ck-transition-slow: 300ms ease;    /* Slower, more noticeable transitions */
  
  /* 
   * Animation - Standardized for consistency and reduced motion support
   * All animations should respect user preferences
   */
  --ck-animation-duration: 200ms;                      /* Default animation duration */
  --ck-animation-duration-slow: 300ms;                 /* Slower animations */
  --ck-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Standard easing curve */
  --ck-animation-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce effect */
  
  /* Modal animation specific values */
  --ck-modal-slide-distance: -2rem;                   /* Modal slide-in distance */
  --ck-modal-scale-start: 0.95;                       /* Modal initial scale */
  
  /* Z-Index Scale - Clear layering system */
  --ck-z-dropdown: 1000;         /* Dropdown menus */
  --ck-z-sticky: 1020;           /* Sticky elements */
  --ck-z-fixed: 1030;            /* Fixed elements */
  --ck-z-modal-backdrop: 1040;   /* Modal background */
  --ck-z-modal: 1050;            /* Modal dialog */
  --ck-z-popover: 1060;          /* Popovers */
  --ck-z-tooltip: 1070;          /* Tooltips */
  
  /* 
   * Component Sizes - ADHD-friendly larger touch targets
   * Consistent sizing across component types
   */
  --ck-button-height-sm: 2rem;    /* 32px - Small buttons */
  --ck-button-height-md: 2.5rem;  /* 40px - Medium buttons */
  --ck-button-height-lg: 3rem;    /* 48px - Large buttons */
  
  --ck-input-height-sm: 2rem;     /* 32px - Small inputs */
  --ck-input-height-md: 2.5rem;   /* 40px - Medium inputs */
  --ck-input-height-lg: 3rem;     /* 48px - Large inputs */
}

/* 
 * Respect user's motion preferences
 * Completely disable animations and transitions for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* Disable transitions */
    --ck-transition-fast: 0ms;
    --ck-transition: 0ms;
    --ck-transition-slow: 0ms;
    --ck-animation-duration: 0ms;
    --ck-animation-duration-slow: 0ms;
  }
  
  /* Disable all animations */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 
 * High Contrast Mode Support
 * Enhances visibility for users with visual impairments
 */
@media (prefers-contrast: high) {
  :root {
    /* Increase contrast for better visibility */
    --ck-border: #81A1C1;            /* More visible borders */
    --ck-text-muted: #ECEFF4;        /* Brighter muted text */
    --ck-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);  /* Stronger shadows */
    --ck-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    
    /* Increase contrast for focus rings */
    --ck-focus-ring: 0 0 0 3px rgba(203, 166, 247, 0.8);
    
    /* Modal backdrop with higher contrast */
    --ck-modal-backdrop: var(--ck-modal-backdrop-high-contrast);
    
    /* Increase contrast for status backgrounds */
    --ck-success-bg: rgba(163, 190, 140, 0.3);
    --ck-warning-bg: rgba(235, 203, 139, 0.3);
    --ck-error-bg: rgba(191, 97, 106, 0.3);
    --ck-info-bg: rgba(94, 129, 172, 0.3);
    --ck-accent-bg: rgba(203, 166, 247, 0.3);
  }
}

/* 
 * Dark Theme - Explicit dark theme class
 * Reinforces the default dark theme when explicitly set
 */
.ck-theme-dark {
  /* Background Colors - Same as :root for consistency */
  --ck-bg-primary: #2E3440;      /* Main background */
  --ck-bg-secondary: #3B4252;    /* Card/surface background */
  --ck-bg-tertiary: #434C5E;     /* Elevated surfaces */
  --ck-bg-hover: #4C566A;        /* Hover states */
  
  /* Text Colors */
  --ck-text-primary: #FFFFFF;    /* Main text - 15.8:1 contrast with bg-primary */
  --ck-text-secondary: #ECEFF4;  /* Secondary text - 13.7:1 contrast with bg-primary */
  --ck-text-muted: #9FAAB8;      /* Muted/disabled text - 7.1:1 contrast with bg-primary */
  --ck-text-inverse: #2E3440;    /* Text on light backgrounds */
  
  /* Border Colors */
  --ck-border: #4C566A;          /* Default borders */
  --ck-border-light: #616E88;    /* Lighter borders */
  
  /* Shadows - Default dark theme shadows */
  --ck-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
  --ck-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --ck-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
  --ck-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);
}

/* 
 * Light Theme
 * Comprehensive light theme overrides
 */
.ck-theme-light {
  /* Background Colors */
  --ck-bg-primary: #ECEFF4;      /* Main background */
  --ck-bg-secondary: #E5E9F0;    /* Card/surface background */
  --ck-bg-tertiary: #D8DEE9;     /* Elevated surfaces */
  --ck-bg-hover: #C2C8D2;        /* Hover states */
  
  /* Text Colors */
  --ck-text-primary: #2E3440;    /* Main text */
  --ck-text-secondary: #3B4252;  /* Secondary text */
  --ck-text-muted: #4C566A;      /* Muted/disabled text */
  --ck-text-inverse: #FFFFFF;    /* Text on dark backgrounds */
  
  /* Accent Colors - Adjusted for light theme */
  --ck-accent: #8B5FBF;          /* Primary purple accent - better contrast on light */
  --ck-accent-hover: #9B6FCF;    /* Hover state */
  --ck-accent-active: #7B4FAF;   /* Active state */
  --ck-accent-light: #C5A3F0;    /* Light variant */
  --ck-accent-dark: #6B3F9F;     /* Dark variant */
  
  /* Status Colors - Adjusted for light theme */
  --ck-success: #7A9B5C;         /* Success - better contrast on light */
  --ck-success-hover: #8AAB6C;   /* Success hover */
  --ck-success-active: #6A8B4C;  /* Success active */
  --ck-success-light: #A8C580;   /* Success light */
  
  --ck-warning: #B8940A;         /* Warning - better contrast on light */
  --ck-warning-hover: #C8A41A;   /* Warning hover */
  --ck-warning-active: #A88400;  /* Warning active */
  --ck-warning-light: #E6C547;   /* Warning light */
  
  --ck-error: #A53E47;           /* Error - better contrast on light */
  --ck-error-hover: #B54E57;     /* Error hover */
  --ck-error-active: #952E37;    /* Error active */
  --ck-error-light: #D07580;     /* Error light */
  
  --ck-info: #4A6B8A;            /* Information - better contrast on light */
  --ck-info-hover: #5A7B9A;      /* Info hover */
  --ck-info-active: #3A5B7A;     /* Info active */
  --ck-info-light: #7A9BBA;      /* Info light */
  
  /* Border Colors */
  --ck-border: #D8DEE9;          /* Default borders */
  --ck-border-light: #E5E9F0;    /* Lighter borders */
  --ck-border-focus: #8B5FBF;    /* Focus borders (accent color) */
  --ck-border-error: #A53E47;    /* Error borders */
  --ck-border-success: #7A9B5C;  /* Success borders */
  --ck-border-warning: #B8940A;  /* Warning borders */
  
  /* Shadows - Lighter for light theme */
  --ck-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ck-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --ck-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --ck-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* Status Background Colors - Adjusted for light theme */
  --ck-success-bg: rgba(122, 155, 92, 0.12);   /* Success background */
  --ck-warning-bg: rgba(184, 148, 10, 0.12);   /* Warning background */
  --ck-error-bg: rgba(165, 62, 71, 0.12);      /* Error background */
  --ck-info-bg: rgba(74, 107, 138, 0.12);      /* Info background */
  --ck-accent-bg: rgba(139, 95, 191, 0.12);    /* Accent background */
  --ck-accent-text: #8B5FBF;                   /* Accent text color */
}

/* 
 * Auto Theme Support via Media Query
 * Automatically applies light theme when system preference is light
 * Only applies when no explicit theme class is set
 */
@media (prefers-color-scheme: light) {
  :root:not(.ck-theme-dark):not(.ck-theme-light) {
    /* Background Colors */
    --ck-bg-primary: #ECEFF4;      /* Main background */
    --ck-bg-secondary: #E5E9F0;    /* Card/surface background */
    --ck-bg-tertiary: #D8DEE9;     /* Elevated surfaces */
    --ck-bg-hover: #C2C8D2;        /* Hover states */
    
    /* Text Colors */
    --ck-text-primary: #2E3440;    /* Main text */
    --ck-text-secondary: #3B4252;  /* Secondary text */
    --ck-text-muted: #4C566A;      /* Muted/disabled text */
    --ck-text-inverse: #FFFFFF;    /* Text on dark backgrounds */
    
    /* Accent Colors - Adjusted for light theme */
    --ck-accent: #8B5FBF;          /* Primary purple accent */
    --ck-accent-hover: #9B6FCF;    /* Hover state */
    --ck-accent-active: #7B4FAF;   /* Active state */
    --ck-accent-light: #C5A3F0;    /* Light variant */
    --ck-accent-dark: #6B3F9F;     /* Dark variant */
    
    /* Status Colors - Adjusted for light theme */
    --ck-success: #7A9B5C;         /* Success */
    --ck-success-hover: #8AAB6C;   /* Success hover */
    --ck-success-active: #6A8B4C;  /* Success active */
    --ck-success-light: #A8C580;   /* Success light */
    
    --ck-warning: #B8940A;         /* Warning */
    --ck-warning-hover: #C8A41A;   /* Warning hover */
    --ck-warning-active: #A88400;  /* Warning active */
    --ck-warning-light: #E6C547;   /* Warning light */
    
    --ck-error: #A53E47;           /* Error */
    --ck-error-hover: #B54E57;     /* Error hover */
    --ck-error-active: #952E37;    /* Error active */
    --ck-error-light: #D07580;     /* Error light */
    
    --ck-info: #4A6B8A;            /* Information */
    --ck-info-hover: #5A7B9A;      /* Info hover */
    --ck-info-active: #3A5B7A;     /* Info active */
    --ck-info-light: #7A9BBA;      /* Info light */
    
    /* Border Colors */
    --ck-border: #D8DEE9;          /* Default borders */
    --ck-border-light: #E5E9F0;    /* Lighter borders */
    --ck-border-focus: #8B5FBF;    /* Focus borders */
    --ck-border-error: #A53E47;    /* Error borders */
    --ck-border-success: #7A9B5C;  /* Success borders */
    --ck-border-warning: #B8940A;  /* Warning borders */
    
    /* Shadows - Lighter for light theme */
    --ck-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ck-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --ck-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --ck-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Status Background Colors */
    --ck-success-bg: rgba(122, 155, 92, 0.12);
    --ck-warning-bg: rgba(184, 148, 10, 0.12);
    --ck-error-bg: rgba(165, 62, 71, 0.12);
    --ck-info-bg: rgba(74, 107, 138, 0.12);
    --ck-accent-bg: rgba(139, 95, 191, 0.12);
    --ck-accent-text: #8B5FBF;
  }
}

/* Status Background Colors - for alerts, badges, etc. */
:root {
  --ck-success-bg: rgba(163, 190, 140, 0.15);  /* Success background */
  --ck-warning-bg: rgba(235, 203, 139, 0.15);  /* Warning background */
  --ck-error-bg: rgba(191, 97, 106, 0.15);     /* Error background */
  --ck-info-bg: rgba(94, 129, 172, 0.15);      /* Info background */
  --ck-accent-bg: rgba(203, 166, 247, 0.15);   /* Accent background */
  --ck-accent-text: #CBA6F7;                   /* Accent text color */
  
  /* Interactive states for better UX */
  --ck-interactive-bg: var(--ck-bg-secondary);     /* Default interactive background */
  --ck-interactive-hover: var(--ck-bg-tertiary);   /* Hover state background */
  --ck-interactive-active: var(--ck-bg-hover);     /* Active state background */
  
  /* Chart and data visualization colors - Colorblind friendly palette */
  --ck-chart-1: #8FBCBB;  /* Nord frost - teal */
  --ck-chart-2: #88C0D0;  /* Nord frost - light blue */
  --ck-chart-3: #81A1C1;  /* Nord frost - blue */
  --ck-chart-4: #5E81AC;  /* Nord frost - dark blue */
  --ck-chart-5: #CBA6F7;  /* Custom purple */
  --ck-chart-6: #D08770;  /* Nord aurora - orange */
  --ck-chart-7: #A3BE8C;  /* Nord aurora - green */
  --ck-chart-8: #EBCB8B;  /* Nord aurora - yellow */
  
  /* Layout and container sizes */
  --ck-container-sm: 640px;   /* Small container */
  --ck-container-md: 768px;   /* Medium container */
  --ck-container-lg: 1024px;  /* Large container */
  --ck-container-xl: 1280px;  /* Extra large container */
  --ck-container-2xl: 1536px; /* 2x extra large container */
  
  /* Modal specific sizes */
  --ck-modal-sm: 400px;       /* Small modal max-width */
  --ck-modal-md: 500px;       /* Medium modal max-width */
  --ck-modal-lg: 800px;       /* Large modal max-width */
  --ck-modal-backdrop: rgba(0, 0, 0, 0.6);  /* Modal backdrop color */
  --ck-modal-backdrop-high-contrast: rgba(0, 0, 0, 0.8);  /* High contrast backdrop */
  
  /* Responsive breakpoints */
  --ck-breakpoint-sm: 640px;  /* Small breakpoint */
  --ck-breakpoint-md: 768px;  /* Medium breakpoint */
  --ck-breakpoint-lg: 1024px; /* Large breakpoint */
  --ck-breakpoint-xl: 1280px; /* Extra large breakpoint */
  
  /* Grid system */
  --ck-grid-cols-1: repeat(1, minmax(0, 1fr));
  --ck-grid-cols-2: repeat(2, minmax(0, 1fr));
  --ck-grid-cols-3: repeat(3, minmax(0, 1fr));
  --ck-grid-cols-4: repeat(4, minmax(0, 1fr));
  --ck-grid-cols-6: repeat(6, minmax(0, 1fr));
  --ck-grid-cols-12: repeat(12, minmax(0, 1fr));
}

/* 
 * Interactive State Colors
 * Applied to both themes but can be overridden by theme-specific values
 */
:root {
  --ck-interactive-bg: var(--ck-bg-secondary);     /* Default interactive background */
  --ck-interactive-hover: var(--ck-bg-tertiary);   /* Hover state background */
  --ck-interactive-active: var(--ck-bg-hover);     /* Active state background */
}

/* 
 * Utility Classes
 * Common helper classes for components
 */

/* Background utility classes */
.bg-success-light {
  background-color: var(--ck-success-bg) !important;
}

.bg-accent-light {
  background-color: var(--ck-accent-bg) !important;
}

.bg-error-light {
  background-color: var(--ck-error-bg) !important;
}

.bg-warning-light {
  background-color: var(--ck-warning-bg) !important;
}

.bg-info-light {
  background-color: var(--ck-info-bg) !important;
}

.bg-secondary {
  background-color: var(--ck-bg-secondary) !important;
}

/* Text utility classes */
.text-primary {
  color: var(--ck-text-primary) !important;
}

.text-secondary {
  color: var(--ck-text-secondary) !important;
}

.text-muted {
  color: var(--ck-text-muted) !important;
}

.text-accent {
  color: var(--ck-accent) !important;
}

.text-success {
  color: var(--ck-success) !important;
}

.text-error {
  color: var(--ck-error) !important;
}

.text-warning {
  color: var(--ck-warning) !important;
}

.text-info {
  color: var(--ck-info) !important;
}

/* Focus utility class */
.focus-ring {
  outline: none;
  box-shadow: var(--ck-focus-ring);
}

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