/* Theme Name: SiteKrafter-Pro
  Theme URI: https://sitekrafter.com
  Version: 7.2.5
  Template: Divi
  Author: Mak
  Author URI: https://diviuniversity.com
  Description: SiteKrafter Pro helps you build websites faster, with better structure, consistency, and scalability.
  Website: https://sitekrafter.com
*/

/* ==========================================================================
   BASE STYLES & RESET
   ========================================================================== */

.sk-reset {
  margin: 0;
  padding: 0;
}

/* Keep the safe styles that don't conflict with Divi */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Performance optimizations */
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html:focus-within {
  scroll-behavior: smooth;
}

/* Performance: Reduce repaints and reflows */
* {
  box-sizing: border-box;
}

/* Performance: Optimize animations */
@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;
  }
}

/* Only apply font-size when specifically needed - avoid global override */
.sk-custom-font-size {
  font-size: var(--font-base-size);
}

/* Scoped body styles - only apply when using SiteKrafter classes */
.sk-typography {
  font-family: var(--font-secondary);
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
}

/* Optional: Apply to specific contexts */
body.sk-custom-typography {
  font-family: var(--font-secondary);
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
}

/* ==========================================================================
   DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* ===== TYPOGRAPHY ===== */
  --font-base-size: 62.5%; /* 10px */
  
  /* Font Families */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-tertiary: 'Montserrat', sans-serif;
  
  /* Typography Scale - Modern UI/UX Best Practices - Optimized for Performance */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);    /* 12px - 14px */
  --text-s: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);       /* 14px - 16px */
  --text-m: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);       /* 16px - 18px */
  --text-l: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);      /* 18px - 20px */
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* 20px - 24px */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);         /* 24px - 32px */
  --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);       /* 32px - 40px */
  --text-4xl: clamp(2.5rem, 2rem + 2vw, 3rem);           /* 40px - 48px */
  
  /* Heading Sizes - Modern UI/UX Best Practices */
  --sk-heading-9xl: clamp(4rem, calc(8vw + 2rem), 8rem);        /* 64px - 128px - Hero displays */
  --sk-heading-8xl: clamp(3.5rem, calc(6vw + 2rem), 6rem);      /* 56px - 96px - Large displays */
  --sk-heading-7xl: clamp(3rem, calc(4vw + 2rem), 4.5rem);      /* 48px - 72px - Section headers */
  --sk-heading-6xl: clamp(2.5rem, calc(3vw + 1.5rem), 3.75rem); /* 40px - 60px - Page titles */
  --sk-heading-5xl: clamp(2rem, calc(2vw + 1.5rem), 3rem);      /* 32px - 48px - Main headings */
  --sk-heading-4xl: clamp(1.75rem, calc(1.5vw + 1.25rem), 2.25rem); /* 28px - 36px - H1 */
  --sk-heading-3xl: clamp(1.5rem, calc(1vw + 1.25rem), 1.875rem);   /* 24px - 30px - H2 */
  --sk-heading-2xl: clamp(1.25rem, calc(0.8vw + 1.1rem), 1.5rem);   /* 20px - 24px - H3 */
  --sk-heading-xl:  clamp(1.125rem, calc(0.6vw + 1rem), 1.25rem);   /* 18px - 20px - H4 */
  --sk-heading-l:   clamp(1rem, calc(0.4vw + 0.9rem), 1.125rem);    /* 16px - 18px - H5 */
  --sk-heading-m:   clamp(0.875rem, calc(0.3vw + 0.8rem), 1rem);    /* 14px - 16px - H6 */
  --sk-heading-s:   clamp(0.75rem, calc(0.2vw + 0.7rem), 0.875rem); /* 12px - 14px - Small headings */
  
  /* Heading Aliases for compatibility */
  --heading-9xl: var(--sk-heading-9xl);
  --heading-8xl: var(--sk-heading-8xl);
  --heading-7xl: var(--sk-heading-7xl);
  --heading-6xl: var(--sk-heading-6xl);
  --heading-5xl: var(--sk-heading-5xl);
  --heading-4xl: var(--sk-heading-4xl);
  --heading-3xl: var(--sk-heading-3xl);
  --heading-2xl: var(--sk-heading-2xl);
  --heading-xl: var(--sk-heading-xl);
  --heading-l: var(--sk-heading-l);
  --heading-m: var(--sk-heading-m);
  --heading-s: var(--sk-heading-s);
  
  /* Line Heights - Modern UI/UX Best Practices */
  --line-height-tight: 1.1;    /* For large headings */
  --line-height-snug: 1.25;    /* For headings */
  --line-height-normal: 1.5;   /* For body text */
  --line-height-relaxed: 1.6;  /* For comfortable reading */
  --line-height-loose: 1.75;   /* For accessibility */
  
  /* Text-specific line heights */
  --line-height-text-xs: 1.4;
  --line-height-text-s: 1.45;
  --line-height-text-m: 1.5;
  --line-height-text-l: 1.55;
  --line-height-text-xl: 1.6;
  --line-height-text-2xl: 1.4;
  --line-height-text-3xl: 1.3;
  --line-height-text-4xl: 1.25;
  
  /* Heading-specific line heights */
  --line-height-heading-9xl: 1.1;
  --line-height-heading-8xl: 1.1;
  --line-height-heading-7xl: 1.15;
  --line-height-heading-6xl: 1.2;
  --line-height-heading-5xl: 1.2;
  --line-height-heading-4xl: 1.25;
  --line-height-heading-3xl: 1.3;
  --line-height-heading-2xl: 1.35;
  --line-height-heading-xl: 1.4;
  --line-height-heading-l: 1.45;
  --line-height-heading-m: 1.5;
  --line-height-heading-s: 1.5;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.15em;

  /* ===== COLORS ===== */
  
  /* Primary Color Tokens */
  --pri-h: 235;
  --pri-s: 84%;
  
  /* Accent Color Tokens */
  --acc-h: 344;
  --acc-s: 91%;
  
  /* Primary Color Scale */
  --pri-50: hsl(var(--pri-h), var(--pri-s), 97%);
  --pri-100: hsl(var(--pri-h), var(--pri-s), 90%);
  --pri-200: hsl(var(--pri-h), var(--pri-s), 80%);
  --pri-300: hsl(var(--pri-h), var(--pri-s), 70%);
  --pri-400: hsl(var(--pri-h), var(--pri-s), 60%);
  --pri-500: hsl(var(--pri-h), var(--pri-s), 50%);
  --pri-600: hsl(var(--pri-h), var(--pri-s), 40%);
  --pri-700: hsl(var(--pri-h), var(--pri-s), 30%);
  --pri-800: hsl(var(--pri-h), var(--pri-s), 20%);
  --pri-900: hsl(var(--pri-h), var(--pri-s), 10%);
  
  /* Accent Color Scale */
  --acc-50: hsl(var(--acc-h), var(--acc-s), 97%);
  --acc-100: hsl(var(--acc-h), var(--acc-s), 90%);
  --acc-200: hsl(var(--acc-h), var(--acc-s), 80%);
  --acc-300: hsl(var(--acc-h), var(--acc-s), 70%);
  --acc-400: hsl(var(--acc-h), var(--acc-s), 60%);
  --acc-500: hsl(var(--acc-h), var(--acc-s), 50%);
  --acc-600: hsl(var(--acc-h), var(--acc-s), 40%);
  --acc-700: hsl(var(--acc-h), var(--acc-s), 30%);
  --acc-800: hsl(var(--acc-h), var(--acc-s), 20%);
  --acc-900: hsl(var(--acc-h), var(--acc-s), 10%);
  
  /* Grayscale */
  --gray-50: hsl(0, 0%, 98%);
  --gray-100: hsl(0, 0%, 96%);
  --gray-200: hsl(0, 0%, 90%);
  --gray-300: hsl(0, 0%, 83%);
  --gray-400: hsl(0, 0%, 64%);
  --gray-500: hsl(0, 0%, 45%);
  --gray-600: hsl(0, 0%, 32%);
  --gray-700: hsl(0, 0%, 25%);
  --gray-800: hsl(0, 0%, 15%);
  --gray-900: hsl(0, 0%, 9%);
  
  /* Semantic Colors */
  --success: hsl(120, 100%, 69%);
  --warning: hsl(61, 100%, 48%);
  --error: hsl(0, 100%, 71%);
  --info: hsl(217, 100%, 76%);
  --info-light: hsl(217, 100%, 95%);
  --warning-light: hsl(45, 100%, 90%);
  --success-light: hsl(140, 70%, 90%);
  --error-light: hsl(0, 100%, 94%);
  
  /* Color Aliases */
  --white: #ffffff;
  --black: #000000;
  --pri: var(--pri-500);
  --pri-light: var(--pri-300);
  --pri-dark: var(--pri-700);
  --acc: var(--acc-500);
  --acc-light: var(--acc-300);
  --acc-dark: var(--acc-700);
  --text-dark: var(--gray-900);
  --text-medium: var(--gray-700);
  --text-light: var(--gray-100);
  --text-white: var(--white);
  --bg-light: var(--gray-50);
  --bg-dark: var(--gray-900);
  --bg-muted: var(--gray-100);
  --on-primary: var(--white);
  

  /* ===== SPACING & SIZING ===== */
  
  /* Spacing Scale */
  --spacing-xs: clamp(0.5rem, 1vw, 0.81rem);
  --spacing-s: clamp(0.81rem, 2vw, 1.31rem);
  --spacing-m: clamp(1.31rem, 3vw, 2.11rem);
  --spacing-l: clamp(2.11rem, 5vw, 3.42rem);
  --spacing-xl: clamp(3.42rem, 7vw, 5.53rem);
  
  /* Container & Layout */
  --container-max-width: clamp(320px, 95vw, 1366px);
  --container-padding: clamp(1.6rem, 3vw, 4rem);
  --section-padding-block: clamp(3.2rem, 7vw, 8rem);
  --sec-padding-s: clamp(3.8rem, 7vw, 6.2rem) clamp(2.4rem, 5vw, 4rem);
  --sec-padding-m: clamp(6.2rem, 9vw, 10rem) clamp(4rem, 6.5vw, 6.5rem);
  --sec-padding-l: clamp(10rem, 11vw, 16.2rem) clamp(6.5rem, 7.5vw, 10.5rem);
  --sec-padding-hero: clamp(16.2rem, 13vw, 26.2rem) clamp(10.5rem, 9vw, 16.8rem);
  
  /* Section Padding Scale - Modern UI/UX Best Practices */
  --section-padding-xs: clamp(2rem, 3vw + 1rem, 4rem);      /* 32px - 64px */
  --section-padding-s: clamp(3rem, 4vw + 1.5rem, 6rem);     /* 48px - 96px */
  --section-padding-m: clamp(4rem, 6vw + 2rem, 10rem);      /* 64px - 160px */
  --section-padding-l: clamp(6rem, 8vw + 3rem, 14rem);      /* 96px - 224px */
  --section-padding-xl: clamp(8rem, 10vw + 4rem, 18rem);    /* 128px - 288px */
  --section-padding-full: clamp(10rem, 12vw + 6rem, 24rem); /* 160px - 384px */
  
  --grid-gap: var(--spacing-m);

  /* ===== VISUAL EFFECTS ===== */
  
  /* Shadows */
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-m: 0px 4px 6px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-l: 0px 10px 15px rgba(0, 0, 0, 0.05), 0px 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.05), 0px 10px 10px rgba(0, 0, 0, 0.1);
  --shadow-inset: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --radius-xs: clamp(0.4rem, 0.4vw, 0.5rem);
  --radius-s: clamp(0.5rem, 0.5vw, 0.63rem);
  --radius-m: clamp(0.63rem, 0.6vw, 0.78rem);
  --radius-l: clamp(0.78rem, 0.7vw, 0.98rem);
  --radius-xl: clamp(0.98rem, 0.8vw, 1.22rem);
  --radius-full: 999rem;
  
  /* Transitions */
  --transition-fast: 0.1s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* ===== ACCESSIBILITY ===== */
  
  --focus-outline-width: 3px;
  --focus-color: #f90;
  --focus-outline-offset: 2px;
  --focus-shadow: 0 0 0 3px rgba(255, 153, 0, 0.4);

  /* ===== BREAKPOINTS ===== */
  
  --breakpoint-xs: 480px;  /* Extra small devices */
  --breakpoint-sm: 768px;  /* Small devices (tablets) */
  --breakpoint-md: 992px;  /* Medium devices (desktops) */
  --breakpoint-lg: 1200px; /* Large devices (large desktops) */
  --breakpoint-xl: 1440px; /* Extra large devices */
  --breakpoint-2xl: 1920px; /* 2K displays */
  --breakpoint-4k: 3840px; /* 4K displays */
}

/* ==========================================================================
   DIVI INTEGRATION & OVERRIDES
   ========================================================================== */

/* Divi Text Module Overrides */
.et_pb_text {
  margin: 0 !important;
}

/* Divi Button Overrides */
button, .et_pb_button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   UTILITY CLASSES - TYPOGRAPHY
   ========================================================================== */

/* Performance: Use will-change for elements that will animate */
.hover-grow, .hover-shrink, .hover-lift, .hover-float {
  will-change: transform;
}

/* Performance: Use contain for better rendering performance */
.sk-content, .richtext {
  contain: layout style;
}

/* Font Families */
.accent-text {
  font-family: var(--font-tertiary);
}

/* Font Sizes with Line Heights */
.text-xs  { 
  font-size: var(--text-xs) !important; 
  line-height: var(--line-height-text-xs) !important;
}
.text-s   { 
  font-size: var(--text-s) !important; 
  line-height: var(--line-height-text-s) !important;
}
.text-m   { 
  font-size: var(--text-m) !important; 
  line-height: var(--line-height-text-m) !important;
}
.text-l   { 
  font-size: var(--text-l) !important; 
  line-height: var(--line-height-text-l) !important;
}
.text-xl  { 
  font-size: var(--text-xl) !important; 
  line-height: var(--line-height-text-xl) !important;
}
.text-2xl { 
  font-size: var(--text-2xl) !important; 
  line-height: var(--line-height-text-2xl) !important;
}
.text-3xl { 
  font-size: var(--text-3xl) !important; 
  line-height: var(--line-height-text-3xl) !important;
}
.text-4xl { 
  font-size: var(--text-4xl) !important; 
  line-height: var(--line-height-text-4xl) !important;
}

/* Font Weights */
.font-100 { font-weight: 100 !important; }
.font-200 { font-weight: 200 !important; }
.font-300 { font-weight: 300 !important; }
.font-400, .font-normal { font-weight: 400 !important; }
.font-500 { font-weight: 500 !important; }
.font-600, .font-semibold { font-weight: 600 !important; }
.font-700, .font-bold { font-weight: 700 !important; }
.font-800, .font-extrabold { font-weight: 800 !important; }
.font-900 { font-weight: 900 !important; }

/* Text Transform */
.text-uppercase     { text-transform: uppercase !important; }
.text-lowercase     { text-transform: lowercase !important; }
.text-capitalize    { text-transform: capitalize !important; }

/* Font Style */
.text-italic        { font-style: italic !important; }
.text-strike        { text-decoration: line-through !important; }
.text-decoration-none { text-decoration: none !important; }

/* Letter Spacing */
.tracking-wide      { letter-spacing: 0.1em !important; }
.tracking-wider     { letter-spacing: 0.15em !important; }
.tracking-tight     { letter-spacing: -0.02em !important; }

/* Text Alignment */
.text-left          { text-align: left !important; }
.text-center        { text-align: center !important; }
.text-right         { text-align: right !important; }
.text-justify       { text-align: justify !important; }

/* ==========================================================================
   UTILITY CLASSES - COLORS
   ========================================================================== */

/* Text Colors - Primary */
.text-pri-50 { color: var(--pri-50) !important; }
.text-pri-100 { color: var(--pri-100) !important; }
.text-pri-200 { color: var(--pri-200) !important; }
.text-pri-300 { color: var(--pri-300) !important; }
.text-pri-400 { color: var(--pri-400) !important; }
.text-pri-500 { color: var(--pri-500) !important; }
.text-pri-600 { color: var(--pri-600) !important; }
.text-pri-700 { color: var(--pri-700) !important; }
.text-pri-800 { color: var(--pri-800) !important; }
.text-pri-900 { color: var(--pri-900) !important; }

/* Text Colors - Accent */
.text-acc-50 { color: var(--acc-50) !important; }
.text-acc-100 { color: var(--acc-100) !important; }
.text-acc-200 { color: var(--acc-200) !important; }
.text-acc-300 { color: var(--acc-300) !important; }
.text-acc-400 { color: var(--acc-400) !important; }
.text-acc-500 { color: var(--acc-500) !important; }
.text-acc-600 { color: var(--acc-600) !important; }
.text-acc-700 { color: var(--acc-700) !important; }
.text-acc-800 { color: var(--acc-800) !important; }
.text-acc-900 { color: var(--acc-900) !important; }

/* Text Colors - Gray */
.text-gray-50 { color: var(--gray-50) !important; }
.text-gray-100 { color: var(--gray-100) !important; }
.text-gray-200 { color: var(--gray-200) !important; }
.text-gray-300 { color: var(--gray-300) !important; }
.text-gray-400 { color: var(--gray-400) !important; }
.text-gray-500 { color: var(--gray-500) !important; }
.text-gray-600 { color: var(--gray-600) !important; }
.text-gray-700 { color: var(--gray-700) !important; }
.text-gray-800 { color: var(--gray-800) !important; }
.text-gray-900 { color: var(--gray-900) !important; }

/* Background Colors - Primary */
.bg-pri-50 { background-color: var(--pri-50); }
.bg-pri-100 { background-color: var(--pri-100); }
.bg-pri-200 { background-color: var(--pri-200); }
.bg-pri-300 { background-color: var(--pri-300); }
.bg-pri-400 { background-color: var(--pri-400); }
.bg-pri-500 { background-color: var(--pri-500); }
.bg-pri-600 { background-color: var(--pri-600); }
.bg-pri-700 { background-color: var(--pri-700); }
.bg-pri-800 { background-color: var(--pri-800); }
.bg-pri-900 { background-color: var(--pri-900); }

/* Background Colors - Accent */
.bg-acc-50 { background-color: var(--acc-50); }
.bg-acc-100 { background-color: var(--acc-100); }
.bg-acc-200 { background-color: var(--acc-200); }
.bg-acc-300 { background-color: var(--acc-300); }
.bg-acc-400 { background-color: var(--acc-400); }
.bg-acc-500 { background-color: var(--acc-500); }
.bg-acc-600 { background-color: var(--acc-600); }
.bg-acc-700 { background-color: var(--acc-700); }
.bg-acc-800 { background-color: var(--acc-800); }
.bg-acc-900 { background-color: var(--acc-900); }

/* Background Colors - Gray */
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }

/* Background Colors - Semantic */
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error-500-t10 { background-color: var(--error-500-t10); }
.bg-error-500-t25 { background-color: var(--error-500-t25); }
.bg-error-500-t50 { background-color: var(--error-500-t50); }
.bg-error-500-t75 { background-color: var(--error-500-t75); }


/* ==========================================================================
   UTILITY CLASSES - SPACING
   ========================================================================== */

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-s { gap: var(--spacing-s) !important; }
.gap-m { gap: var(--spacing-m) !important; }
.gap-l { gap: var(--spacing-l) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }

/* Margin - All Sides */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-s { margin: var(--spacing-s) !important; }
.m-m { margin: var(--spacing-m) !important; }
.m-l { margin: var(--spacing-l) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* Margin - Top */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-s { margin-top: var(--spacing-s) !important; }
.mt-m { margin-top: var(--spacing-m) !important; }
.mt-l { margin-top: var(--spacing-l) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }

/* Margin - Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-s { margin-bottom: var(--spacing-s) !important; }
.mb-m { margin-bottom: var(--spacing-m) !important; }
.mb-l { margin-bottom: var(--spacing-l) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

/* Margin - Left */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-s { margin-left: var(--spacing-s) !important; }
.ml-m { margin-left: var(--spacing-m) !important; }
.ml-l { margin-left: var(--spacing-l) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }

/* Margin - Right */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mr-s { margin-right: var(--spacing-s) !important; }
.mr-m { margin-right: var(--spacing-m) !important; }
.mr-l { margin-right: var(--spacing-l) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }

/* Padding - All Sides */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-s { padding: var(--spacing-s) !important; }
.p-m { padding: var(--spacing-m) !important; }
.p-l { padding: var(--spacing-l) !important; }
.p-xl { padding: var(--spacing-xl) !important; }

/* Padding - Top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-s { padding-top: var(--spacing-s) !important; }
.pt-m { padding-top: var(--spacing-m) !important; }
.pt-l { padding-top: var(--spacing-l) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }

/* Padding - Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-s { padding-bottom: var(--spacing-s) !important; }
.pb-m { padding-bottom: var(--spacing-m) !important; }
.pb-l { padding-bottom: var(--spacing-l) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }

/* Padding - Left */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--spacing-xs) !important; }
.pl-s { padding-left: var(--spacing-s) !important; }
.pl-m { padding-left: var(--spacing-m) !important; }
.pl-l { padding-left: var(--spacing-l) !important; }
.pl-xl { padding-left: var(--spacing-xl) !important; }

/* Padding - Right */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--spacing-xs) !important; }
.pr-s { padding-right: var(--spacing-s) !important; }
.pr-m { padding-right: var(--spacing-m) !important; }
.pr-l { padding-right: var(--spacing-l) !important; }
.pr-xl { padding-right: var(--spacing-xl) !important; }

/* Legacy Padding Classes (for backwards compatibility) */
.no-padding { padding: 0 !important; }
.pad-xs { padding: var(--spacing-xs) !important; }
.pad-s { padding: var(--spacing-s) !important; }
.pad-m { padding: var(--spacing-m) !important; }
.pad-l { padding: var(--spacing-l) !important; }
.pad-xl { padding: var(--spacing-xl) !important; }

/* ==========================================================================
   SECTION PADDING UTILITIES - MODERN UI/UX DESIGN
   ========================================================================== */

/* Section Padding - Top & Bottom (Responsive & Fluid) */
.section-padding-xs {
  padding-top: var(--section-padding-xs) !important;
  padding-bottom: var(--section-padding-xs) !important;
}

.section-padding-s {
  padding-top: var(--section-padding-s) !important;
  padding-bottom: var(--section-padding-s) !important;
}

.section-padding-m {
  padding-top: var(--section-padding-m) !important;
  padding-bottom: var(--section-padding-m) !important;
}

.section-padding-l {
  padding-top: var(--section-padding-l) !important;
  padding-bottom: var(--section-padding-l) !important;
}

.section-padding-xl {
  padding-top: var(--section-padding-xl) !important;
  padding-bottom: var(--section-padding-xl) !important;
}

.section-padding-full {
  padding-top: var(--section-padding-full) !important;
  padding-bottom: var(--section-padding-full) !important;
}

/* Section Padding - Top Only */
.section-padding-top-xs { padding-top: var(--section-padding-xs) !important; }
.section-padding-top-s { padding-top: var(--section-padding-s) !important; }
.section-padding-top-m { padding-top: var(--section-padding-m) !important; }
.section-padding-top-l { padding-top: var(--section-padding-l) !important; }
.section-padding-top-xl { padding-top: var(--section-padding-xl) !important; }
.section-padding-top-full { padding-top: var(--section-padding-full) !important; }

/* Section Padding - Bottom Only */
.section-padding-bottom-xs { padding-bottom: var(--section-padding-xs) !important; }
.section-padding-bottom-s { padding-bottom: var(--section-padding-s) !important; }
.section-padding-bottom-m { padding-bottom: var(--section-padding-m) !important; }
.section-padding-bottom-l { padding-bottom: var(--section-padding-l) !important; }
.section-padding-bottom-xl { padding-bottom: var(--section-padding-xl) !important; }
.section-padding-bottom-full { padding-bottom: var(--section-padding-full) !important; }

/* Responsive Section Padding - Mobile First Approach */
@media (min-width: 768px) {
  .section-padding-xs-sm {
    padding-top: clamp(2.5rem, 4vw + 1.5rem, 5rem) !important;
    padding-bottom: clamp(2.5rem, 4vw + 1.5rem, 5rem) !important;
  }
  
  .section-padding-s-sm {
    padding-top: clamp(4rem, 5vw + 2rem, 7rem) !important;
    padding-bottom: clamp(4rem, 5vw + 2rem, 7rem) !important;
  }
  
  .section-padding-m-sm {
    padding-top: clamp(5rem, 7vw + 2.5rem, 10rem) !important;
    padding-bottom: clamp(5rem, 7vw + 2.5rem, 10rem) !important;
  }
  
  .section-padding-l-sm {
    padding-top: clamp(7rem, 9vw + 3.5rem, 14rem) !important;
    padding-bottom: clamp(7rem, 9vw + 3.5rem, 14rem) !important;
  }
  
  .section-padding-xl-sm {
    padding-top: clamp(9rem, 11vw + 4.5rem, 18rem) !important;
    padding-bottom: clamp(9rem, 11vw + 4.5rem, 18rem) !important;
  }
  
  .section-padding-full-sm {
    padding-top: clamp(12rem, 13vw + 6rem, 22rem) !important;
    padding-bottom: clamp(12rem, 13vw + 6rem, 22rem) !important;
  }
}

@media (min-width: 1024px) {
  .section-padding-xs-lg {
    padding-top: clamp(3rem, 5vw + 2rem, 6rem) !important;
    padding-bottom: clamp(3rem, 5vw + 2rem, 6rem) !important;
  }
  
  .section-padding-s-lg {
    padding-top: clamp(5rem, 6vw + 3rem, 9rem) !important;
    padding-bottom: clamp(5rem, 6vw + 3rem, 9rem) !important;
  }
  
  .section-padding-m-lg {
    padding-top: clamp(6rem, 8vw + 4rem, 12rem) !important;
    padding-bottom: clamp(6rem, 8vw + 4rem, 12rem) !important;
  }
  
  .section-padding-l-lg {
    padding-top: clamp(8rem, 10vw + 5rem, 16rem) !important;
    padding-bottom: clamp(8rem, 10vw + 5rem, 16rem) !important;
  }
  
  .section-padding-xl-lg {
    padding-top: clamp(10rem, 12vw + 6rem, 20rem) !important;
    padding-bottom: clamp(10rem, 12vw + 6rem, 20rem) !important;
  }
  
  .section-padding-full-lg {
    padding-top: clamp(14rem, 15vw + 8rem, 28rem) !important;
    padding-bottom: clamp(14rem, 15vw + 8rem, 28rem) !important;
  }
}

/* Additional responsive breakpoints for better fluid scaling */
@media (min-width: 1200px) {
  .section-padding-xs-xl {
    padding-top: clamp(3.5rem, 6vw + 2.5rem, 7rem) !important;
    padding-bottom: clamp(3.5rem, 6vw + 2.5rem, 7rem) !important;
  }
  
  .section-padding-s-xl {
    padding-top: clamp(6rem, 7vw + 3.5rem, 10rem) !important;
    padding-bottom: clamp(6rem, 7vw + 3.5rem, 10rem) !important;
  }
  
  .section-padding-m-xl {
    padding-top: clamp(8rem, 9vw + 4.5rem, 14rem) !important;
    padding-bottom: clamp(8rem, 9vw + 4.5rem, 14rem) !important;
  }
  
  .section-padding-l-xl {
    padding-top: clamp(10rem, 11vw + 5.5rem, 18rem) !important;
    padding-bottom: clamp(10rem, 11vw + 5.5rem, 18rem) !important;
  }
  
  .section-padding-xl-xl {
    padding-top: clamp(12rem, 13vw + 6.5rem, 22rem) !important;
    padding-bottom: clamp(12rem, 13vw + 6.5rem, 22rem) !important;
  }
  
  .section-padding-full-xl {
    padding-top: clamp(16rem, 16vw + 8.5rem, 32rem) !important;
    padding-bottom: clamp(16rem, 16vw + 8.5rem, 32rem) !important;
  }
}

@media (min-width: 1440px) {
  .section-padding-xs-2xl {
    padding-top: clamp(4rem, 7vw + 3rem, 8rem) !important;
    padding-bottom: clamp(4rem, 7vw + 3rem, 8rem) !important;
  }
  
  .section-padding-s-2xl {
    padding-top: clamp(7rem, 8vw + 4rem, 11rem) !important;
    padding-bottom: clamp(7rem, 8vw + 4rem, 11rem) !important;
  }
  
  .section-padding-m-2xl {
    padding-top: clamp(9rem, 10vw + 5rem, 15rem) !important;
    padding-bottom: clamp(9rem, 10vw + 5rem, 15rem) !important;
  }
  
  .section-padding-l-2xl {
    padding-top: clamp(12rem, 12vw + 6rem, 20rem) !important;
    padding-bottom: clamp(12rem, 12vw + 6rem, 20rem) !important;
  }
  
  .section-padding-xl-2xl {
    padding-top: clamp(14rem, 14vw + 7rem, 24rem) !important;
    padding-bottom: clamp(14rem, 14vw + 7rem, 24rem) !important;
  }
  
  .section-padding-full-2xl {
    padding-top: clamp(18rem, 18vw + 9rem, 36rem) !important;
    padding-bottom: clamp(18rem, 18vw + 9rem, 36rem) !important;
  }
}

/* ==========================================================================
   UTILITY CLASSES - VISUAL EFFECTS
   ========================================================================== */

/* Hover Effects - Transform */
.hover-grow {
  transition: transform var(--transition-normal) ease-in-out !important;
}

.hover-grow:hover {
  transform: scale(1.05) !important;
}

.hover-grow-sm {
  transition: transform var(--transition-normal) ease-in-out !important;
}

.hover-grow-sm:hover {
  transform: scale(1.025) !important;
}

.hover-grow-lg {
  transition: transform var(--transition-normal) ease-in-out !important;
}

.hover-grow-lg:hover {
  transform: scale(1.1) !important;
}

.hover-shrink {
  transition: transform var(--transition-normal) ease-in-out !important;
}

.hover-shrink:hover {
  transform: scale(0.95) !important;
}

/* Hover Effects - Shadow */
.hover-shadow {
  transition: box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-shadow:hover {
  box-shadow: var(--shadow-l) !important;
}

.hover-shadow-xl {
  transition: box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-shadow-xl:hover {
  box-shadow: var(--shadow-xl) !important;
}

.hover-shadow-none {
  transition: box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-shadow-none:hover {
  box-shadow: none !important;
}

.hover-shadow-glow {
  transition: box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-shadow-glow:hover {
  box-shadow: 0 0 20px rgba(var(--pri-h), var(--pri-s), 50%, 0.4) !important;
}

.hover-shadow-glow-acc {
  transition: box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-shadow-glow-acc:hover {
  box-shadow: 0 0 20px rgba(var(--acc-h), var(--acc-s), 50%, 0.4) !important;
}

/* Hover Effects - Opacity */
.hover-opacity-75 {
  transition: opacity var(--transition-normal) ease-in-out !important;
}

.hover-opacity-75:hover {
  opacity: 0.75 !important;
}

.hover-opacity-50 {
  transition: opacity var(--transition-normal) ease-in-out !important;
}

.hover-opacity-50:hover {
  opacity: 0.5 !important;
}

.hover-opacity-100 {
  transition: opacity var(--transition-normal) ease-in-out !important;
}

.hover-opacity-100:hover {
  opacity: 1 !important;
}

/* Hover Effects - Background */
.hover-bg-light {
  transition: background-color var(--transition-normal) ease-in-out !important;
}

.hover-bg-light:hover {
  background-color: var(--gray-50) !important;
}

.hover-bg-dark {
  transition: background-color var(--transition-normal) ease-in-out, color var(--transition-normal) ease-in-out !important;
}

.hover-bg-dark:hover {
  background-color: var(--gray-900) !important;
  color: var(--white) !important;
}

.hover-bg-pri {
  transition: background-color var(--transition-normal) ease-in-out, color var(--transition-normal) ease-in-out !important;
}

.hover-bg-pri:hover {
  background-color: var(--pri-500) !important;
  color: var(--white) !important;
}

.hover-bg-acc {
  transition: background-color var(--transition-normal) ease-in-out, color var(--transition-normal) ease-in-out !important;
}

.hover-bg-acc:hover {
  background-color: var(--acc-500) !important;
  color: var(--white) !important;
}

/* Hover Effects - Border */
.hover-border-pri {
  transition: border-color var(--transition-normal) ease-in-out !important;
}

.hover-border-pri:hover {
  border-color: var(--pri-500) !important;
}

.hover-border-acc {
  transition: border-color var(--transition-normal) ease-in-out !important;
}

.hover-border-acc:hover {
  border-color: var(--acc-500) !important;
}


/* Hover Effects - Brightness/Filter */
.hover-brighten {
  transition: filter var(--transition-normal) ease-in-out !important;
}

.hover-brighten:hover {
  filter: brightness(1.1) !important;
}

.hover-darken {
  transition: filter var(--transition-normal) ease-in-out !important;
}

.hover-darken:hover {
  filter: brightness(0.9) !important;
}

.hover-blur {
  transition: filter var(--transition-normal) ease-in-out !important;
}

.hover-blur:hover {
  filter: blur(2px) !important;
}

.hover-saturate {
  transition: filter var(--transition-normal) ease-in-out !important;
}

.hover-saturate:hover {
  filter: saturate(1.2) !important;
}

.hover-grayscale {
  transition: filter var(--transition-normal) ease-in-out !important;
}

.hover-grayscale:hover {
  filter: grayscale(1) !important;
}

/* Hover Effects - Combined */
.hover-lift {
  transition: transform var(--transition-normal) ease-in-out, box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-lift:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--shadow-l) !important;
}

.hover-float {
  transition: transform var(--transition-normal) ease-in-out, box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-float:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.hover-glow {
  transition: transform var(--transition-normal) ease-in-out, box-shadow var(--transition-normal) ease-in-out !important;
}

.hover-glow:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 20px rgba(var(--pri-h), var(--pri-s), 50%, 0.3) !important;
}

/* Legacy Border Radius Classes */
.rad-xs { border-radius: var(--radius-xs) !important; }
.rad-s { border-radius: var(--radius-s) !important; }
.rad-m { border-radius: var(--radius-m) !important; }
.rad-l { border-radius: var(--radius-l) !important; }
.rad-xl { border-radius: var(--radius-xl) !important; }
.rad-full { border-radius: var(--radius-full) !important; }

/* Shadows */
.shadow-none { box-shadow: none !important; }
.shadow-s { box-shadow: var(--shadow-s) !important; }
.shadow-m { box-shadow: var(--shadow-m) !important; }
.shadow-l { box-shadow: var(--shadow-l) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-inset { box-shadow: var(--shadow-inset) !important; }

/* ==========================================================================
   UTILITY CLASSES - LAYOUT & DISPLAY
   ========================================================================== */

/* Display */
.hide { display: none !important; }
.block { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.hidden { display: none !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-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Width utilities */
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-1\/2 { width: 50% !important; }
.w-1\/3 { width: 33.333333% !important; }
.w-2\/3 { width: 66.666667% !important; }
.w-1\/4 { width: 25% !important; }
.w-3\/4 { width: 75% !important; }

/* Height utilities */
.h-auto { height: auto !important; }
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }

/* Max width utilities */
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }

/* Min height utilities */
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }

/* Color utilities */
.text-primary { color: var(--pri-500) !important; }
.text-secondary { color: var(--acc-500) !important; }
.bg-primary { background-color: var(--pri-500) !important; }
.bg-secondary { background-color: var(--acc-500) !important; }
.bg-white { background-color: white !important; }
.bg-transparent { background-color: transparent !important; }

/* Border utilities */
.border { border: 1px solid var(--gray-300) !important; }
.border-none { border: none !important; }
.rounded { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-full { border-radius: 9999px !important; }


/* Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }

/* Grid Column Spanning */
.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-6 { grid-column: span 6 / span 6 !important; }
.col-span-full { grid-column: 1 / -1 !important; }

/* Grid Row Spanning */
.row-span-1 { grid-row: span 1 / span 1 !important; }
.row-span-2 { grid-row: span 2 / span 2 !important; }
.row-span-3 { grid-row: span 3 / span 3 !important; }
.row-span-4 { grid-row: span 4 / span 4 !important; }
.row-span-5 { grid-row: span 5 / span 5 !important; }
.row-span-6 { grid-row: span 6 / span 6 !important; }
.row-span-full { grid-row: 1 / -1 !important; }

/* ==========================================================================
   COMPONENT CLASSES - TYPOGRAPHY
   ========================================================================== */

/* Headings */
.sk h1, .sk h2, .sk h3, .sk h4, .sk h5, .sk h6 {
  margin-block-end: var(--spacing-s);
  text-rendering: optimizelegibility;
  margin-bottom: 0.5em;
}

.sk h1 {
  font-family: var(--font-primary);
  font-size: var(--heading-4xl);
  line-height: var(--line-height-heading-4xl);
  letter-spacing: -0.025em;
  font-weight: 700;
}

.sk h2 {
  font-family: var(--font-primary);
  font-size: var(--heading-3xl);
  line-height: var(--line-height-heading-3xl);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.sk h3 {
  font-family: var(--font-primary);
  font-size: var(--heading-2xl);
  line-height: var(--line-height-heading-2xl);
  letter-spacing: -0.015em;
  font-weight: 600;
}

.sk h4 {
  font-family: var(--font-primary);
  font-size: var(--heading-xl);
  line-height: var(--line-height-heading-xl);
  letter-spacing: -0.01em;
  font-weight: 500;
}

.sk h5 {
  font-family: var(--font-primary);
  font-size: var(--heading-l);
  line-height: var(--line-height-heading-l);
  letter-spacing: -0.005em;
  font-weight: 500;
}

.sk h6 {
  font-family: var(--font-primary);
  font-size: var(--heading-m);
  line-height: var(--line-height-heading-m);
  letter-spacing: normal;
  font-weight: 500;
}


/* SiteKrafter Heading Classes */
.sk-heading-9xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-9xl) !important;
  line-height: var(--line-height-heading-9xl) !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance !important;
}

.sk-heading-8xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-8xl) !important;
  line-height: var(--line-height-heading-8xl) !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance !important;
}

.sk-heading-7xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-7xl) !important;
  line-height: var(--line-height-heading-7xl) !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
}

.sk-heading-6xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-6xl) !important;
  line-height: var(--line-height-heading-6xl) !important;
  letter-spacing: -0.018em !important;
  text-wrap: balance !important;
}

.sk-heading-5xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-5xl) !important;
  line-height: var(--line-height-heading-5xl) !important;
  letter-spacing: -0.015em !important;
  text-wrap: balance !important;
}

.sk-heading-4xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-4xl) !important;
  line-height: var(--line-height-heading-4xl) !important;
  letter-spacing: -0.012em !important;
  text-wrap: balance !important;
}

.sk-heading-3xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-3xl) !important;
  line-height: var(--line-height-heading-3xl) !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.sk-heading-2xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-2xl) !important;
  line-height: var(--line-height-heading-2xl) !important;
  letter-spacing: -0.008em !important;
  text-wrap: balance !important;
}

.sk-heading-xl {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-xl) !important;
  line-height: var(--line-height-heading-xl) !important;
  letter-spacing: -0.005em !important;
  text-wrap: balance !important;
}

.sk-heading-l {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-l) !important;
  line-height: var(--line-height-heading-l) !important;
  letter-spacing: -0.002em !important;
  text-wrap: balance !important;
}

.sk-heading-m {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-m) !important;
  line-height: var(--line-height-heading-m) !important;
  letter-spacing: normal !important;
  text-wrap: balance !important;
}

.sk-heading-s {
  font-family: var(--font-primary) !important;
  font-size: var(--heading-s) !important;
  line-height: var(--line-height-heading-s) !important;
  letter-spacing: normal !important;
  text-wrap: balance !important;
}

/* Text Elements */
.sk p, .sk a, .sk li {
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-wrap: balance;
}

.sk-content {
  font-size: var(--text-m);
  line-height: var(--line-height-text-m);
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

/* Rich Text */
.richtext {
  font-feature-settings: 'liga' 1, 'kern' 1;
  font-kerning: normal;
  hanging-punctuation: first;
  font-size: var(--text-m);
  line-height: var(--line-height-normal, 1.5);
  max-width: 70ch;
  margin-inline: auto;
}

.richtext blockquote {
  font-style: italic;
  border-inline-start: 3px solid var(--pri);
  padding-inline-start: var(--spacing-m);
  margin-inline: 0;
  color: var(--text-medium);
}

.richtext ul,
.richtext ol {
  padding-inline-start: var(--spacing-l);
  margin-block: var(--spacing-m);
}

.richtext li + li {
  margin-block-start: var(--spacing-xs);
}

/* ==========================================================================
   COMPONENT CLASSES - UI ELEMENTS
   ========================================================================== */

/* Buttons */
.button-pri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--white);
  background: var(--pri);
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-acc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--white);
  background: var(--acc);
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-outline-pri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--pri);
  background: transparent;
  border: 2px solid var(--pri);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-outline-acc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--acc);
  background: transparent;
  border: 2px solid var(--acc);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.button-outline {
  background: transparent;
  color: var(--acc);
  border: 2px solid var(--acc);
  box-shadow: none;
}

.button-outline:hover {
  background: var(--acc);
  color: var(--white);
}

.button-ghost {
  background: transparent;
  color: var(--acc);
  box-shadow: none;
  border: none;
}

.button-ghost:hover {
  background: hsla(var(--pri-h), var(--pri-s), 50%, 0.1);
}

.button-text {
  background: none;
  color: var(--acc);
  padding: var(--spacing-xs);
  box-shadow: none;
}

.button-text:hover {
  text-decoration: underline;
}

.button-link {
  background: none;
  color: var(--acc);
  text-decoration: underline;
  padding: var(--spacing-xs);
}

.button-link:hover {
  color: var(--acc-dark);
}

/* Notices */
.notice,
.notice-info,
.notice-warning,
.notice-success,
.notice-error {
  font-size: var(--text-m);
  padding: var(--spacing-m);
  max-width: 65ch;
  border-radius: var(--radius-xs);
  line-height: var(--line-height-normal);
  margin-block: var(--spacing-s);
  color: var(--text-dark);
  background-color: var(--info-light);
}

.notice-info { background-color: var(--info-light); }
.notice-warning { background-color: var(--warning-light); }
.notice-success { background-color: var(--success-light); }
.notice-error { background-color: var(--error-light); }

/* Glass Effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: .25rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  transition: all 0.3s ease;
}

.glass:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   COMPONENT CLASSES - ADVANCED LAYOUTS
   ========================================================================== */

/* Responsive Grid Systems */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
}

.grid-cols-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 300px), 1fr));
}

.grid-cols-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 25vw, 300px), 1fr));
}

/* Bento Grid System */
.grid-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: var(--spacing-l);
}

.bento-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-l);
  background-color: var(--gray-100);
  border-radius: var(--radius-m);
  font-size: var(--text-m);
  font-weight: bold;
}

.bento-lg { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }
.bento-full { grid-column: 1 / -1; grid-row: span 2; }

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ========================================================================== */

/* Mobile Phones (< 480px) */
@media (max-width: var(--breakpoint-xs)) {
  
  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .grid-cols-auto-fit,
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 40vw, 200px), 1fr));
    --grid-gap: var(--spacing-xs);
  }
}

/* Small Devices (< 768px) */
@media (max-width: var(--breakpoint-sm)) {
}

/* Tablets / Medium Devices (< 992px) */
@media (max-width: var(--breakpoint-md)) {
}

/* Large Devices (> 1200px) */
@media (min-width: var(--breakpoint-lg)) {
  .grid-cols-auto-fit,
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 20vw, 350px), 1fr));
  }
}

/* 4K Displays (> 3840px) */
@media (min-width: var(--breakpoint-4k)) {
  .grid-cols-auto-fit,
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 15vw, 400px), 1fr));
  }
}



/* Glass effect utility */
.glass-effect {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   RESPONSIVE UTILITIES - MOBILE FIRST
   ========================================================================== */

/* Small devices (tablets) - 768px and up */
@media (min-width: 768px) {
  .sm\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
  .sm\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
  .sm\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
  .sm\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
  .sm\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
  .sm\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
  .sm\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
  .sm\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
  
  .sm\:p-0 { padding: 0 !important; }
  .sm\:p-xs { padding: var(--spacing-xs) !important; }
  .sm\:p-s { padding: var(--spacing-s) !important; }
  .sm\:p-m { padding: var(--spacing-m) !important; }
  .sm\:p-l { padding: var(--spacing-l) !important; }
  .sm\:p-xl { padding: var(--spacing-xl) !important; }
  
  .sm\:m-0 { margin: 0 !important; }
  .sm\:m-xs { margin: var(--spacing-xs) !important; }
  .sm\:m-s { margin: var(--spacing-s) !important; }
  .sm\:m-m { margin: var(--spacing-m) !important; }
  .sm\:m-l { margin: var(--spacing-l) !important; }
  .sm\:m-xl { margin: var(--spacing-xl) !important; }
  
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  
  .sm\:flex { display: flex !important; }
  .sm\:grid { display: grid !important; }
  .sm\:block { display: block !important; }
  .sm\:hidden { display: none !important; }
  
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:flex-col { flex-direction: column !important; }
  
  .sm\:justify-start { justify-content: flex-start !important; }
  .sm\:justify-center { justify-content: center !important; }
  .sm\:justify-end { justify-content: flex-end !important; }
  .sm\:justify-between { justify-content: space-between !important; }
  
  .sm\:items-start { align-items: flex-start !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:items-end { align-items: flex-end !important; }
}

/* Medium devices (desktops) - 992px and up */
@media (min-width: 992px) {
  .md\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
  .md\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
  .md\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
  .md\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
  .md\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
  .md\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
  .md\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
  .md\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
  
  .md\:p-0 { padding: 0 !important; }
  .md\:p-xs { padding: var(--spacing-xs) !important; }
  .md\:p-s { padding: var(--spacing-s) !important; }
  .md\:p-m { padding: var(--spacing-m) !important; }
  .md\:p-l { padding: var(--spacing-l) !important; }
  .md\:p-xl { padding: var(--spacing-xl) !important; }
  
  .md\:m-0 { margin: 0 !important; }
  .md\:m-xs { margin: var(--spacing-xs) !important; }
  .md\:m-s { margin: var(--spacing-s) !important; }
  .md\:m-m { margin: var(--spacing-m) !important; }
  .md\:m-l { margin: var(--spacing-l) !important; }
  .md\:m-xl { margin: var(--spacing-xl) !important; }
  
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  
  .md\:flex { display: flex !important; }
  .md\:grid { display: grid !important; }
  .md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
  
  .md\:flex-row { flex-direction: row !important; }
  .md\:flex-col { flex-direction: column !important; }
  
  .md\:justify-start { justify-content: flex-start !important; }
  .md\:justify-center { justify-content: center !important; }
  .md\:justify-end { justify-content: flex-end !important; }
  .md\:justify-between { justify-content: space-between !important; }
  
  .md\:items-start { align-items: flex-start !important; }
  .md\:items-center { align-items: center !important; }
  .md\:items-end { align-items: flex-end !important; }
}

/* Large devices (large desktops) - 1200px and up */
@media (min-width: 1200px) {
  .lg\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
  .lg\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
  .lg\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
  .lg\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
  .lg\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
  .lg\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
  .lg\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
  .lg\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
  
  .lg\:p-0 { padding: 0 !important; }
  .lg\:p-xs { padding: var(--spacing-xs) !important; }
  .lg\:p-s { padding: var(--spacing-s) !important; }
  .lg\:p-m { padding: var(--spacing-m) !important; }
  .lg\:p-l { padding: var(--spacing-l) !important; }
  .lg\:p-xl { padding: var(--spacing-xl) !important; }
  
  .lg\:m-0 { margin: 0 !important; }
  .lg\:m-xs { margin: var(--spacing-xs) !important; }
  .lg\:m-s { margin: var(--spacing-s) !important; }
  .lg\:m-m { margin: var(--spacing-m) !important; }
  .lg\:m-l { margin: var(--spacing-l) !important; }
  .lg\:m-xl { margin: var(--spacing-xl) !important; }
  
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  
  .lg\:flex { display: flex !important; }
  .lg\:grid { display: grid !important; }
  .lg\:block { display: block !important; }
  .lg\:hidden { display: none !important; }
  
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:flex-col { flex-direction: column !important; }
  
  .lg\:justify-start { justify-content: flex-start !important; }
  .lg\:justify-center { justify-content: center !important; }
  .lg\:justify-end { justify-content: flex-end !important; }
  .lg\:justify-between { justify-content: space-between !important; }
  
  .lg\:items-start { align-items: flex-start !important; }
  .lg\:items-center { align-items: center !important; }
  .lg\:items-end { align-items: flex-end !important; }
}