/* 
 * QMB CSS Utilities - CONSOLIDATED VERSION
 * File: /qmbportal/quizzes/assets/css/components/utilities.css
 * 
 * CRITICAL FIXES:
 * - Unified all CSS variables from letter-tracing.css
 * - Performance optimizations with GPU acceleration
 * - Enhanced accessibility support
 * - Mobile-first responsive design
 * - Reduced animation complexity for better performance
 */

 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

 :root {
     /* UNIFIED SPACING SYSTEM - Consistent across all components */
     --spacing-xs: 0.25rem;   /* 4px */
     --spacing-sm: 0.5rem;    /* 8px */
     --spacing-md: 1rem;      /* 16px */
     --spacing-lg: 1.5rem;    /* 24px */
     --spacing-xl: 2rem;      /* 32px */
     --spacing-2xl: 3rem;     /* 48px */
     
     /* UNIFIED RADIUS SYSTEM */
     --radius-sm: 0.375rem;   /* 6px */
     --radius-md: 0.5rem;     /* 8px */
     --radius-lg: 0.75rem;    /* 12px */
     --radius-xl: 1rem;       /* 16px */
     --radius-2xl: 1.5rem;    /* 24px */
     --radius-full: 9999px;
     
     /* PRIMARY BRAND COLORS */
     --golden: #F4D03F;
     --golden-light: #F7DC6F;
     --golden-dark: #F1C40F;
     --orange: #E74C3C;
     --orange-light: #EC7063;
     --orange-dark: #C0392B;
     
     /* EXTENDED BRAND PALETTE FOR TRACING */
     --primary-blue: #3b82f6;
     --accent-pink: #ec4899;
     --accent-green: #10b981;
     --accent-orange: #f59e0b;
     
     /* NEUTRAL COLORS */
     --white: #FFFFFF;
     --light-gray: #F8F9FA;
     --medium-gray: #6C757D;
     --dark-gray: #343A40;
     --black: #212529;
     
     /* BACKGROUND COLORS */
     --bg-primary: var(--white);
     --bg-secondary: var(--light-gray);
     --text-primary: var(--dark-gray);
     
     /* SEMANTIC COLORS */
     --success: #28A745;
     --info: #5DADE2;
     --warning: #FFC107;
     --danger: #DC3545;
     
     /* LETTER TRACING SPECIFIC COLORS */
     --trace-bg: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
     --trace-guide-color: #e0e7ff;
     --trace-path-color: var(--primary-blue);
     --trace-success-color: var(--accent-green);
     --trace-error-color: var(--danger);
     --trace-warning-color: var(--accent-orange);
     --trace-info-color: var(--primary-blue);
     
     /* INTERACTIVE COLORS */
     --button-active-bg: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
     --button-hover-bg: #f3f4f6;
     
     /* TYPOGRAPHY SYSTEM */
     --font-primary: 'Nunito', 'Comic Sans MS', cursive, sans-serif;
     --font-secondary: 'Trebuchet MS', 'Helvetica', sans-serif;
     --font-tertiary: 'Quicksand', 'Helvetica', sans-serif;
     --font-mono: 'Courier New', monospace;
     --font-display: var(--font-tertiary);
     
     /* FONT SIZES */
     --text-xs: 0.75rem;      /* 12px */
     --text-sm: 0.875rem;     /* 14px */
     --text-base: 1rem;       /* 16px */
     --text-lg: 1.125rem;     /* 18px */
     --text-xl: 1.25rem;      /* 20px */
     --text-2xl: 1.5rem;      /* 24px */
     --text-3xl: 1.875rem;    /* 30px */
     --text-4xl: 2.25rem;     /* 36px */
     
     /* OPTIMIZED SHADOWS - Reduced complexity for performance */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     
     /* PERFORMANCE-OPTIMIZED TRANSITIONS */
     --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     
     /* LAYOUT CONSTRAINTS */
     --container-max-width: 1200px;
     --canvas-max-size: min(400px, 90vw);
     
     /* Z-INDEX SCALE */
     --z-dropdown: 1000;
     --z-sticky: 1020;
     --z-fixed: 1030;
     --z-modal-backdrop: 1040;
     --z-modal: 1050;
     --z-popover: 1060;
     --z-tooltip: 1070;
     
     /* RESPONSIVE BREAKPOINTS */
     --breakpoint-xs: 320px;
     --breakpoint-sm: 768px;
     --breakpoint-md: 1024px;
     --breakpoint-lg: 1200px;
 }
 
 /* PERFORMANCE-OPTIMIZED RESET */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
 /* BASE TYPOGRAPHY WITH PERFORMANCE OPTIMIZATIONS */
 body {
     font-family: var(--font-primary);
     line-height: 1.6;
     color: var(--text-primary);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     
     /* Performance optimizations */
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     text-rendering: optimizeSpeed;
 }
 
 /* DISPLAY UTILITIES */
 .hidden { display: none !important; }
 .block { display: block !important; }
 .inline-block { display: inline-block !important; }
 .flex { display: flex !important; }
 .inline-flex { display: inline-flex !important; }
 .grid { display: grid !important; }
 
 /* FLEXBOX UTILITIES */
 .flex-row { flex-direction: row !important; }
 .flex-col { flex-direction: column !important; }
 .flex-wrap { flex-wrap: wrap !important; }
 .flex-nowrap { flex-wrap: nowrap !important; }
 .justify-start { justify-content: flex-start !important; }
 .justify-center { justify-content: center !important; }
 .justify-end { justify-content: flex-end !important; }
 .justify-between { justify-content: space-between !important; }
 .justify-around { justify-content: space-around !important; }
 .items-start { align-items: flex-start !important; }
 .items-center { align-items: center !important; }
 .items-end { align-items: flex-end !important; }
 .items-stretch { align-items: stretch !important; }
 
 /* TEXT UTILITIES */
 .text-left { text-align: left !important; }
 .text-center { text-align: center !important; }
 .text-right { text-align: right !important; }
 .text-xs { font-size: var(--text-xs) !important; }
 .text-sm { font-size: var(--text-sm) !important; }
 .text-base { font-size: var(--text-base) !important; }
 .text-lg { font-size: var(--text-lg) !important; }
 .text-xl { font-size: var(--text-xl) !important; }
 .text-2xl { font-size: var(--text-2xl) !important; }
 .text-3xl { font-size: var(--text-3xl) !important; }
 .text-4xl { font-size: var(--text-4xl) !important; }
 
 /* FONT WEIGHT UTILITIES */
 .font-normal { font-weight: 400 !important; }
 .font-medium { font-weight: 500 !important; }
 .font-semibold { font-weight: 600 !important; }
 .font-bold { font-weight: 700 !important; }
 .font-extrabold { font-weight: 800 !important; }
 .font-black { font-weight: 900 !important; }
 
 /* COLOR UTILITIES */
 .text-white { color: var(--white) !important; }
 .text-gray { color: var(--medium-gray) !important; }
 .text-dark { color: var(--dark-gray) !important; }
 .text-golden { color: var(--golden-dark) !important; }
 .text-orange { color: var(--orange) !important; }
 .text-blue { color: var(--primary-blue) !important; }
 .text-success { color: var(--success) !important; }
 .text-danger { color: var(--danger) !important; }
 .text-warning { color: var(--warning) !important; }
 .text-info { color: var(--info) !important; }
 
 /* BACKGROUND UTILITIES */
 .bg-white { background-color: var(--white) !important; }
 .bg-light { background-color: var(--light-gray) !important; }
 .bg-golden { background-color: var(--golden) !important; }
 .bg-orange { background-color: var(--orange) !important; }
 .bg-blue { background-color: var(--primary-blue) !important; }
 .bg-success { background-color: var(--success) !important; }
 .bg-danger { background-color: var(--danger) !important; }
 .bg-warning { background-color: var(--warning) !important; }
 .bg-info { background-color: var(--info) !important; }
 
 /* SPACING UTILITIES - Using unified system */
 .m-0 { margin: 0 !important; }
 .m-1 { margin: var(--spacing-xs) !important; }
 .m-2 { margin: var(--spacing-sm) !important; }
 .m-3 { margin: var(--spacing-md) !important; }
 .m-4 { margin: var(--spacing-lg) !important; }
 .m-5 { margin: var(--spacing-xl) !important; }
 .m-6 { margin: var(--spacing-2xl) !important; }
 
 .p-0 { padding: 0 !important; }
 .p-1 { padding: var(--spacing-xs) !important; }
 .p-2 { padding: var(--spacing-sm) !important; }
 .p-3 { padding: var(--spacing-md) !important; }
 .p-4 { padding: var(--spacing-lg) !important; }
 .p-5 { padding: var(--spacing-xl) !important; }
 .p-6 { padding: var(--spacing-2xl) !important; }
 
 /* DIRECTIONAL SPACING */
 .mt-0 { margin-top: 0 !important; }
 .mt-1 { margin-top: var(--spacing-xs) !important; }
 .mt-2 { margin-top: var(--spacing-sm) !important; }
 .mt-3 { margin-top: var(--spacing-md) !important; }
 .mt-4 { margin-top: var(--spacing-lg) !important; }
 .mt-5 { margin-top: var(--spacing-xl) !important; }
 
 .mb-0 { margin-bottom: 0 !important; }
 .mb-1 { margin-bottom: var(--spacing-xs) !important; }
 .mb-2 { margin-bottom: var(--spacing-sm) !important; }
 .mb-3 { margin-bottom: var(--spacing-md) !important; }
 .mb-4 { margin-bottom: var(--spacing-lg) !important; }
 .mb-5 { margin-bottom: var(--spacing-xl) !important; }
 
 .ml-0 { margin-left: 0 !important; }
 .ml-1 { margin-left: var(--spacing-xs) !important; }
 .ml-2 { margin-left: var(--spacing-sm) !important; }
 .ml-3 { margin-left: var(--spacing-md) !important; }
 .ml-4 { margin-left: var(--spacing-lg) !important; }
 .ml-5 { margin-left: var(--spacing-xl) !important; }
 
 .mr-0 { margin-right: 0 !important; }
 .mr-1 { margin-right: var(--spacing-xs) !important; }
 .mr-2 { margin-right: var(--spacing-sm) !important; }
 .mr-3 { margin-right: var(--spacing-md) !important; }
 .mr-4 { margin-right: var(--spacing-lg) !important; }
 .mr-5 { margin-right: var(--spacing-xl) !important; }
 
 .pt-0 { padding-top: 0 !important; }
 .pt-1 { padding-top: var(--spacing-xs) !important; }
 .pt-2 { padding-top: var(--spacing-sm) !important; }
 .pt-3 { padding-top: var(--spacing-md) !important; }
 .pt-4 { padding-top: var(--spacing-lg) !important; }
 .pt-5 { padding-top: var(--spacing-xl) !important; }
 
 .pb-0 { padding-bottom: 0 !important; }
 .pb-1 { padding-bottom: var(--spacing-xs) !important; }
 .pb-2 { padding-bottom: var(--spacing-sm) !important; }
 .pb-3 { padding-bottom: var(--spacing-md) !important; }
 .pb-4 { padding-bottom: var(--spacing-lg) !important; }
 .pb-5 { padding-bottom: var(--spacing-xl) !important; }
 
 .pl-0 { padding-left: 0 !important; }
 .pl-1 { padding-left: var(--spacing-xs) !important; }
 .pl-2 { padding-left: var(--spacing-sm) !important; }
 .pl-3 { padding-left: var(--spacing-md) !important; }
 .pl-4 { padding-left: var(--spacing-lg) !important; }
 .pl-5 { padding-left: var(--spacing-xl) !important; }
 
 .pr-0 { padding-right: 0 !important; }
 .pr-1 { padding-right: var(--spacing-xs) !important; }
 .pr-2 { padding-right: var(--spacing-sm) !important; }
 .pr-3 { padding-right: var(--spacing-md) !important; }
 .pr-4 { padding-right: var(--spacing-lg) !important; }
 .pr-5 { padding-right: var(--spacing-xl) !important; }
 
 /* BORDER RADIUS UTILITIES - Using unified system */
 .rounded-none { border-radius: 0 !important; }
 .rounded-sm { border-radius: var(--radius-sm) !important; }
 .rounded { border-radius: var(--radius-md) !important; }
 .rounded-lg { border-radius: var(--radius-lg) !important; }
 .rounded-xl { border-radius: var(--radius-xl) !important; }
 .rounded-2xl { border-radius: var(--radius-2xl) !important; }
 .rounded-full { border-radius: var(--radius-full) !important; }
 
 /* SHADOW UTILITIES */
 .shadow-none { box-shadow: none !important; }
 .shadow-sm { box-shadow: var(--shadow-sm) !important; }
 .shadow { box-shadow: var(--shadow-md) !important; }
 .shadow-lg { box-shadow: var(--shadow-lg) !important; }
 .shadow-xl { box-shadow: var(--shadow-xl) !important; }
 
 /* POSITION UTILITIES */
 .relative { position: relative !important; }
 .absolute { position: absolute !important; }
 .fixed { position: fixed !important; }
 .sticky { position: sticky !important; }
 
 /* OVERFLOW UTILITIES */
 .overflow-visible { overflow: visible !important; }
 .overflow-hidden { overflow: hidden !important; }
 .overflow-scroll { overflow: scroll !important; }
 .overflow-auto { overflow: auto !important; }
 
 /* PERFORMANCE-OPTIMIZED TRANSITION UTILITIES */
 .transition-none { transition: none !important; }
 .transition-all { 
     transition: all var(--transition-normal) !important;
     will-change: transform, opacity;
 }
 .transition-fast { 
     transition: all var(--transition-fast) !important;
     will-change: transform, opacity;
 }
 .transition-slow { 
     transition: all var(--transition-slow) !important;
     will-change: transform, opacity;
 }
 
 /* INTERACTIVE UTILITIES */
 .cursor-pointer { cursor: pointer !important; }
 .cursor-not-allowed { cursor: not-allowed !important; }
 .cursor-grab { cursor: grab !important; }
 .cursor-grabbing { cursor: grabbing !important; }
 .select-none { user-select: none !important; }
 .pointer-events-none { pointer-events: none !important; }
 .pointer-events-auto { pointer-events: auto !important; }
 
 /* PERFORMANCE-OPTIMIZED ANIMATIONS */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes slideInLeft {
     from { opacity: 0; transform: translateX(-10px); }
     to { opacity: 1; transform: translateX(0); }
 }
 
 @keyframes slideInRight {
     from { opacity: 0; transform: translateX(10px); }
     to { opacity: 1; transform: translateX(0); }
 }
 
 @keyframes bounce {
     0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
     40% { transform: translateY(-5px); }
     60% { transform: translateY(-2px); }
 }
 
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
 
 @keyframes pulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.5; }
 }
 
 /* ANIMATION CLASSES WITH GPU ACCELERATION */
 .animate-fade-in { 
     animation: fadeIn 0.3s ease-out;
     will-change: opacity, transform;
 }
 .animate-slide-in-left { 
     animation: slideInLeft 0.3s ease-out;
     will-change: opacity, transform;
 }
 .animate-slide-in-right { 
     animation: slideInRight 0.3s ease-out;
     will-change: opacity, transform;
 }
 .animate-bounce { 
     animation: bounce 1s infinite;
     will-change: transform;
 }
 .animate-spin { 
     animation: spin 1s linear infinite;
     will-change: transform;
 }
 .animate-pulse { 
     animation: pulse 2s infinite;
     will-change: opacity;
 }
 
 /* LOADING COMPONENTS */
 .loading-spinner {
     border: 3px solid var(--light-gray);
     border-top: 3px solid var(--orange);
     border-radius: 50%;
     width: 30px;
     height: 30px;
     animation: spin 1s linear infinite;
     will-change: transform;
 }
 
 .loading-spinner-lg {
     width: 50px;
     height: 50px;
     border-width: 4px;
 }
 
 .loading-spinner-sm {
     width: 20px;
     height: 20px;
     border-width: 2px;
 }
 
 /* ENHANCED FOCUS STATES FOR ACCESSIBILITY */
 .focus-ring:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
     border-color: var(--primary-blue);
 }
 
 .focus-ring:focus-visible {
     outline: 2px solid var(--primary-blue);
     outline-offset: 2px;
 }
 
 /* TOUCH-FRIENDLY UTILITIES */
 .touch-target {
     min-height: 44px;
     min-width: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .touch-action-none { touch-action: none !important; }
 .touch-action-pan-x { touch-action: pan-x !important; }
 .touch-action-pan-y { touch-action: pan-y !important; }
 
 /* RESPONSIVE UTILITIES - Mobile-first approach */
 @media (max-width: 767px) {
     .sm\:hidden { display: none !important; }
     .sm\:block { display: block !important; }
     .sm\:flex { display: flex !important; }
     .sm\:flex-col { flex-direction: column !important; }
     .sm\:text-center { text-align: center !important; }
     .sm\:text-sm { font-size: var(--text-sm) !important; }
     .sm\:text-xs { font-size: var(--text-xs) !important; }
     .sm\:p-2 { padding: var(--spacing-sm) !important; }
     .sm\:m-2 { margin: var(--spacing-sm) !important; }
     .sm\:w-full { width: 100% !important; }
 }
 
 @media (max-width: 479px) {
     .xs\:hidden { display: none !important; }
     .xs\:block { display: block !important; }
     .xs\:flex { display: flex !important; }
     .xs\:flex-col { flex-direction: column !important; }
     .xs\:text-center { text-align: center !important; }
     .xs\:text-xs { font-size: var(--text-xs) !important; }
     .xs\:p-1 { padding: var(--spacing-xs) !important; }
     .xs\:m-1 { margin: var(--spacing-xs) !important; }
     .xs\:w-full { width: 100% !important; }
 }
 
 @media (min-width: 768px) {
     .md\:block { display: block !important; }
     .md\:flex { display: flex !important; }
     .md\:flex-row { flex-direction: row !important; }
     .md\:text-left { text-align: left !important; }
     .md\:text-lg { font-size: var(--text-lg) !important; }
     .md\:p-4 { padding: var(--spacing-lg) !important; }
     .md\:m-4 { margin: var(--spacing-lg) !important; }
 }
 
 /* PRINT UTILITIES */
 @media print {
     .print\:hidden { display: none !important; }
     .print\:block { display: block !important; }
     .print\:text-black { color: black !important; }
     .print\:bg-white { background: white !important; }
 }
 
 /* ACCESSIBILITY UTILITIES */
 .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;
 }
 
 .not-sr-only {
     position: static;
     width: auto;
     height: auto;
     padding: 0;
     margin: 0;
     overflow: visible;
     clip: auto;
     white-space: normal;
 }
 
 /* HIGH CONTRAST MODE SUPPORT */
 @media (prefers-contrast: high) {
     .border { border: 2px solid var(--dark-gray) !important; }
     .focus-ring:focus {
         outline: 3px solid black !important;
         outline-offset: 2px;
     }
 }
 
 /* REDUCED MOTION SUPPORT */
 @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .animate-spin,
     .animate-bounce,
     .animate-pulse {
         animation: none !important;
     }
 }