/* =========================================== */
/* JFSN PORTFOLIO - DESIGN SYSTEM BUNDLE */
/* Generated: 2025-12-03T16:50:04.169Z */
/* Combines 16 CSS files into one optimized bundle */
/* =========================================== */


/* =========================================== */
/* assets/css/design-system-colors.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - COLOR SYSTEM */
/* Single source of truth for all colors */
/* =========================================== */

:root {
  /* ===== PRIMARY BRAND COLOR (Purple/Indigo) ===== */
  --brand-primary: #6366f1;              /* Main brand color - Indigo 500 */
  --brand-primary-rgb: 99, 102, 241;     /* RGB values for alpha compositing */
  
  /* ===== BRAND COLOR SCALE ===== */
  /* Light to Dark progression for various UI needs */
  --brand-50: #f0f9ff;                   /* Lightest - backgrounds */
  --brand-100: #e0f2fe;                  /* Very light - subtle backgrounds */
  --brand-200: #bae6fd;                  /* Light - hover backgrounds */
  --brand-300: #7dd3fc;                  /* Medium light - borders */
  --brand-400: #8b5cf6;                  /* Medium - secondary elements */
  --brand-500: #6366f1;                  /* Main - primary elements */
  --brand-600: #7c3aed;                  /* Medium dark - hover states */
  --brand-700: #5b21b6;                  /* Dark - active states */
  --brand-800: #4c1d95;                  /* Darker - pressed states */
  --brand-900: #3b0764;                  /* Darkest - deep contrast */
  
  /* ===== INTERACTIVE STATES ===== */
  --brand-hover: #7c3aed;                /* Hover state color */
  --brand-active: #5b21b6;               /* Active/pressed state */
  --brand-focus: rgba(99, 102, 241, 0.25); /* Focus ring color */
  
  /* ===== ACCENT COLORS ===== */
  --brand-accent-light: #a855f7;         /* Light purple for badges, tags */
  --brand-accent: #9333ea;               /* Accent purple for highlights */
  --brand-accent-dark: #6b21a8;          /* Dark accent for contrast */
  
  /* ===== GRADIENTS ===== */
  /* Consistent gradients throughout the site */
  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-primary-hover: linear-gradient(135deg, #7c3aed, #9333ea);
  --gradient-accent: linear-gradient(135deg, #9333ea, #a855f7);
  --gradient-accent-reverse: linear-gradient(135deg, #a855f7, #6366f1);
  --gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  
  /* ===== SEMANTIC USE CASES ===== */
  /* Named by purpose for clarity */
  --color-button-primary: var(--brand-primary);
  --color-button-primary-hover: var(--brand-hover);
  --color-button-primary-active: var(--brand-active);
  
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-600);
  --color-link-visited: var(--brand-700);
  
  --color-badge: var(--brand-accent-light);
  --color-tag: var(--brand-400);
  --color-highlight: var(--brand-200);
  
  --color-border-focus: var(--brand-primary);
  --color-border-active: var(--brand-600);
  
  /* ===== OPACITY VARIANTS ===== */
  /* For overlays, backgrounds, and transparency needs */
  --brand-alpha-10: rgba(99, 102, 241, 0.1);
  --brand-alpha-20: rgba(99, 102, 241, 0.2);
  --brand-alpha-30: rgba(99, 102, 241, 0.3);
  --brand-alpha-40: rgba(99, 102, 241, 0.4);
  --brand-alpha-50: rgba(99, 102, 241, 0.5);
  --brand-alpha-60: rgba(99, 102, 241, 0.6);
  --brand-alpha-70: rgba(99, 102, 241, 0.7);
  --brand-alpha-80: rgba(99, 102, 241, 0.8);
  --brand-alpha-90: rgba(99, 102, 241, 0.9);
  
  /* ===== SEMANTIC COLORS (Success, Warning, Error, Info) ===== */
  --color-success: #10b981;              /* Green - success states */
  --color-success-light: #34d399;
  --color-success-dark: #059669;
  
  --color-warning: #f59e0b;              /* Amber - warning states */
  --color-warning-light: #fbbf24;
  --color-warning-dark: #d97706;
  
  --color-error: #ef4444;                /* Red - error states */
  --color-error-light: #f87171;
  --color-error-dark: #dc2626;
  
  --color-info: #3b82f6;                 /* Blue - info states */
  --color-info-light: #60a5fa;
  --color-info-dark: #2563eb;
  
  /* ===== TEXT COLORS ===== */
  --text-primary: #0f172a;               /* Primary text - Dark theme: #ffffff */
  --text-secondary: #64748b;             /* Secondary text - Dark theme: #cbd5e1 */
  --text-tertiary: #94a3b8;              /* Tertiary text */
  --text-muted: #64748b;                 /* Muted text */
  --text-inverse: #ffffff;               /* Inverse text (white) */
  
  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: #ffffff;                 /* Primary background - Dark theme: #0f172a */
  --bg-secondary: #f8fafc;              /* Secondary background - Dark theme: #1e293b */
  --bg-tertiary: #f1f5f9;                /* Tertiary background */
  
  /* ===== BORDER COLORS ===== */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --border-dark: #9ca3af;
  
  /* ===== BOOTSTRAP SILICON COMPATIBILITY ===== */
  /* Map to Bootstrap Silicon theme variables for compatibility */
  --si-primary: var(--brand-primary);
  --si-primary-rgb: var(--brand-primary-rgb);
  --si-secondary: #eff2fc;
  --si-success: var(--color-success);
  --si-info: var(--color-info);
  --si-warning: var(--color-warning);
  --si-danger: var(--color-error);
  --si-light: #fff;
  --si-dark: #0b0f19;
}

/* ===== DARK MODE ADJUSTMENTS ===== */
[data-bs-theme="dark"] {
  /* Slightly adjust purples for dark mode readability */
  --brand-primary: #8b5cf6;              /* Lighter purple for dark backgrounds */
  --brand-hover: #a855f7;                /* Even lighter for hover */
  --brand-active: #9333ea;               /* Medium for active */
  
  /* Adjust opacity for dark mode */
  --brand-alpha-10: rgba(139, 92, 246, 0.1);
  --brand-alpha-20: rgba(139, 92, 246, 0.2);
  --brand-alpha-30: rgba(139, 92, 246, 0.3);
  
  /* Text colors for dark mode */
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-muted: #94a3b8;
  
  /* Background colors for dark mode */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  
  /* Bootstrap Silicon compatibility */
  --si-primary: #8b5cf6;
}

/* =========================================== */
/* END UNIFIED COLOR SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-typography.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - TYPOGRAPHY SYSTEM */
/* Single source of truth for all typography */
/* =========================================== */

:root {
  /* ===== FONT FAMILIES ===== */
  --font-headline: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Inter', sans-serif;
  
  /* Legacy compatibility aliases */
  --font-sans: var(--font-body);
  --font-serif: var(--font-headline);
  
  /* ===== FLUID FONT SIZES ===== */
  /* Responsive typography that scales beautifully across viewports */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12-14px */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14-16px */
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16-18px */
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);        /* 18-24px */
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);     /* 20-30px */
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);         /* 24-36px */
  --font-size-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);      /* 30-48px */
  --font-size-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 4rem);        /* 36-64px */
  --font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 6rem);            /* 48-96px */
  --font-size-6xl: clamp(4rem, 3rem + 5vw, 8rem);                /* 64-128px */
  
  /* ===== FONT WEIGHTS ===== */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* ===== LINE HEIGHTS ===== */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* ===== LETTER SPACING ===== */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: -0.01em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  
  /* ===== SEMANTIC TYPOGRAPHY VARIABLES ===== */
  /* Named by purpose for clarity */
  --font-size-heading-1: var(--font-size-5xl);
  --font-size-heading-2: var(--font-size-4xl);
  --font-size-heading-3: var(--font-size-3xl);
  --font-size-heading-4: var(--font-size-2xl);
  --font-size-heading-5: var(--font-size-xl);
  --font-size-heading-6: var(--font-size-lg);
  
  --font-weight-heading-1: var(--font-weight-black);
  --font-weight-heading-2: var(--font-weight-extrabold);
  --font-weight-heading-3: var(--font-weight-bold);
  --font-weight-heading-4: var(--font-weight-bold);
  --font-weight-heading-5: var(--font-weight-semibold);
  --font-weight-heading-6: var(--font-weight-semibold);
  
  --line-height-heading: var(--line-height-tight);
  --line-height-body: var(--line-height-relaxed);
  --line-height-lead: var(--line-height-normal);
}

/* ===== BASE TYPOGRAPHY ===== */
html {
  font-size: clamp(16px, 1vw, 20px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-primary);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* ===== HEADING SYSTEM ===== */
h1, .h1 {
  font-family: var(--font-headline);
  font-size: var(--font-size-heading-1);
  font-weight: var(--font-weight-heading-1);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-headline);
  font-size: var(--font-size-heading-2);
  font-weight: var(--font-weight-heading-2);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

h3, .h3 {
  font-family: var(--font-headline);
  font-size: var(--font-size-heading-3);
  font-weight: var(--font-weight-heading-3);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: 1rem;
  color: var(--text-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-heading-4);
  font-weight: var(--font-weight-heading-4);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: 0.875rem;
  color: var(--text-primary);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--font-size-heading-5);
  font-weight: var(--font-weight-heading-5);
  line-height: var(--line-height-normal);
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--font-size-heading-6);
  font-weight: var(--font-weight-heading-6);
  line-height: var(--line-height-normal);
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

/* ===== BODY TEXT ===== */
p {
  margin-bottom: 1.25rem;
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-lead);
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* ===== TEXT UTILITIES ===== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }

/* ===== DARK MODE TYPOGRAPHY ===== */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .lead {
  color: var(--text-secondary);
}

/* ===== FONT DISPLAY OPTIMIZATION ===== */
/* Prevent layout shift from font loading */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-display: optional;
}

/* ===== VARIABLE FONTS SUPPORT ===== */
/* Variable fonts allow dynamic weight/stretch adjustments */
@font-face {
  font-family: 'Inter Variable';
  src: url('fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}

.font-variable {
  font-family: 'Inter Variable', var(--font-body);
  font-variation-settings: 'wght' var(--font-weight-normal);
}

/* ===== CONTAINER QUERY TYPOGRAPHY ===== */
/* Responsive typography based on container size */
@container (min-width: 400px) {
  h1, .h1 {
    font-size: clamp(2rem, 5cqw, 4rem);
  }
  
  h2, .h2 {
    font-size: clamp(1.5rem, 4cqw, 3rem);
  }
}

@container (min-width: 600px) {
  h1, .h1 {
    font-size: clamp(2.5rem, 6cqw, 5rem);
  }
}

/* ===== TEXT BALANCE (when supported) ===== */
.text-balance {
  text-wrap: balance;
}

/* Fallback for browsers without text-wrap support */
@supports not (text-wrap: balance) {
  .text-balance {
    max-width: 65ch;
  }
}

/* ===== HANGING PUNCTUATION ===== */
.hanging-punctuation {
  hanging-punctuation: first last;
  text-indent: 0.5em;
}

/* ===== ADVANCED TEXT EFFECTS ===== */
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-shadow-soft {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-medium {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.text-shadow-strong {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
               0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-glow {
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5),
               0 0 20px rgba(99, 102, 241, 0.3);
}

/* ===== OPTIMAL READING WIDTH ===== */
.optimal-reading {
  max-width: 65ch;
  margin: 0 auto;
  text-align: left;
}

.optimal-reading-center {
  max-width: 65ch;
  margin: 0 auto;
  text-align: center;
}

/* ===== TEXT CLAMP UTILITIES ===== */
.text-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== TEXT TRUNCATION ===== */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== TEXT SELECTION STYLING ===== */
::selection {
  background: var(--brand-primary);
  color: var(--text-inverse);
  text-shadow: none;
}

::-moz-selection {
  background: var(--brand-primary);
  color: var(--text-inverse);
  text-shadow: none;
}

/* ===== ADVANCED TYPOGRAPHY UTILITIES ===== */
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-nowrap {
  white-space: nowrap;
}

.text-break {
  word-wrap: break-word;
  word-break: break-word;
}

/* ===== READING MODE ===== */
.reading-mode {
  max-width: 65ch;
  margin: 0 auto;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
  color: var(--text-primary);
}

.reading-mode p {
  margin-bottom: var(--spacing-lg);
}

.reading-mode h1,
.reading-mode h2,
.reading-mode h3 {
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-lg);
}

/* ===== DARK MODE TYPOGRAPHY ENHANCEMENTS ===== */
[data-bs-theme="dark"] .text-shadow-soft,
[data-bs-theme="dark"] .text-shadow-medium,
[data-bs-theme="dark"] .text-shadow-strong {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] ::selection {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

/* =========================================== */
/* END UNIFIED TYPOGRAPHY SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-spacing.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - SPACING SYSTEM */
/* Single source of truth for all spacing */
/* Based on 8px base unit for visual harmony */
/* =========================================== */

:root {
  /* ===== BASE SPACING UNIT ===== */
  --spacing-unit: 0.5rem; /* 8px - Base unit for all spacing */
  
  /* ===== Z-INDEX SCALE ===== */
  /* Prevent z-index conflicts with clear layering hierarchy */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-overlay: 1090;
  --z-max: 9999;
  
  /* ===== BORDER RADIUS SYSTEM ===== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Component-specific border radius */
  --radius-button: var(--radius-lg);
  --radius-button-sm: var(--radius-md);
  --radius-button-lg: var(--radius-xl);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-full);
  --radius-modal: var(--radius-xl);
  --radius-dropdown: var(--radius-md);
  
  /* ===== SPACING SCALE (8px base increments) ===== */
  --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
  --spacing-sm: var(--spacing-unit);                 /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 2);      /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);      /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);       /* 32px */
  --spacing-2xl: calc(var(--spacing-unit) * 6);      /* 48px */
  --spacing-3xl: calc(var(--spacing-unit) * 8);      /* 64px */
  --spacing-4xl: calc(var(--spacing-unit) * 12);    /* 96px */
  --spacing-5xl: calc(var(--spacing-unit) * 16);    /* 128px */
  
  /* ===== SECTION SPACING ===== */
  /* Responsive section padding - optimized for content density */
  --section-padding-y-mobile: var(--spacing-lg);     /* 24px */
  --section-padding-y-tablet: var(--spacing-xl);    /* 32px */
  --section-padding-y-desktop: var(--spacing-2xl);  /* 48px */
  
  --section-padding-x-mobile: var(--spacing-md);     /* 16px */
  --section-padding-x-tablet: var(--spacing-lg);    /* 24px */
  --section-padding-x-desktop: var(--spacing-xl);   /* 32px */
  
  /* Section margin between sections */
  --section-margin-bottom: var(--spacing-lg);       /* 24px */
  
  /* ===== CONTAINER SPACING ===== */
  --container-max-width: 1280px;
  --container-padding-x-mobile: var(--spacing-md);  /* 16px */
  --container-padding-x-tablet: var(--spacing-lg);   /* 24px */
  --container-padding-x-desktop: var(--spacing-xl);  /* 32px */
  
  /* ===== COMPONENT SPACING ===== */
  /* Gaps between components */
  --component-gap-xs: var(--spacing-sm);             /* 8px */
  --component-gap-sm: var(--spacing-md);             /* 16px */
  --component-gap-md: var(--spacing-lg);             /* 24px */
  --component-gap-lg: var(--spacing-xl);             /* 32px */
  --component-gap-xl: var(--spacing-2xl);            /* 48px */
  
  /* ===== CARD SPACING ===== */
  --card-padding-xs: var(--spacing-sm);              /* 8px */
  --card-padding-sm: var(--spacing-md);              /* 16px */
  --card-padding-md: var(--spacing-lg);              /* 24px */
  --card-padding-lg: var(--spacing-xl);              /* 32px */
  --card-gap: var(--spacing-lg);                     /* 24px */
  --card-border-radius: 12px;
  
  /* ===== BUTTON SPACING ===== */
  --button-padding-x-sm: var(--spacing-md);          /* 16px */
  --button-padding-x-md: var(--spacing-lg);          /* 24px */
  --button-padding-x-lg: var(--spacing-xl);          /* 32px */
  
  --button-padding-y-sm: calc(var(--spacing-unit) * 1.5);  /* 12px */
  --button-padding-y-md: calc(var(--spacing-unit) * 2);     /* 16px */
  --button-padding-y-lg: calc(var(--spacing-unit) * 2.5);   /* 20px */
  
  --button-gap: var(--spacing-md);                    /* 16px */
  --button-min-height: 44px;                         /* WCAG AA touch target */
  
  /* ===== TEXT SPACING ===== */
  --text-spacing-tight: var(--spacing-sm);            /* 8px */
  --text-spacing-normal: var(--spacing-md);           /* 16px */
  --text-spacing-relaxed: var(--spacing-lg);          /* 24px */
  
  /* Paragraph spacing */
  --paragraph-margin-bottom: var(--spacing-md);     /* 16px */
  
  /* Heading spacing */
  --heading-margin-top: var(--spacing-lg);            /* 24px */
  --heading-margin-bottom: var(--spacing-md);         /* 16px */
  
  /* ===== GRID SPACING ===== */
  --grid-gap-xs: var(--spacing-sm);                  /* 8px */
  --grid-gap-sm: var(--spacing-md);                  /* 16px */
  --grid-gap-md: var(--spacing-lg);                  /* 24px */
  --grid-gap-lg: var(--spacing-xl);                  /* 32px */
  
  /* ===== FORM SPACING ===== */
  --form-field-gap: var(--spacing-md);               /* 16px */
  --form-label-margin-bottom: var(--spacing-sm);      /* 8px */
  --form-input-padding-x: var(--spacing-md);         /* 16px */
  --form-input-padding-y: calc(var(--spacing-unit) * 1.5); /* 12px */
}

/* ===== SECTION SPACING UTILITY ===== */
.section {
  padding-top: var(--section-padding-y-mobile);
  padding-bottom: var(--section-padding-y-mobile);
  padding-left: var(--section-padding-x-mobile);
  padding-right: var(--section-padding-x-mobile);
  margin-bottom: var(--section-margin-bottom);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--section-padding-y-tablet);
    padding-bottom: var(--section-padding-y-tablet);
    padding-left: var(--section-padding-x-tablet);
    padding-right: var(--section-padding-x-tablet);
  }
}

@media (min-width: 992px) {
  .section {
    padding-top: var(--section-padding-y-desktop);
    padding-bottom: var(--section-padding-y-desktop);
    padding-left: var(--section-padding-x-desktop);
    padding-right: var(--section-padding-x-desktop);
  }
}

/* ===== CONTAINER SPACING UTILITY ===== */
.container,
.container-fluid {
  padding-left: var(--container-padding-x-mobile);
  padding-right: var(--container-padding-x-mobile);
}

@media (min-width: 768px) {
  .container,
  .container-fluid {
    padding-left: var(--container-padding-x-tablet);
    padding-right: var(--container-padding-x-tablet);
  }
}

@media (min-width: 992px) {
  .container,
  .container-fluid {
    padding-left: var(--container-padding-x-desktop);
    padding-right: var(--container-padding-x-desktop);
  }
  
  .container {
    max-width: var(--container-max-width);
  }
}

/* ===== TEXT SPACING UTILITIES ===== */
/* Paragraph spacing */
p {
  margin-bottom: var(--paragraph-margin-bottom);
}

p:last-child {
  margin-bottom: 0;
}

/* Heading spacing */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: var(--heading-margin-top);
  margin-bottom: var(--heading-margin-bottom);
}

h1:first-child, .h1:first-child,
h2:first-child, .h2:first-child,
h3:first-child, .h3:first-child {
  margin-top: 0;
}

/* ===== SPACING UTILITY CLASSES ===== */
/* Margin utilities */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-3xl { margin: var(--spacing-3xl); }
.m-4xl { margin: var(--spacing-4xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }

.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

/* Padding utilities */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }
.p-4xl { padding: var(--spacing-4xl); }

.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pt-2xl { padding-top: var(--spacing-2xl); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pb-2xl { padding-bottom: var(--spacing-2xl); }

.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* Gap utilities */
.gap-xs { gap: var(--component-gap-xs); }
.gap-sm { gap: var(--component-gap-sm); }
.gap-md { gap: var(--component-gap-md); }
.gap-lg { gap: var(--component-gap-lg); }
.gap-xl { gap: var(--component-gap-xl); }

/* ===== Z-INDEX UTILITY CLASSES ===== */
.z-base { z-index: var(--z-base); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-popover { z-index: var(--z-popover); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-toast { z-index: var(--z-toast); }
.z-overlay { z-index: var(--z-overlay); }
.z-max { z-index: var(--z-max); }

/* ===== BORDER RADIUS UTILITY CLASSES ===== */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { 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; }

/* =========================================== */
/* END UNIFIED SPACING SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-breakpoints.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - BREAKPOINT SYSTEM */
/* Single source of truth for all responsive breakpoints */
/* Mobile-first approach, consistent across all pages */
/* =========================================== */

:root {
  /* ===== STANDARD BREAKPOINTS ===== */
  /* Based on Bootstrap 5 standard breakpoints */
  --breakpoint-xs: 0px;        /* Extra small devices (phones) */
  --breakpoint-sm: 576px;      /* Small devices (landscape phones) */
  --breakpoint-md: 768px;      /* Medium devices (tablets) */
  --breakpoint-lg: 992px;      /* Large devices (desktops) */
  --breakpoint-xl: 1200px;    /* Extra large devices (large desktops) */
  --breakpoint-2xl: 1400px;    /* XXL devices (extra large desktops) */
  
  /* ===== CONTAINER MAX-WIDTHS ===== */
  --container-xs: 100%;
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
  --container-fluid: 1400px;
  
  /* ===== RESPONSIVE SPACING ===== */
  /* These reference spacing system variables */
  --section-padding-mobile: var(--spacing-lg);     /* 24px */
  --section-padding-tablet: var(--spacing-xl);     /* 32px */
  --section-padding-desktop: var(--spacing-2xl);   /* 48px */
  
  --container-padding-mobile: var(--spacing-md);   /* 16px */
  --container-padding-tablet: var(--spacing-lg);   /* 24px */
  --container-padding-desktop: var(--spacing-xl);   /* 32px */
  
  /* ===== DEVICE DETECTION ===== */
  /* These will be set via media queries */
  --is-mobile: 0;
  --is-tablet: 0;
  --is-desktop: 0;
  --is-touch: 0;
  --is-hover: 0;
}

/* ===== MOBILE STYLES (< 576px) ===== */
/* Extra small devices - phones in portrait */
@media (max-width: 575.98px) {
  :root {
    --is-mobile: 1;
    --section-padding: var(--section-padding-mobile);
    --container-padding: var(--container-padding-mobile);
  }
  
  .container,
  .container-fluid {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
  
  /* Mobile-specific optimizations */
  html {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Ensure touch targets are large enough */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== SMALL DEVICES (576px - 767px) ===== */
/* Small devices - phones in landscape, small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --is-mobile: 1;
    --section-padding: var(--section-padding-mobile);
    --container-padding: var(--container-padding-mobile);
  }
  
  .container {
    max-width: var(--container-sm);
  }
  
  .container-fluid {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
/* Medium devices - tablets in portrait */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --is-tablet: 1;
    --section-padding: var(--section-padding-tablet);
    --container-padding: var(--container-padding-tablet);
  }
  
  .container {
    max-width: var(--container-md);
  }
  
  .container-fluid {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
  
  /* Tablet-specific optimizations */
  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }
}

/* ===== DESKTOP STYLES (992px - 1199px) ===== */
/* Large devices - tablets in landscape, small desktops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --is-desktop: 1;
    --section-padding: var(--section-padding-desktop);
    --container-padding: var(--container-padding-desktop);
  }
  
  .container {
    max-width: var(--container-lg);
  }
  
  .container-fluid {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
  
  .section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }
}

/* ===== LARGE DESKTOP (1200px - 1399px) ===== */
/* Extra large devices - large desktops */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root {
    --is-desktop: 1;
    --section-padding: var(--section-padding-desktop);
    --container-padding: var(--container-padding-desktop);
  }
  
  .container {
    max-width: var(--container-xl);
  }
  
  .container-fluid {
    max-width: var(--container-fluid);
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/* ===== EXTRA LARGE DESKTOP (1400px+) ===== */
/* XXL devices - extra large desktops */
@media (min-width: 1400px) {
  :root {
    --is-desktop: 1;
    --section-padding: var(--section-padding-desktop);
    --container-padding: var(--container-padding-desktop);
  }
  
  .container {
    max-width: var(--container-2xl);
  }
  
  .container-fluid {
    max-width: var(--container-fluid);
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/* ===== TOUCH DEVICE DETECTION ===== */
/* Devices with touch capability */
@media (pointer: coarse) {
  :root {
    --is-touch: 1;
  }
  
  /* Ensure all interactive elements meet touch target requirements */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  input[type="checkbox"],
  input[type="radio"],
  .navbar-toggle,
  .navbar-link,
  .footer-link,
  .social-btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better spacing for touch */
  .btn-group .btn {
    margin: 0;
  }
  
  /* Larger tap targets for mobile navigation */
  .navbar-link,
  .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ===== HOVER CAPABILITY DETECTION ===== */
/* Devices that support hover (non-touch) */
@media (hover: hover) and (pointer: fine) {
  :root {
    --is-hover: 1;
  }
  
  /* Enable hover effects only on devices that support it */
  .btn:hover,
  a:hover,
  .card:hover {
    transition: var(--button-transition);
  }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (orientation: landscape) and (max-height: 500px) {
  /* Optimize for landscape mobile devices */
  .section {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
  }
  
  /* Reduce vertical spacing in landscape */
  h1, .h1, h2, .h2, h3, .h3 {
    margin-bottom: var(--spacing-sm);
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  :root {
    --section-padding: 0;
    --container-padding: 0;
  }
  
  .container,
  .container-fluid {
    max-width: 100%;
    padding: 0;
  }
  
  /* Hide non-essential elements */
  .navbar,
  .footer,
  .btn,
  button,
  .no-print {
    display: none !important;
  }
  
  /* Optimize typography for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: #000;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ===== REDUCED MOTION ===== */
@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;
  }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  :root {
    --brand-primary: #0000ff;
    --text-primary: #000000;
    --bg-primary: #ffffff;
  }
  
  .btn,
  button,
  a.btn {
    border: 2px solid currentColor;
  }
  
  .form-control,
  input,
  textarea,
  select {
    border-width: 2px;
  }
}

/* ===== DARK MODE PREFERENCE ===== */
@media (prefers-color-scheme: dark) {
  /* This is handled by [data-bs-theme="dark"] */
  /* But we can add system preference support here if needed */
}

/* ===== UTILITY CLASSES FOR BREAKPOINTS ===== */
/* Show/hide at specific breakpoints */
.show-mobile {
  display: block;
}

.show-tablet,
.show-desktop {
  display: none;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
  
  .show-tablet {
    display: block;
  }
}

@media (min-width: 992px) {
  .show-tablet {
    display: none;
  }
  
  .show-desktop {
    display: block;
  }
}

/* Hide at specific breakpoints */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

.hide-tablet {
  display: block;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hide-tablet {
    display: none;
  }
}

.hide-desktop {
  display: block;
}

@media (min-width: 992px) {
  .hide-desktop {
    display: none;
  }
}

/* ===== RESPONSIVE TEXT ALIGNMENT ===== */
@media (max-width: 767.98px) {
  .text-mobile-center {
    text-align: center !important;
  }
  
  .text-mobile-left {
    text-align: left !important;
  }
  
  .text-mobile-right {
    text-align: right !important;
  }
}

/* ===== RESPONSIVE FLEX DIRECTION ===== */
@media (max-width: 767.98px) {
  .flex-mobile-column {
    flex-direction: column !important;
  }
  
  .flex-mobile-row {
    flex-direction: row !important;
  }
}

/* ===== RESPONSIVE SPACING UTILITIES ===== */
/* Mobile-specific spacing */
@media (max-width: 767.98px) {
  .mb-mobile-0 { margin-bottom: 0 !important; }
  .mb-mobile-sm { margin-bottom: var(--spacing-sm) !important; }
  .mb-mobile-md { margin-bottom: var(--spacing-md) !important; }
  .mb-mobile-lg { margin-bottom: var(--spacing-lg) !important; }
  
  .mt-mobile-0 { margin-top: 0 !important; }
  .mt-mobile-sm { margin-top: var(--spacing-sm) !important; }
  .mt-mobile-md { margin-top: var(--spacing-md) !important; }
  .mt-mobile-lg { margin-top: var(--spacing-lg) !important; }
  
  .p-mobile-0 { padding: 0 !important; }
  .p-mobile-sm { padding: var(--spacing-sm) !important; }
  .p-mobile-md { padding: var(--spacing-md) !important; }
  .p-mobile-lg { padding: var(--spacing-lg) !important; }
}

/* =========================================== */
/* END UNIFIED BREAKPOINT SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-animations.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - ANIMATION SYSTEM */
/* Single source of truth for all animations */
/* Consistent timing, easing, and transitions */
/* =========================================== */

:root {
  /* ===== TIMING FUNCTIONS (Easing Curves) ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);        /* Standard ease */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);         /* Decelerate */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);         /* Accelerate */
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);            /* Sharp */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);       /* Smooth */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce */
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);  /* Elastic */
  
  /* ===== DURATIONS ===== */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-slowest: 1200ms;
  
  /* ===== DELAYS ===== */
  --delay-none: 0ms;
  --delay-fast: 50ms;
  --delay-normal: 100ms;
  --delay-slow: 200ms;
  
  /* ===== TRANSITION PROPERTIES ===== */
  --transition-fast: all var(--duration-fast) var(--ease-standard);
  --transition-normal: all var(--duration-normal) var(--ease-standard);
  --transition-slow: all var(--duration-slow) var(--ease-standard);
  
  --transition-color: color var(--duration-normal) var(--ease-standard);
  --transition-bg: background-color var(--duration-normal) var(--ease-standard);
  --transition-transform: transform var(--duration-normal) var(--ease-standard);
  --transition-opacity: opacity var(--duration-normal) var(--ease-standard);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-standard);
  --transition-border: border-color var(--duration-normal) var(--ease-standard);
  
  /* ===== COMMON ANIMATIONS ===== */
  --animation-fade-in: fadeIn var(--duration-normal) var(--ease-standard);
  --animation-fade-out: fadeOut var(--duration-fast) var(--ease-standard);
  --animation-slide-up: slideUp var(--duration-normal) var(--ease-standard);
  --animation-slide-down: slideDown var(--duration-normal) var(--ease-standard);
  --animation-slide-left: slideLeft var(--duration-normal) var(--ease-standard);
  --animation-slide-right: slideRight var(--duration-normal) var(--ease-standard);
  --animation-scale: scale var(--duration-fast) var(--ease-standard);
  --animation-scale-up: scaleUp var(--duration-normal) var(--ease-standard);
  --animation-scale-down: scaleDown var(--duration-fast) var(--ease-standard);
  --animation-rotate: rotate var(--duration-normal) var(--ease-standard);
  --animation-spin: spin var(--duration-slower) linear infinite;
  --animation-pulse: pulse var(--duration-slower) var(--ease-standard) infinite;
  --animation-bounce: bounce var(--duration-slow) var(--ease-bounce) infinite;
  --animation-shake: shake var(--duration-normal) var(--ease-standard);
}

/* ===== KEYFRAME ANIMATIONS ===== */

/* Fade Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Slide Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Animations */
@keyframes scale {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes scaleDown {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

/* Rotate Animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Shake Animation */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* ===== ANIMATION UTILITY CLASSES ===== */

/* Fade */
.animate-fade-in {
  animation: var(--animation-fade-in);
}

.animate-fade-out {
  animation: var(--animation-fade-out);
}

/* Slide */
.animate-slide-up {
  animation: var(--animation-slide-up);
}

.animate-slide-down {
  animation: var(--animation-slide-down);
}

.animate-slide-left {
  animation: var(--animation-slide-left);
}

.animate-slide-right {
  animation: var(--animation-slide-right);
}

/* Scale */
.animate-scale {
  animation: var(--animation-scale);
}

.animate-scale-up {
  animation: var(--animation-scale-up);
}

.animate-scale-down {
  animation: var(--animation-scale-down);
}

/* Rotate */
.animate-rotate {
  animation: var(--animation-rotate);
}

.animate-spin {
  animation: var(--animation-spin);
}

/* Pulse */
.animate-pulse {
  animation: var(--animation-pulse);
}

/* Bounce */
.animate-bounce {
  animation: var(--animation-bounce);
}

/* Shake */
.animate-shake {
  animation: var(--animation-shake);
}

/* ===== TRANSITION UTILITY CLASSES ===== */

.transition-none {
  transition: none !important;
}

.transition-fast {
  transition: var(--transition-fast);
}

.transition-normal {
  transition: var(--transition-normal);
}

.transition-slow {
  transition: {
  transition: var(--transition-slow);
}

.transition-color {
  transition: var(--transition-color);
}

.transition-bg {
  transition: var(--transition-bg);
}

.transition-transform {
  transition: var(--transition-transform);
}

.transition-opacity {
  transition: var(--transition-opacity);
}

.transition-shadow {
  transition: var(--transition-shadow);
}

.transition-border {
  transition: var(--transition-border);
}

/* ===== EASING UTILITY CLASSES ===== */

.ease-standard {
  transition-timing-function: var(--ease-standard);
}

.ease-decelerate {
  transition-timing-function: var(--ease-decelerate);
}

.ease-accelerate {
  transition-timing-function: var(--ease-accelerate);
}

.ease-smooth {
  transition-timing-function: var(--ease-smooth);
}

.ease-bounce {
  transition-timing-function: var(--ease-bounce);
}

/* ===== DURATION UTILITY CLASSES ===== */

.duration-fast {
  transition-duration: var(--duration-fast);
  animation-duration: var(--duration-fast);
}

.duration-normal {
  transition-duration: var(--duration-normal);
  animation-duration: var(--duration-normal);
}

.duration-slow {
  transition-duration: var(--duration-slow);
  animation-duration: var(--duration-slow);
}

.duration-slower {
  transition-duration: var(--duration-slower);
  animation-duration: var(--duration-slower);
}

/* ===== DELAY UTILITY CLASSES ===== */

.delay-none {
  transition-delay: var(--delay-none);
  animation-delay: var(--delay-none);
}

.delay-fast {
  transition-delay: var(--delay-fast);
  animation-delay: var(--delay-fast);
}

.delay-normal {
  transition-delay: var(--delay-normal);
  animation-delay: var(--delay-normal);
}

.delay-slow {
  transition-delay: var(--delay-slow);
  animation-delay: var(--delay-slow);
}

/* ===== 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 {
    animation: none !important;
  }
  
  .animate-pulse {
    animation: none !important;
  }
  
  .animate-bounce {
    animation: none !important;
  }
}

/* =========================================== */
/* END UNIFIED ANIMATION SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-elevation.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - ELEVATION SYSTEM */
/* Single source of truth for shadows & depth */
/* Consistent visual hierarchy */
/* =========================================== */

:root {
  /* ===== ELEVATION LEVELS (Material Design inspired) ===== */
  --elevation-0: none;
  
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 
                 0 1px 2px rgba(0, 0, 0, 0.24);
  
  --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.16), 
                 0 3px 6px rgba(0, 0, 0, 0.23);
  
  --elevation-3: 0 10px 20px rgba(0, 0, 0, 0.19), 
                 0 6px 6px rgba(0, 0, 0, 0.23);
  
  --elevation-4: 0 14px 28px rgba(0, 0, 0, 0.25), 
                 0 10px 10px rgba(0, 0, 0, 0.22);
  
  --elevation-5: 0 19px 38px rgba(0, 0, 0, 0.30), 
                 0 15px 12px rgba(0, 0, 0, 0.22);
  
  /* ===== BRAND-COLORED SHADOWS ===== */
  --elevation-brand-1: 0 2px 4px rgba(99, 102, 241, 0.2);
  --elevation-brand-2: 0 4px 12px rgba(99, 102, 241, 0.3), 
                       0 2px 4px rgba(99, 102, 241, 0.2);
  --elevation-brand-3: 0 12px 28px rgba(99, 102, 241, 0.4), 
                       0 4px 8px rgba(99, 102, 241, 0.3);
  --elevation-brand-4: 0 16px 32px rgba(99, 102, 241, 0.5), 
                       0 8px 16px rgba(99, 102, 241, 0.4);
  
  /* ===== SUCCESS SHADOWS ===== */
  --elevation-success-1: 0 2px 4px rgba(16, 185, 129, 0.2);
  --elevation-success-2: 0 4px 12px rgba(16, 185, 129, 0.3);
  
  /* ===== ERROR SHADOWS ===== */
  --elevation-error-1: 0 2px 4px rgba(239, 68, 68, 0.2);
  --elevation-error-2: 0 4px 12px rgba(239, 68, 68, 0.3);
  
  /* ===== WARNING SHADOWS ===== */
  --elevation-warning-1: 0 2px 4px rgba(245, 158, 11, 0.2);
  --elevation-warning-2: 0 4px 12px rgba(245, 158, 11, 0.3);
  
  /* ===== INNER SHADOWS ===== */
  --elevation-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  --elevation-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.15);
  
  /* ===== GLOW EFFECTS ===== */
  --glow-sm: 0 0 8px rgba(99, 102, 241, 0.3);
  --glow-md: 0 0 16px rgba(99, 102, 241, 0.4);
  --glow-lg: 0 0 24px rgba(99, 102, 241, 0.5);
  --glow-xl: 0 0 32px rgba(99, 102, 241, 0.6);
  
  /* ===== SEMANTIC ELEVATION ===== */
  /* Named by purpose for clarity */
  --shadow-card: var(--elevation-1);
  --shadow-card-hover: var(--elevation-3);
  --shadow-button: var(--elevation-1);
  --shadow-button-hover: var(--elevation-2);
  --shadow-button-active: var(--elevation-0);
  --shadow-modal: var(--elevation-5);
  --shadow-dropdown: var(--elevation-3);
  --shadow-tooltip: var(--elevation-2);
  --shadow-toast: var(--elevation-4);
}

/* ===== ELEVATION UTILITY CLASSES ===== */

.shadow-none {
  box-shadow: var(--elevation-0) !important;
}

.shadow-1 {
  box-shadow: var(--elevation-1) !important;
}

.shadow-2 {
  box-shadow: var(--elevation-2) !important;
}

.shadow-3 {
  box-shadow: var(--elevation-3) !important;
}

.shadow-4 {
  box-shadow: var(--elevation-4) !important;
}

.shadow-5 {
  box-shadow: var(--elevation-5) !important;
}

/* Brand-colored shadows */
.shadow-brand-1 {
  box-shadow: var(--elevation-brand-1) !important;
}

.shadow-brand-2 {
  box-shadow: var(--elevation-brand-2) !important;
}

.shadow-brand-3 {
  box-shadow: var(--elevation-brand-3) !important;
}

.shadow-brand-4 {
  box-shadow: var(--elevation-brand-4) !important;
}

/* Success shadows */
.shadow-success-1 {
  box-shadow: var(--elevation-success-1) !important;
}

.shadow-success-2 {
  box-shadow: var(--elevation-success-2) !important;
}

/* Error shadows */
.shadow-error-1 {
  box-shadow: var(--elevation-error-1) !important;
}

.shadow-error-2 {
  box-shadow: var(--elevation-error-2) !important;
}

/* Warning shadows */
.shadow-warning-1 {
  box-shadow: var(--elevation-warning-1) !important;
}

.shadow-warning-2 {
  box-shadow: var(--elevation-warning-2) !important;
}

/* Inner shadows */
.shadow-inner {
  box-shadow: var(--elevation-inner) !important;
}

.shadow-inner-lg {
  box-shadow: var(--elevation-inner-lg) !important;
}

/* Glow effects */
.glow-sm {
  box-shadow: var(--glow-sm) !important;
}

.glow-md {
  box-shadow: var(--glow-md) !important;
}

.glow-lg {
  box-shadow: var(--glow-lg) !important;
}

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

/* Semantic shadows */
.shadow-card {
  box-shadow: var(--shadow-card) !important;
}

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

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

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

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

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

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

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

/* ===== HOVER ELEVATION TRANSITIONS ===== */

.elevate-on-hover {
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.elevate-on-hover:hover {
  box-shadow: var(--elevation-3);
}

.elevate-on-hover-1:hover {
  box-shadow: var(--elevation-1);
}

.elevate-on-hover-2:hover {
  box-shadow: var(--elevation-2);
}

.elevate-on-hover-3:hover {
  box-shadow: var(--elevation-3);
}

.elevate-on-hover-4:hover {
  box-shadow: var(--elevation-4);
}

.elevate-on-hover-5:hover {
  box-shadow: var(--elevation-5);
}

/* ===== DARK MODE ELEVATION ADJUSTMENTS ===== */
[data-bs-theme="dark"] {
  /* Lighter shadows for dark mode */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3), 
                 0 1px 2px rgba(0, 0, 0, 0.4);
  
  --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.4), 
                 0 3px 6px rgba(0, 0, 0, 0.5);
  
  --elevation-3: 0 10px 20px rgba(0, 0, 0, 0.5), 
                 0 6px 6px rgba(0, 0, 0, 0.6);
  
  --elevation-4: 0 14px 28px rgba(0, 0, 0, 0.6), 
                 0 10px 10px rgba(0, 0, 0, 0.7);
  
  --elevation-5: 0 19px 38px rgba(0, 0, 0, 0.7), 
                 0 15px 12px rgba(0, 0, 0, 0.8);
  
  /* Enhanced glow for dark mode */
  --glow-sm: 0 0 8px rgba(99, 102, 241, 0.5);
  --glow-md: 0 0 16px rgba(99, 102, 241, 0.6);
  --glow-lg: 0 0 24px rgba(99, 102, 241, 0.7);
  --glow-xl: 0 0 32px rgba(99, 102, 241, 0.8);
}

/* =========================================== */
/* END UNIFIED ELEVATION SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-accessibility-aaa.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - WCAG AAA ACCESSIBILITY */
/* Award-winning accessibility beyond WCAG AA */
/* Industry-leading inclusive design */
/* =========================================== */

:root {
  /* ===== ENHANCED CONTRAST RATIOS (WCAG AAA) ===== */
  /* AAA requires 7:1 for normal text, 4.5:1 for large text */
  --text-primary-aaa: #000000;        /* 21:1 contrast on white */
  --text-secondary-aaa: #1a1a1a;      /* 16:1 contrast on white */
  --text-muted-aaa: #4a4a4a;          /* 7:1 contrast on white */
  
  --bg-primary-aaa: #ffffff;
  --bg-secondary-aaa: #f5f5f5;
  
  /* Dark mode AAA */
  --text-primary-dark-aaa: #ffffff;    /* 21:1 contrast on black */
  --text-secondary-dark-aaa: #e5e5e5;  /* 16:1 contrast on black */
  --bg-primary-dark-aaa: #000000;
  
  /* ===== ENHANCED FOCUS INDICATORS (AAA) ===== */
  --focus-outline-width: 4px;          /* Thicker for visibility */
  --focus-outline-color: #0000ff;      /* High contrast blue */
  --focus-outline-offset: 4px;
  --focus-shadow: 0 0 0 8px rgba(0, 0, 255, 0.3);
  
  /* ===== TOUCH TARGETS (AAA) ===== */
  /* AAA recommends 48px minimum (AA's AA's 44px) */
  --touch-target-min-aaa: 48px;
  --touch-target-spacing: 8px;         /* Space between targets */
  
  /* ===== TEXT SPACING (AAA) ===== */
  --line-height-min-aaa: 1.75;         /* Minimum for readability */
  --paragraph-spacing-min-aaa: 2em;    /* Double spacing */
  --word-spacing-min-aaa: 0.16em;
  --letter-spacing-min-aaa: 0.12em;
  
  /* ===== ENHANCED COLOR CONTRAST ===== */
  --brand-primary-aaa: #0000ff;        /* High contrast blue */
  --brand-primary-dark-aaa: #4a9eff;   /* Lighter for dark mode */
  
  /* ===== SKIP LINKS ===== */
  --skip-link-bg: #000000;
  --skip-link-text: #ffffff;
  --skip-link-z-index: 10000;
}

/* ===== ENHANCED FOCUS STATES (AAA) ===== */
*:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  box-shadow: var(--focus-shadow) !important;
}

/* Remove default browser focus */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  box-shadow: var(--focus-shadow) !important;
  position: relative;
  z-index: 1;
}

/* ===== SKIP NAVIGATION LINKS (AAA Requirement) ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--skip-link-bg);
  color: var(--skip-link-text);
  padding: var(--spacing-md) var(--spacing-lg);
  z-index: var(--skip-link-z-index);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: 0;
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 0;
}

/* Skip to main content */
.skip-to-main {
  top: -100px;
}

.skip-to-main:focus {
  top: 0;
}

/* Skip to navigation */
.skip-to-nav {
  top: -100px;
}

.skip-to-nav:focus {
  top: 0;
}

/* ===== ENHANCED TOUCH TARGETS (AAA) ===== */
/* All interactive elements meet AAA standards */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.nav-link,
.footer-link,
.social-btn,
.icon-button {
  min-height: var(--touch-target-min-aaa);
  min-width: var(--touch-target-min-aaa);
}

/* Ensure spacing between touch targets */
.touch-target-group > * + * {
  margin-left: var(--touch-target-spacing);
}

/* ===== ENHANCED TEXT SPACING (AAA) ===== */
/* Allow users to override spacing */
.text-spacing-aaa {
  line-height: var(--line-height-min-aaa);
  word-spacing: var(--word-spacing-min-aaa);
  letter-spacing: var(--letter-spacing-min-aaa);
}

.text-spacing-aaa p {
  margin-bottom: var(--paragraph-spacing-min-aaa);
}

/* ===== ENHANCED COLOR CONTRAST MODE ===== */
[data-contrast="high"] {
  --text-primary: var(--text-primary-aaa);
  --text-secondary: var(--text-secondary-aaa);
  --text-muted: var(--text-muted-aaa);
  --bg-primary: var(--bg-primary-aaa);
  --bg-secondary: var(--bg-secondary-aaa);
  --brand-primary: var(--brand-primary-aaa);
}

[data-contrast="high"] * {
  text-shadow: none !important;
  box-shadow: none !important;
}

[data-contrast="high"] .btn,
[data-contrast="high"] button {
  border: 2px solid currentColor;
}

/* ===== KEYBOARD NAVIGATION ENHANCEMENTS ===== */
/* Visual indicator for keyboard navigation */
.keyboard-nav-active *:focus-visible {
  outline-width: 5px;
  outline-color: #ff0000; /* Red for maximum visibility */
  box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.3);
}

/* Focus trap for modals */
.modal:focus-within {
  outline: none;
}

.modal:focus-within *:focus-visible {
  outline-color: var(--focus-outline-color);
}

/* ===== SCREEN READER OPTIMIZATIONS ===== */
.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;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== ARIA LIVE REGIONS ===== */
[aria-live="polite"],
[aria-live="assertive"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== ENHANCED FORM LABELS ===== */
.form-label-required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
  margin-left: var(--spacing-xs);
}

/* ===== ERROR ANNOUNCEMENTS ===== */
.error-announcement {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.error-announcement[aria-live="assertive"] {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

/* ===== LANDMARK REGIONS ===== */
/* Ensure all landmarks are properly identified */
main[role="main"],
nav[role="navigation"],
header[role="banner"],
footer[role="contentinfo"],
aside[role="complementary"],
section[role="region"] {
  /* Properly identified landmarks */
}

/* ===== HEADING HIERARCHY ENFORCEMENT ===== */
/* Ensure proper heading order */
.heading-skip-warning {
  border: 2px solid var(--color-warning);
  padding: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  background: var(--alert-warning-bg);
}

/* ===== ENHANCED LINK INDICATORS ===== */
a[href^="http"]:not([href*="jfsn.com"]):not([href*="localhost"])::after {
  content: ' (external)';
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

a[href^="mailto:"]::before {
  content: '📧 ';
}

a[href^="tel:"]::before {
  content: '📞 ';
}

/* ===== DARK MODE AAA ADJUSTMENTS ===== */
[data-bs-theme="dark"][data-contrast="high"] {
  --text-primary: var(--text-primary-dark-aaa);
  --text-secondary: var(--text-secondary-dark-aaa);
  --bg-primary: var(--bg-primary-dark-aaa);
  --brand-primary: var(--brand-primary-dark-aaa);
}

/* ===== REDUCED MOTION ENHANCEMENTS ===== */
@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;
  }
  
  /* Keep focus indicators visible */
  *:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color) !important;
    outline-offset: var(--focus-outline-offset) !important;
    box-shadow: var(--focus-shadow) !important;
  }
}

/* ===== HIGH CONTRAST MODE ENHANCEMENTS ===== */
@media (prefers-contrast: high) {
  :root {
    --text-primary: var(--text-primary-aaa);
    --text-secondary: var(--text-secondary-aaa);
    --bg-primary: var(--bg-primary-aaa);
    --brand-primary: var(--brand-primary-aaa);
    --border-width: 2px;
  }
  
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  
  .btn,
  button {
    border: 2px solid currentColor !important;
  }
  
  img {
    border: 2px solid var(--text-primary) !important;
  }
}

/* ===== ACCESSIBILITY UTILITY CLASSES ===== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.focus-visible-only:not(:focus-visible) {
  outline: none !important;
}

/* =========================================== */
/* END WCAG AAA ACCESSIBILITY SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-delight.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - DELIGHT SYSTEM */
/* Advanced micro-interactions & delightful UX */
/* Award-winning interaction design */
/* =========================================== */

:root {
  /* ===== MAGNETIC EFFECT ===== */
  --magnetic-strength: 0.1;
  --magnetic-distance: 20px;
  
  /* ===== 3D TILT ===== */
  --tilt-intensity: 5deg;
  --tilt-perspective: 1000px;
  
  /* ===== PARTICLE EFFECTS ===== */
  --particle-count: 5;
  --particle-duration: 2s;
  
  /* ===== LIQUID MORPHING ===== */
  --liquid-speed: 0.6s;
  --liquid-size: 300px;
  
  /* ===== REVEAL ANIMATIONS ===== */
  --reveal-distance: 50px;
  --reveal-duration: 0.8s;
  
  /* ===== STAGGER DELAYS ===== */
  --stagger-delay: 0.1s;
}

/* ===== MAGNETIC CURSOR FOLLOW ===== */
.magnetic {
  transition: transform var(--duration-normal) var(--ease-standard);
  cursor: pointer;
  display: inline-block;
}

.magnetic:hover {
  transform: translate(var(--magnetic-x, 0), var(--magnetic-y, 0)) scale(1.05);
}

/* JavaScript will set --magnetic-x and --magnetic-y */

/* ===== 3D TILT EFFECT ===== */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform var(--duration-normal) var(--ease-standard);
  perspective: var(--tilt-perspective);
}

.tilt-3d:hover {
  transform: perspective(var(--tilt-perspective)) 
             rotateX(calc(var(--tilt-x, 0) * var(--tilt-intensity))) 
             rotateY(calc(var(--tilt-y, 0) * var(--tilt-intensity)));
}

/* ===== LIQUID MORPHING BUTTONS ===== */
.btn-liquid,
button.btn-liquid {
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-standard);
}

.btn-liquid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width var(--liquid-speed) var(--ease-standard),
              height var(--liquid-speed) var(--ease-standard),
              opacity var(--liquid-speed) var(--ease-standard);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.btn-liquid:hover::before {
  width: var(--liquid-size);
  height: var(--liquid-size);
  opacity: 1;
}

.btn-liquid > * {
  position: relative;
  z-index: 1;
}

/* ===== PARTICLE EFFECTS ===== */
.particle-effect {
  position: relative;
  overflow: visible;
}

.particle-effect::after {
  content: '✨';
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: var(--icon-md);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: particleFloat var(--particle-duration) var(--ease-standard) forwards;
}

.particle-effect:active::after {
  animation: particleFloat var(--particle-duration) var(--ease-standard) forwards;
}

@keyframes particleFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-50px) scale(0.5) rotate(360deg);
  }
}

/* Multiple particles */
.particle-effect-multi::before,
.particle-effect-multi::after {
  content: '✨';
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: var(--icon-sm);
  pointer-events: none;
  opacity: 0;
}

.particle-effect-multi:active::before {
  animation: particleFloatLeft var(--particle-duration) var(--ease-standard) forwards;
}

.particle-effect-multi:active::after {
  animation: particleFloatRight var(--particle-duration) var(--ease-standard) forwards;
}

@keyframes particleFloatLeft {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(-20px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(-60px, -40px) scale(0);
  }
}

@keyframes particleFloatRight {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(20px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(60px, -40px) scale(0);
  }
}

/* ===== SMOOTH SCROLL REVEAL ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-standard),
              transform var(--reveal-duration) var(--ease-standard);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-standard),
              transform var(--reveal-duration) var(--ease-standard);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-standard),
              transform var(--reveal-duration) var(--ease-standard);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal scale */
.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--reveal-duration) var(--ease-standard),
              transform var(--reveal-duration) var(--ease-standard);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ===== STAGGERED ANIMATIONS ===== */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerIn var(--duration-normal) var(--ease-standard) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: calc(var(--stagger-delay) * 1); }
.stagger-children > *:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 2); }
.stagger-children > *:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 3); }
.stagger-children > *:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 4); }
.stagger-children > *:nth-child(5) { animation-delay: calc(var(--stagger-delay) * 5); }
.stagger-children > *:nth-child(6) { animation-delay: calc(var(--stagger-delay) * 6); }
.stagger-children > *:nth-child(7) { animation-delay: calc(var(--stagger-delay) * 7); }
.stagger-children > *:nth-child(8) { animation-delay: calc(var(--stagger-delay) * 8); }

@keyframes staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger fade */
.stagger-fade > * {
  opacity: 0;
  animation: staggerFade var(--duration-normal) var(--ease-standard) forwards;
}

.stagger-fade > *:nth-child(1) { animation-delay: calc(var(--stagger-delay) * 1); }
.stagger-fade > *:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 2); }
.stagger-fade > *:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 3); }
.stagger-fade > *:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 4); }
.stagger-fade > *:nth-child(5) { animation-delay: calc(var(--stagger-delay) * 5); }

@keyframes staggerFade {
  to {
    opacity: 1;
  }
}

/* ===== PARALLAX EFFECTS ===== */
.parallax-slow {
  transition: transform 0.3s ease-out;
}

.parallax-medium {
  transition: transform 0.2s ease-out;
}

.parallax-fast {
  transition: transform 0.1s ease-out;
}

/* ===== MORPHING SHAPES ===== */
.morph-shape {
  border-radius: var(--radius-lg);
  transition: border-radius var(--duration-slow) var(--ease-standard);
}

.morph-shape:hover {
  border-radius: var(--radius-full);
}

.morph-shape-square:hover {
  border-radius: var(--radius-none);
}

/* ===== GLOW PULSE ===== */
.glow-pulse {
  animation: glowPulse var(--duration-slower) var(--ease-standard) infinite;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.8);
  }
}

/* ===== CELEBRATION ANIMATION ===== */
.celebrate {
  animation: celebrate var(--duration-slow) var(--ease-bounce);
}

@keyframes celebrate {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
  }
  50% {
    transform: scale(1.2) rotate(5deg);
  }
  75% {
    transform: scale(1.1) rotate(-3deg);
  }
}

/* ===== SMOOTH HOVER LIFT ===== */
.hover-lift-smooth {
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}

.hover-lift-smooth:hover {
  transform: translateY(-8px);
  box-shadow: var(--elevation-4);
}

/* ===== RIPPLE EFFECT ENHANCED ===== */
.ripple-enhanced {
  position: relative;
  overflow: hidden;
}

.ripple-enhanced::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width var(--liquid-speed) ease-out,
              height var(--liquid-speed) ease-out,
              opacity var(--liquid-speed) ease-out;
}

.ripple-enhanced:active::after {
  width: 400px;
  height: 400px;
  opacity: 1;
  transition: width 0.3s ease-out,
              height 0.3s ease-out,
              opacity 0.3s ease-out;
}

/* ===== FLOATING ANIMATION ===== */
.float {
  animation: float var(--duration-slower) var(--ease-standard) infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.float-slow {
  animation-duration: calc(var(--duration-slower) * 1.5);
}

.float-fast {
  animation-duration: calc(var(--duration-slower) * 0.75);
}

/* ===== SHIMMER EFFECT ===== */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmerMove 2s infinite;
}

@keyframes shimmerMove {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  .magnetic,
  .tilt-3d,
  .reveal-on-scroll,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-children > *,
  .stagger-fade > *,
  .parallax-slow,
  .parallax-medium,
  .parallax-fast,
  .glow-pulse,
  .celebrate,
  .float,
  .shimmer::before {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  
  .hover-lift-smooth:hover {
    transform: none;
  }
}

/* =========================================== */
/* END DELIGHT SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-3d.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - 3D DEPTH SYSTEM */
/* Modern 3D elements & depth hierarchy */
/* Award-winning visual design */
/* =========================================== */

:root {
  /* ===== 3D PERSPECTIVE ===== */
  --perspective-near: 1000px;
  --perspective-medium: 1500px;
  --perspective-far: 3000px;
  
  /* ===== DEPTH LAYERS ===== */
  --depth-1: translateZ(10px);
  --depth-2: translateZ(20px);
  --depth-3: translateZ(30px);
  --depth-4: translateZ(40px);
  --depth-5: translateZ(50px);
  --depth-6: translateZ(60px);
  --depth-7: translateZ(70px);
  --depth-8: translateZ(80px);
  
  /* ===== 3D SHADOWS ===== */
  --shadow-3d-light: 0 10px 30px rgba(0, 0, 0, 0.2), 
                     0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-3d-medium: 0 20px 60px rgba(0, 0, 0, 0.3),
                      0 0 0 1px rgba(0, 0, 0, 0.1);
  --shadow-3d-heavy: 0 30px 90px rgba(0, 0, 0, 0.4),
                     0 0 0 1px rgba(0, 0, 0, 0.15);
  
  /* ===== 3D TRANSFORM ORIGINS ===== */
  --transform-origin-center: center center;
  --transform-origin-top: center top;
  --transform-origin-bottom: center bottom;
  --transform-origin-left: left center;
  --transform-origin-right: right center;
}

/* ===== 3D CONTAINER ===== */
.container-3d {
  perspective: var(--perspective-near);
  perspective-origin: center center;
  transform-style: preserve-3d;
}

/* ===== 3D CARD ===== */
.card-3d {
  transform-style: preserve-3d;
  transition: transform var(--duration-normal) var(--ease-standard);
  position: relative;
}

.card-3d:hover {
  transform: rotateY(5deg) rotateX(-5deg) translateZ(20px);
}

/* 3D Card with depth */
.card-3d-depth {
  transform-style: preserve-3d;
}

.card-3d-depth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  transform: translateZ(-10px);
  opacity: 0.5;
  filter: blur(10px);
}

/* ===== FLOATING 3D ELEMENTS ===== */
.float-3d {
  transform-style: preserve-3d;
  animation: float3D var(--duration-slower) var(--ease-standard) infinite;
}

@keyframes float3D {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
  }
  50% {
    transform: translateY(-20px) rotateX(0deg) rotateY(0deg);
  }
  75% {
    transform: translateY(-10px) rotateX(-5deg) rotateY(-5deg);
  }
}

/* ===== DEPTH PARALLAX ===== */
.parallax-depth {
  transform-style: preserve-3d;
  perspective: var(--perspective-near);
}

.parallax-depth > * {
  transition: transform var(--duration-normal) var(--ease-standard);
}

.parallax-depth:hover > *:nth-child(1) {
  transform: translateZ(10px);
}

.parallax-depth:hover > *:nth-child(2) {
  transform: translateZ(20px);
}

.parallax-depth:hover > *:nth-child(3) {
  transform: translateZ(30px);
}

.parallax-depth:hover > *:nth-child(4) {
  transform: translateZ(40px);
}

.parallax-depth:hover > *:nth-child(5) {
  transform: translateZ(50px);
}

/* ===== 3D BUTTON ===== */
.btn-3d {
  transform-style: preserve-3d;
  transition: transform var(--duration-fast) var(--ease-standard);
  position: relative;
}

.btn-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  transform: translateZ(-5px);
  border-radius: inherit;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.btn-3d:hover {
  transform: translateZ(10px);
}

.btn-3d:hover::before {
  transform: translateZ(-10px);
}

.btn-3d:active {
  transform: translateZ(0);
}

.btn-3d:active::before {
  transform: translateZ(-2px);
}

/* ===== 3D TILT ON MOUSE MOVE ===== */
.tilt-3d-interactive {
  transform-style: preserve-3d;
  transition: transform var(--duration-normal) var(--ease-standard);
  perspective: var(--perspective-near);
}

/* JavaScript will set transform based on mouse position */

/* ===== DEPTH LAYERS UTILITY ===== */
.depth-1 {
  transform: var(--depth-1);
}

.depth-2 {
  transform: var(--depth-2);
}

.depth-3 {
  transform: var(--depth-3);
}

.depth-4 {
  transform: var(--depth-4);
}

.depth-5 {
  transform: var(--depth-5);
}

.depth-6 {
  transform: var(--depth-6);
}

.depth-7 {
  transform: var(--depth-7);
}

.depth-8 {
  transform: var(--depth-8);
}

/* ===== 3D SHADOW UTILITIES ===== */
.shadow-3d-light {
  box-shadow: var(--shadow-3d-light);
}

.shadow-3d-medium {
  box-shadow: var(--shadow-3d-medium);
}

.shadow-3d-heavy {
  box-shadow: var(--shadow-3d-heavy);
}

/* ===== 3D ROTATION ===== */
.rotate-3d-x {
  transform-style: preserve-3d;
  animation: rotate3DX var(--duration-slower) linear infinite;
}

@keyframes rotate3DX {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

.rotate-3d-y {
  transform-style: preserve-3d;
  animation: rotate3DY var(--duration-slower) linear infinite;
}

@keyframes rotate3DY {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.rotate-3d-z {
  transform-style: preserve-3d;
  animation: rotate3DZ var(--duration-slower) linear infinite;
}

@keyframes rotate3DZ {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

/* ===== 3D FLIP CARD ===== */
.flip-card-3d {
  perspective: var(--perspective-near);
  transform-style: preserve-3d;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.flip-card-3d.flipped {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ===== 3D STACK EFFECT ===== */
.stack-3d {
  transform-style: preserve-3d;
  position: relative;
}

.stack-3d > * {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}

.stack-3d > *:nth-child(1) {
  transform: translateZ(0);
}

.stack-3d > *:nth-child(2) {
  transform: translateZ(-10px);
  opacity: 0.8;
}

.stack-3d > *:nth-child(3) {
  transform: translateZ(-20px);
  opacity: 0.6;
}

.stack-3d > *:nth-child(4) {
  transform: translateZ(-30px);
  opacity: 0.4;
}

/* ===== 3D GRADIENT BACKGROUND ===== */
.bg-3d-gradient {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(139, 92, 246, 0.1) 50%,
    rgba(168, 85, 247, 0.1) 100%
  );
  transform-style: preserve-3d;
  position: relative;
}

.bg-3d-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.2) 0%,
    transparent 70%
  );
  transform: translateZ(-50px);
  animation: rotate3DZ var(--duration-slowest) linear infinite;
}

/* ===== 3D TEXT EFFECT ===== */
.text-3d {
  transform-style: preserve-3d;
  text-shadow: 
    1px 1px 0 rgba(0, 0, 0, 0.2),
    2px 2px 0 rgba(0, 0, 0, 0.15),
    3px 3px 0 rgba(0, 0, 0, 0.1),
    4px 4px 10px rgba(0, 0, 0, 0.2);
}

.text-3d-strong {
  text-shadow: 
    2px 2px 0 rgba(0, 0, 0, 0.3),
    4px 4px 0 rgba(0, 0, 0, 0.25),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 20px rgba(0, 0, 0, 0.3);
}

/* ===== 3D BORDER ===== */
.border-3d {
  border: 2px solid;
  border-top-color: rgba(255, 255, 255, 0.3);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-left-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  .card-3d,
  .float-3d,
  .parallax-depth > *,
  .rotate-3d-x,
  .rotate-3d-y,
  .rotate-3d-z,
  .flip-card-3d,
  .bg-3d-gradient::before {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  
  .card-3d:hover,
  .btn-3d:hover {
    transform: none;
  }
}

/* =========================================== */
/* END 3D DEPTH SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-glass-neumorphism.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - GLASS & NEUMORPHISM */
/* Advanced glassmorphism & neumorphism hybrid */
/* Award-winning visual aesthetics */
/* =========================================== */

:root {
  /* ===== GLASS MORPHISM ===== */
  --glass-bg-light: rgba(255, 255, 255, 0.1);
  --glass-bg-medium: rgba(255, 255, 255, 0.15);
  --glass-bg-heavy: rgba(255, 255, 255, 0.2);
  
  --glass-border-light: rgba(255, 255, 255, 0.2);
  --glass-border-medium: rgba(255, 255, 255, 0.3);
  --glass-border-heavy: rgba(255, 255, 255, 0.4);
  
  --glass-blur-sm: 10px;
  --glass-blur-md: 20px;
  --glass-blur-lg: 30px;
  --glass-blur-xl: 40px;
  
  /* ===== NEUMORPHISM ===== */
  --neu-light: #ffffff;
  --neu-dark: #d1d5db;
  --neu-bg: #e5e7eb;
  
  --neu-shadow-light: 8px 8px 16px rgba(0, 0, 0, 0.1),
                      -8px -8px 16px rgba(255, 255, 255, 0.9);
  --neu-shadow-dark: 8px 8px 16px rgba(0, 0, 0, 0.2),
                     -8px -8px 16px rgba(255, 255, 255, 0.8);
  --neu-shadow-strong: 12px 12px 24px rgba(0, 0, 0, 0.15),
                       -12px -12px 24px rgba(255, 255, 255, 0.95);
  
  --neu-inset-light: inset 8px 8px 16px rgba(0, 0, 0, 0.1),
                      inset -8px -8px 16px rgba(255, 255, 255, 0.9);
  --neu-inset-dark: inset 8px 8px 16px rgba(0, 0, 0, 0.2),
                    inset -8px -8px 16px rgba(255, 255, 255, 0.8);
  
  /* ===== GLASS TINTS ===== */
  --glass-tint-primary: rgba(99, 102, 241, 0.1);
  --glass-tint-success: rgba(16, 185, 129, 0.1);
  --glass-tint-warning: rgba(245, 158, 11, 0.1);
  --glass-tint-error: rgba(239, 68, 68, 0.1);
}

/* ===== ADVANCED GLASS MORPHISM ===== */
.glass {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border-medium);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Glass Variants */
.glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border-color: var(--glass-border-light);
}

.glass-medium {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border-color: var(--glass-border-medium);
}

.glass-heavy {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border-color: var(--glass-border-heavy);
}

.glass-xl {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(var(--glass-blur-xl));
  -webkit-backdrop-filter: blur(var(--glass-blur-xl));
  border: 2px solid var(--glass-border-heavy);
}

/* ===== GLASS TINTED VARIANTS ===== */
.glass-tint-primary {
  background: var(--glass-tint-primary);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.glass-tint-success {
  background: var(--glass-tint-success);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.glass-tint-warning {
  background: var(--glass-tint-warning);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.glass-tint-error {
  background: var(--glass-tint-error);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ===== NEUMORPHISM ===== */
.neumorphic {
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-light);
  border: none;
}

.neumorphic-strong {
  box-shadow: var(--neu-shadow-strong);
}

.neumorphic-inset {
  box-shadow: var(--neu-inset-light);
  background: var(--neu-bg);
}

.neumorphic-inset-strong {
  box-shadow: var(--neu-inset-dark);
}

/* Neumorphic Hover */
.neumorphic-hover {
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.neumorphic-hover:hover {
  box-shadow: var(--neu-shadow-dark);
}

.neumorphic-hover:active {
  box-shadow: var(--neu-inset-light);
}

/* ===== HYBRID GLASS-NEUMORPHISM ===== */
.glass-neu {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    8px 8px 16px rgba(0, 0, 0, 0.1),
    -8px -8px 16px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-neu-strong {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 
    12px 12px 24px rgba(0, 0, 0, 0.15),
    -12px -12px 24px rgba(255, 255, 255, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== GLASS BUTTON ===== */
.btn-glass {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border-medium);
  color: var(--text-primary);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all var(--duration-normal) var(--ease-standard);
}

.btn-glass:hover {
  background: var(--glass-bg-heavy);
  border-color: var(--glass-border-heavy);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.btn-glass:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ===== NEUMORPHIC BUTTON ===== */
.btn-neu {
  background: var(--neu-bg);
  border: none;
  color: var(--text-primary);
  box-shadow: var(--neu-shadow-light);
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.btn-neu:hover {
  box-shadow: var(--neu-shadow-dark);
}

.btn-neu:active {
  box-shadow: var(--neu-inset-light);
}

/* ===== GLASS CARD ===== */
.card-glass {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border-medium);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.card-glass:hover {
  background: var(--glass-bg-heavy);
  border-color: var(--glass-border-heavy);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===== NEUMORPHIC CARD ===== */
.card-neu {
  background: var(--neu-bg);
  border: none;
  box-shadow: var(--neu-shadow-light);
}

.card-neu:hover {
  box-shadow: var(--neu-shadow-dark);
}

/* ===== GLASS INPUT ===== */
.input-glass {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-light);
  color: var(--text-primary);
}

.input-glass:focus {
  background: var(--glass-bg-medium);
  border-color: var(--glass-border-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  box-shadow: 
    0 0 0 3px rgba(99, 102, 241, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ===== GLASS MODAL ===== */
.modal-glass {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--glass-blur-xl));
  -webkit-backdrop-filter: blur(var(--glass-blur-xl));
  border: 1px solid var(--glass-border-heavy);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.modal-glass-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ===== GLASS NAVBAR ===== */
.navbar-glass {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border-bottom: 1px solid var(--glass-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ===== DARK MODE GLASS ===== */
[data-bs-theme="dark"] .glass,
[data-bs-theme="dark"] .glass-light,
[data-bs-theme="dark"] .glass-medium,
[data-bs-theme="dark"] .glass-heavy {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-tint-primary {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-bs-theme="dark"] .neumorphic {
  background: #1f2937;
  --neu-shadow-light: 8px 8px 16px rgba(0, 0, 0, 0.3),
                      -8px -8px 16px rgba(255, 255, 255, 0.05);
  --neu-shadow-dark: 8px 8px 16px rgba(0, 0, 0, 0.4),
                     -8px -8px 16px rgba(255, 255, 255, 0.08);
}

/* ===== GLASS ANIMATIONS ===== */
.glass-shimmer {
  position: relative;
  overflow: hidden;
}

.glass-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: glassShimmer 3s infinite;
}

@keyframes glassShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  .glass-shimmer::before {
    animation: none;
  }
  
  .card-glass:hover,
  .btn-glass:hover {
    transform: none;
  }
}

/* =========================================== */
/* END GLASS & NEUMORPHISM SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-buttons.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - BUTTON SYSTEM */
/* Single source of truth for all buttons */
/* WCAG AA compliant, accessible, performant */
/* =========================================== */

:root {
  /* ===== BUTTON SPACING (from spacing system) ===== */
  /* These reference spacing system variables */
  --button-padding-x-sm: var(--spacing-md);          /* 16px */
  --button-padding-x-md: var(--spacing-lg);          /* 24px */
  --button-padding-x-lg: var(--spacing-xl);          /* 32px */
  
  --button-padding-y-sm: calc(var(--spacing-unit) * 1.5);  /* 12px */
  --button-padding-y-md: calc(var(--spacing-unit) * 2);     /* 16px */
  --button-padding-y-lg: calc(var(--spacing-unit) * 2.5);   /* 20px */
  
  --button-gap: var(--spacing-md);                    /* 16px */
  --button-min-height: 44px;                         /* WCAG AA touch target */
  --button-min-width: 44px;
  
  /* ===== BUTTON VISUAL PROPERTIES ===== */
  --button-border-radius: 12px;
  --button-border-radius-sm: 8px;
  --button-border-radius-lg: 16px;
  --button-border-width: 2px;
  
  /* ===== BUTTON TRANSITIONS ===== */
  --button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --button-transition-fast: all 0.1s ease;
  
  /* ===== BUTTON SHADOWS ===== */
  --button-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --button-shadow-md: 0 4px 12px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(99, 102, 241, 0.2);
  --button-shadow-lg: 0 12px 28px rgba(99, 102, 241, 0.4), 0 4px 8px rgba(99, 102, 241, 0.3);
  --button-shadow-hover: 0 12px 28px rgba(99, 102, 241, 0.4), 0 4px 8px rgba(99, 102, 241, 0.3);
  
  /* ===== BUTTON COLORS (from color system) ===== */
  --button-primary-bg: var(--gradient-primary);
  --button-primary-bg-hover: var(--gradient-primary-hover);
  --button-primary-text: #ffffff;
  --button-primary-shadow: var(--button-shadow-md);
  --button-primary-shadow-hover: var(--button-shadow-lg);
  
  --button-secondary-bg: transparent;
  --button-secondary-border: var(--brand-primary);
  --button-secondary-text: var(--brand-primary);
  --button-secondary-bg-hover: var(--brand-alpha-10);
  
  --button-outline-border: var(--brand-primary);
  --button-outline-text: var(--brand-primary);
  --button-outline-bg-hover: var(--brand-primary);
  --button-outline-text-hover: #ffffff;
  
  /* ===== BUTTON FOCUS ===== */
  --button-focus-outline: 3px solid var(--brand-focus);
  --button-focus-offset: 3px;
}

/* ===== BASE BUTTON STYLES ===== */
.btn,
button:not([type="submit"]):not([type="button"]):not([type="reset"]),
[role="button"],
a.btn {
  /* Typography */
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  letter-spacing: 0.015em;
  line-height: var(--line-height-normal);
  text-align: center;
  text-decoration: none;
  
  /* Spacing */
  padding: var(--button-padding-y-md) var(--button-padding-x-md);
  min-height: var(--button-min-height);
  min-width: var(--button-min-width);
  
  /* Visual */
  border-radius: var(--button-border-radius);
  border: var(--button-border-width) solid transparent;
  transition: var(--button-transition);
  
  /* Performance */
  will-change: transform, box-shadow, background-color;
  backface-visibility: hidden;
  transform: translateZ(0);
  
  /* Interaction */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  white-space: nowrap;
  
  /* Font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Position for effects */
  position: relative;
  overflow: hidden;
}

/* ===== BUTTON SIZES ===== */
.btn-sm {
  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
  font-size: var(--font-size-sm);
  min-height: 36px;
  min-width: 36px;
  border-radius: var(--button-border-radius-sm);
}

.btn-lg {
  padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
  font-size: var(--font-size-lg);
  min-height: 52px;
  min-width: 52px;
  border-radius: var(--button-border-radius-lg);
  font-weight: var(--font-weight-bold);
}

/* ===== PRIMARY BUTTON ===== */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: var(--button-primary-bg);
  color: var(--button-primary-text) !important;
  border: none;
  box-shadow: var(--button-primary-shadow);
}

.btn-primary:hover:not(:disabled):not(.disabled) {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-text) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--button-primary-shadow-hover);
}

.btn-primary:active:not(:disabled):not(.disabled) {
  transform: translateY(-1px) scale(0.98);
  box-shadow: var(--button-shadow-md);
  transition: var(--button-transition-fast);
}

.btn-primary:focus-visible {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-offset);
  box-shadow: 0 0 0 6px var(--brand-alpha-20), var(--button-primary-shadow);
}

.btn-primary:disabled,
.btn-primary.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Primary button icons */
.btn-primary i,
.btn-primary .bx {
  color: var(--button-primary-text) !important;
}

/* ===== SECONDARY BUTTON ===== */
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border: var(--button-border-width) solid var(--button-secondary-border);
}

.btn-secondary:hover:not(:disabled):not(.disabled) {
  background: var(--button-secondary-bg-hover);
  color: var(--button-secondary-text);
  transform: translateY(-2px);
  box-shadow: var(--button-shadow-md);
}

.btn-secondary:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
  box-shadow: var(--button-shadow-sm);
  transition: var(--button-transition-fast);
}

.btn-secondary:focus-visible {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-offset);
}

/* ===== OUTLINE BUTTON ===== */
.btn-outline-primary,
.btn-outline-secondary {
  background: transparent;
  border: var(--button-border-width) solid var(--button-outline-border);
  color: var(--button-outline-text);
  position: relative;
}

.btn-outline-primary:hover:not(:disabled):not(.disabled),
.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
  background: var(--button-outline-bg-hover);
  color: var(--button-outline-text-hover) !important;
  border-color: var(--button-outline-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--button-shadow-md);
}

.btn-outline-primary:active:not(:disabled):not(.disabled),
.btn-outline-secondary:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
  box-shadow: var(--button-shadow-sm);
  transition: var(--button-transition-fast);
}

.btn-outline-primary:focus-visible,
.btn-outline-secondary:focus-visible {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-offset);
}

/* ===== RIPPLE EFFECT ===== */
.btn::before,
button::before,
[role="button"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.btn:active::before,
button:active::before,
[role="button"]:active::before {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

/* Ensure button content is above ripple */
.btn > *,
button > *,
[role="button"] > * {
  position: relative;
  z-index: 1;
}

/* ===== DARK MODE BUTTON ADJUSTMENTS ===== */
[data-bs-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background: var(--button-outline-bg-hover);
  color: var(--button-outline-text-hover) !important;
}

/* ===== BUTTON GROUPS ===== */
.btn-group {
  display: inline-flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.btn-group .btn {
  margin: 0;
}

/* ===== ACCESSIBILITY ===== */
/* Ensure all buttons are keyboard accessible */
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-offset);
}

/* Remove default browser focus styles */
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* ===== LOADING STATE ===== */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
  color: transparent !important;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* =========================================== */
/* END UNIFIED BUTTON SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-forms.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - FORM SYSTEM */
/* Single source of truth for all form elements */
/* Accessible, consistent, user-friendly */
/* =========================================== */

:root {
  /* ===== FORM SPACING (from spacing system) ===== */
  --form-field-gap: var(--spacing-md);               /* 16px */
  --form-label-margin-bottom: var(--spacing-sm);      /* 8px */
  --form-input-padding-x: var(--spacing-md);         /* 16px */
  --form-input-padding-y: calc(var(--spacing-unit) * 1.5); /* 12px */
  --form-group-margin-bottom: var(--spacing-lg);      /* 24px */
  
  /* ===== FORM VISUAL PROPERTIES ===== */
  --form-input-border-radius: 8px;
  --form-input-border-width: 2px;
  --form-input-border-color: var(--border-medium);
  --form-input-border-color-hover: rgba(99, 102, 241, 0.5);
  --form-input-border-color-focus: var(--brand-primary);
  --form-input-bg: #ffffff;
  --form-input-text: var(--text-primary);
  --form-input-placeholder: var(--text-muted);
  
  /* ===== FORM FOCUS STATES ===== */
  --form-input-focus-ring: 0 0 0 3px var(--brand-alpha-20);
  --form-input-focus-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
  
  /* ===== FORM VALIDATION COLORS ===== */
  --form-input-success-border: var(--color-success);
  --form-input-success-ring: 0 0 0 3px rgba(16, 185, 129, 0.1);
  --form-input-error-border: var(--color-error);
  --form-input-error-ring: 0 0 0 3px rgba(239, 68, 68, 0.1);
  --form-input-warning-border: var(--color-warning);
  --form-input-warning-ring: 0 0 0 3px rgba(245, 158, 11, 0.1);
  
  /* ===== FORM TRANSITIONS ===== */
  --form-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== FORM LABEL ===== */
  --form-label-font-weight: var(--font-weight-semibold);
  --form-label-font-size: var(--font-size-sm);
  --form-label-color: var(--text-primary);
  
  /* ===== FORM HELP TEXT ===== */
  --form-help-font-size: var(--font-size-xs);
  --form-help-color: var(--text-muted);
  
  /* ===== FORM ERROR TEXT ===== */
  --form-error-font-size: var(--font-size-xs);
  --form-error-color: var(--color-error);
}

/* ===== BASE FORM CONTROL ===== */
.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select {
  /* Typography */
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--form-input-text) !important;
  
  /* Spacing */
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  
  /* Visual */
  background-color: var(--form-input-bg);
  border: var(--form-input-border-width) solid var(--form-input-border-color);
  border-radius: var(--form-input-border-radius);
  
  /* Interaction */
  transition: var(--form-transition);
  width: 100%;
  
  /* Performance */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Layout */
  display: block;
  box-sizing: border-box;
}

/* ===== FORM CONTROL PLACEHOLDER ===== */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--form-input-placeholder) !important;
  opacity: 1;
}

/* ===== FORM CONTROL HOVER STATE ===== */
.form-control:hover:not(:focus):not(:disabled),
input:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
  border-color: var(--form-input-border-color-hover);
  box-shadow: var(--form-input-focus-shadow);
  transform: translateY(-1px);
}

/* ===== FORM CONTROL FOCUS STATE ===== */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--form-input-border-color-focus);
  box-shadow: var(--form-input-focus-ring), var(--form-input-focus-shadow);
}

.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 2px;
}

/* ===== FORM CONTROL DISABLED STATE ===== */
.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--bg-secondary);
  border-color: var(--border-light);
}

/* ===== FORM LABEL ===== */
.form-label,
label {
  display: block;
  font-weight: var(--form-label-font-weight);
  font-size: var(--form-label-font-size);
  color: var(--form-label-color);
  margin-bottom: var(--form-label-margin-bottom);
  line-height: var(--line-height-normal);
}

.form-label.required::after {
  content: ' *';
  color: var(--color-error);
}

/* ===== FORM GROUP ===== */
.form-group,
.mb-3 {
  margin-bottom: var(--form-group-margin-bottom);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* ===== FORM HELP TEXT ===== */
.form-text,
.help-text {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--form-help-font-size);
  color: var(--form-help-color);
  line-height: var(--line-height-normal);
}

/* ===== FORM VALIDATION STATES ===== */
/* Success State */
.form-control.is-valid,
.form-control:valid:not(:focus):not(:placeholder-shown),
input:valid:not(:focus):not(:placeholder-shown),
textarea:valid:not(:focus):not(:placeholder-shown) {
  border-color: var(--form-input-success-border);
  box-shadow: var(--form-input-success-ring);
}

.form-control.is-valid:focus,
.form-control:valid:focus {
  border-color: var(--form-input-success-border);
  box-shadow: var(--form-input-success-ring), var(--form-input-focus-shadow);
}

/* Error State */
.form-control.is-invalid,
.form-control:invalid:not(:focus):not(:placeholder-shown),
input:invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--form-input-error-border);
  box-shadow: var(--form-input-error-ring);
}

.form-control.is-invalid:focus,
.form-control:invalid:focus {
  border-color: var(--form-input-error-border);
  box-shadow: var(--form-input-error-ring), var(--form-input-focus-shadow);
}

/* Warning State */
.form-control.is-warning {
  border-color: var(--form-input-warning-border);
  box-shadow: var(--form-input-warning-ring);
}

.form-control.is-warning:focus {
  border-color: var(--form-input-warning-border);
  box-shadow: var(--form-input-warning-ring), var(--form-input-focus-shadow);
}

/* ===== FORM FEEDBACK MESSAGES ===== */
.invalid-feedback,
.error-message {
  display: block;
  width: 100%;
  margin-top: var(--spacing-xs);
  font-size: var(--form-error-font-size);
  color: var(--form-error-color);
  line-height: var(--line-height-normal);
}

.valid-feedback,
.success-message {
  display: block;
  width: 100%;
  margin-top: var(--spacing-xs);
  font-size: var(--form-help-font-size);
  color: var(--color-success);
  line-height: var(--line-height-normal);
}

/* ===== TEXTAREA SPECIFIC ===== */
textarea.form-control,
textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}

textarea.form-control-sm {
  min-height: 80px;
}

textarea.form-control-lg {
  min-height: 160px;
}

/* ===== SELECT SPECIFIC ===== */
select.form-control,
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236366f1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 12px;
  padding-right: calc(var(--form-input-padding-x) * 2 + 12px);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.form-control:focus,
select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237c3aed' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* ===== CHECKBOX & RADIO ===== */
.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  margin-right: var(--spacing-sm);
  cursor: pointer;
  border: var(--form-input-border-width) solid var(--form-input-border-color);
  transition: var(--form-transition);
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-check-input:focus {
  box-shadow: var(--form-input-focus-ring);
  border-color: var(--form-input-border-color-focus);
}

.form-check-label {
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

.form-check {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.form-check:last-child {
  margin-bottom: 0;
}

/* ===== FLOATING LABELS ===== */
.form-floating {
  position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + var(--form-input-border-width) * 2);
  padding: 1rem var(--form-input-padding-x);
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem var(--form-input-padding-x);
  pointer-events: none;
  border: var(--form-input-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  color: var(--form-input-placeholder);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  color: var(--brand-primary);
  font-weight: var(--font-weight-semibold);
}

/* ===== INPUT GROUPS ===== */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bg-secondary);
  border: var(--form-input-border-width) solid var(--form-input-border-color);
  border-radius: var(--form-input-border-radius);
}

/* ===== DARK MODE FORM ADJUSTMENTS ===== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] select:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--brand-primary);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] input:disabled,
[data-bs-theme="dark"] textarea:disabled,
[data-bs-theme="dark"] select:disabled {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  .form-control,
  input,
  textarea,
  select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  button[type="submit"],
  input[type="submit"] {
    min-height: 48px; /* Larger touch target for mobile */
    font-size: 16px;
    width: 100%;
  }
  
  .form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
  }
  
  .form-group,
  .mb-3 {
    margin-bottom: var(--spacing-lg);
  }
}

/* ===== ACCESSIBILITY ===== */
/* Ensure all form elements are keyboard accessible */
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 2px;
}

/* Remove default browser focus styles */
.form-control:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .form-control,
  input,
  textarea,
  select,
  .form-label {
    transition: none !important;
  }
  
  .form-control:hover {
    transform: none !important;
  }
}

/* =========================================== */
/* END UNIFIED FORM SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-cards.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - CARD SYSTEM */
/* Single source of truth for all card components */
/* Consistent card styles and variants */
/* =========================================== */

:root {
  /* ===== CARD SPACING (from spacing system) ===== */
  --card-padding-xs: var(--spacing-sm);              /* 8px */
  --card-padding-sm: var(--spacing-md);              /* 16px */
  --card-padding-md: var(--spacing-lg);              /* 24px */
  --card-padding-lg: var(--spacing-xl);              /* 32px */
  --card-gap: var(--spacing-lg);                     /* 24px */
  
  /* ===== CARD VISUAL PROPERTIES ===== */
  --card-border-radius: var(--radius-lg);
  --card-border-width: 1px;
  --card-border-color: var(--border-light);
  --card-bg: var(--bg-primary);
  --card-bg-hover: var(--bg-secondary);
  
  /* ===== CARD SHADOWS (from elevation system) ===== */
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);
  
  /* ===== CARD TRANSITIONS ===== */
  --card-transition: all var(--duration-normal) var(--ease-standard);
}

/* ===== BASE CARD ===== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-padding-md);
  border-radius: var(--card-border-radius);
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  box-shadow: var(--card-shadow);
  transition: var(--card-transition);
  overflow: hidden;
}

/* ===== CARD VARIANTS ===== */

/* Card with no border */
.card-borderless {
  border: none;
}

/* Card with no shadow */
.card-flat {
  box-shadow: none;
}

/* Card with elevated shadow */
.card-elevated {
  box-shadow: var(--elevation-2);
}

.card-elevated:hover {
  box-shadow: var(--elevation-4);
}

/* Card with brand-colored border */
.card-brand {
  border-color: var(--brand-primary);
  border-width: 2px;
}

/* Card with gradient background */
.card-gradient {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border: none;
}

/* Card with glassmorphism effect */
.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== CARD SIZES ===== */

.card-sm {
  padding: var(--card-padding-sm);
  border-radius: var(--radius-md);
}

.card-lg {
  padding: var(--card-padding-lg);
  border-radius: var(--radius-xl);
}

/* ===== CARD HOVER STATES ===== */

.card-hover {
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  background: var(--card-bg-hover);
}

.card-hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--elevation-4);
}

.card-hover-scale:hover {
  transform: scale(1.05);
  box-shadow: var(--card-shadow-hover);
}

/* ===== CARD HEADER ===== */

.card-header {
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.card-header:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* ===== CARD BODY ===== */

.card-body {
  flex: 1;
  color: var(--text-primary);
}

.card-body:last-child {
  padding-bottom: 0;
}

/* ===== CARD FOOTER ===== */

.card-footer {
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.card-footer:first-child {
  margin-top: 0;
  border-top: none;
}

/* ===== CARD IMAGE ===== */

.card-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.card-img-top {
  margin-top: calc(var(--card-padding-md) * -1);
  margin-left: calc(var(--card-padding-md) * -1);
  margin-right: calc(var(--card-padding-md) * -1);
  margin-bottom: var(--spacing-md);
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

.card-img-bottom {
  margin-bottom: calc(var(--card-padding-md) * -1);
  margin-left: calc(var(--card-padding-md) * -1);
  margin-right: calc(var(--card-padding-md) * -1);
  margin-top: var(--spacing-md);
  border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
}

/* ===== CARD TITLE ===== */

.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

/* ===== CARD TEXT ===== */

.card-text {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-md);
}

.card-text:last-child {
  margin-bottom: 0;
}

/* ===== CARD LINK ===== */

.card-link {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-color);
}

.card-link:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

/* ===== CARD ACTIONS ===== */

.card-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

.card-actions:first-child {
  margin-top: 0;
}

/* ===== CARD BADGE ===== */

.card-badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-badge);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  z-index: 1;
}

/* ===== CARD GRID ===== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--card-gap);
}

@media (max-width: 767.98px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

/* ===== CARD LOADING STATE ===== */

.card-loading {
  position: relative;
  overflow: hidden;
}

.card-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: card-shimmer 1.5s infinite;
}

@keyframes card-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ===== DARK MODE CARD ADJUSTMENTS ===== */
[data-bs-theme="dark"] .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .card-hover:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .card-glass {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* =========================================== */
/* END UNIFIED CARD SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-icons.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - ICON SYSTEM */
/* Single source of truth for all icons */
/* Consistent icon sizing and usage */
/* =========================================== */

:root {
  /* ===== ICON SIZES ===== */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;
  --icon-3xl: 64px;
  
  /* ===== ICON SPACING ===== */
  --icon-gap-xs: var(--spacing-xs);   /* 4px */
  --icon-gap-sm: var(--spacing-sm);   /* 8px */
  --icon-gap-md: var(--spacing-md);   /* 16px */
  --icon-gap-lg: var(--spacing-lg);   /* 24px */
  
  /* ===== ICON COLORS ===== */
  --icon-color: var(--text-primary);
  --icon-color-secondary: var(--text-secondary);
  --icon-color-muted: var(--text-muted);
  --icon-color-brand: var(--brand-primary);
  --icon-color-success: var(--color-success);
  --icon-color-error: var(--color-error);
  --icon-color-warning: var(--color-warning);
  --icon-color-info: var(--color-info);
  
  /* ===== ICON TRANSITIONS ===== */
  --icon-transition: var(--transition-transform);
}

/* ===== BASE ICON STYLES ===== */
.icon,
i[class^="bx"],
i[class^="fas"],
i[class^="far"],
i[class^="fab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  vertical-align: middle;
  transition: var(--icon-transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== ICON SIZES ===== */

.icon-xs,
.icon-xs i {
  font-size: var(--icon-xs);
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.icon-sm,
.icon-sm i {
  font-size: var(--icon-sm);
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon-md,
.icon-md i {
  font-size: var(--icon-md);
  width: var(--icon-md);
  height: var(--icon-md);
}

.icon-lg,
.icon-lg i {
  font-size: var(--icon-lg);
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.icon-xl,
.icon-xl i {
  font-size: var(--icon-xl);
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.icon-2xl,
.icon-2xl i {
  font-size: var(--icon-2xl);
  width: var(--icon-2xl);
  height: var(--icon-2xl);
}

.icon-3xl,
.icon-3xl i {
  font-size: var(--icon-3xl);
  width: var(--icon-3xl);
  height: var(--icon-3xl);
}

/* ===== ICON COLORS ===== */

.icon-primary {
  color: var(--icon-color-brand);
}

.icon-secondary {
  color: var(--icon-color-secondary);
}

.icon-muted {
  color: var(--icon-color-muted);
}

.icon-success {
  color: var(--icon-color-success);
}

.icon-error {
  color: var(--icon-color-error);
}

.icon-warning {
  color: var(--icon-color-warning);
}

.icon-info {
  color: var(--icon-color-info);
}

.icon-white {
  color: var(--text-inverse);
}

/* ===== ICON WITH TEXT ===== */

.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap-sm);
}

.icon-text-lg {
  gap: var(--icon-gap-md);
}

.icon-text-xl {
  gap: var(--icon-gap-lg);
}

/* Icon before text */
.icon-text .icon {
  order: -1;
}

/* Icon after text */
.icon-text-reverse {
  flex-direction: row-reverse;
}

/* ===== ICON BUTTON ===== */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* WCAG AA touch target */
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--icon-color);
  cursor: pointer;
  transition: var(--transition-normal);
}

.icon-button:hover {
  background: var(--bg-secondary);
  color: var(--icon-color-brand);
  transform: scale(1.1);
}

.icon-button:active {
  transform: scale(0.95);
}

.icon-button-sm {
  width: 36px;
  height: 36px;
}

.icon-button-lg {
  width: 52px;
  height: 52px;
}

/* ===== ICON ANIMATIONS ===== */

.icon-rotate:hover {
  animation: iconRotate var(--duration-normal) var(--ease-standard);
}

.icon-bounce:hover {
  animation: iconBounce var(--duration-normal) var(--ease-bounce);
}

.icon-pulse {
  animation: iconPulse var(--duration-slower) var(--ease-standard) infinite;
}

.icon-spin {
  animation: var(--animation-spin);
}

@keyframes iconRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
}

@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes iconPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* ===== ICON IN BUTTON ===== */

.btn .icon,
button .icon {
  margin: 0;
}

.btn .icon:first-child {
  margin-right: var(--icon-gap-sm);
}

.btn .icon:last-child {
  margin-left: var(--icon-gap-sm);
}

.btn .icon:only-child {
  margin: 0;
}

/* ===== ICON IN LINK ===== */

a:hover .icon {
  transform: scale(1.1);
  color: var(--icon-color-brand);
}

a:active .icon {
  transform: scale(0.95);
}

/* ===== ICON GROUP ===== */

.icon-group {
  display: inline-flex;
  gap: var(--icon-gap-xs);
  align-items: center;
}

.icon-group-sm {
  gap: var(--icon-gap-xs);
}

.icon-group-md {
  gap: var(--icon-gap-sm);
}

.icon-group-lg {
  gap: var(--icon-gap-md);
}

/* ===== SOCIAL ICONS ===== */

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  background: var(--bg-secondary);
  transition: var(--transition-normal);
  text-decoration: none;
}

.social-icon:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
  transform: translateY(-2px) scale(1.1);
}

.social-icon-sm {
  width: 32px;
  height: 32px;
  font-size: var(--icon-sm);
}

.social-icon-lg {
  width: 48px;
  height: 48px;
  font-size: var(--icon-lg);
}

/* ===== DARK MODE ICON ADJUSTMENTS ===== */
[data-bs-theme="dark"] .icon {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .social-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .social-icon:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

/* =========================================== */
/* END UNIFIED ICON SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-loading.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - LOADING STATES */
/* Single source of truth for loading indicators */
/* Consistent loading UX across the site */
/* =========================================== */

:root {
  /* ===== SPINNER SIZES ===== */
  --spinner-size-xs: 12px;
  --spinner-size-sm: 16px;
  --spinner-size-md: 24px;
  --spinner-size-lg: 32px;
  --spinner-size-xl: 48px;
  
  /* ===== SPINNER COLORS ===== */
  --spinner-color: var(--brand-primary);
  --spinner-color-light: rgba(99, 102, 241, 0.2);
  --spinner-color-success: var(--color-success);
  --spinner-color-error: var(--color-error);
  --spinner-color-white: rgba(255, 255, 255, 0.3);
  --spinner-color-white-active: #ffffff;
  
  /* ===== SPINNER SPEED ===== */
  --spinner-speed-fast: 0.6s;
  --spinner-speed-normal: 0.8s;
  --spinner-speed-slow: 1.2s;
  
  /* ===== SKELETON COLORS ===== */
  --skeleton-bg: var(--bg-secondary);
  --skeleton-highlight: var(--bg-tertiary);
  --skeleton-speed: 1.5s;
}

/* ===== SPINNER BASE ===== */
.spinner {
  display: inline-block;
  width: var(--spinner-size-md);
  height: var(--spinner-size-md);
  border: 3px solid var(--spinner-color-light);
  border-top-color: var(--spinner-color);
  border-radius: 50%;
  animation: spinner-spin var(--spinner-speed-normal) linear infinite;
  vertical-align: middle;
}

/* ===== SPINNER SIZES ===== */
.spinner-xs {
  width: var(--spinner-size-xs);
  height: var(--spinner-size-xs);
  border-width: 2px;
}

.spinner-sm {
  width: var(--spinner-size-sm);
  height: var(--spinner-size-sm);
  border-width: 2px;
}

.spinner-md {
  width: var(--spinner-size-md);
  height: var(--spinner-size-md);
  border-width: 3px;
}

.spinner-lg {
  width: var(--spinner-size-lg);
  height: var(--spinner-size-lg);
  border-width: 4px;
}

.spinner-xl {
  width: var(--spinner-size-xl);
  height: var(--spinner-size-xl);
  border-width: 5px;
}

/* ===== SPINNER COLORS ===== */
.spinner-primary {
  border-color: var(--spinner-color-light);
  border-top-color: var(--spinner-color);
}

.spinner-success {
  border-color: rgba(16, 185, 129, 0.2);
  border-top-color: var(--spinner-color-success);
}

.spinner-error {
  border-color: rgba(239, 68, 68, 0.2);
  border-top-color: var(--spinner-color-error);
}

.spinner-white {
  border-color: var(--spinner-color-white);
  border-top-color: var(--spinner-color-white-active);
}

/* ===== SPINNER SPEED ===== */
.spinner-fast {
  animation-duration: var(--spinner-speed-fast);
}

.spinner-normal {
  animation-duration: var(--spinner-speed-normal);
}

.spinner-slow {
  animation-duration: var(--spinner-speed-slow);
}

/* ===== SPINNER ANIMATION ===== */
@keyframes spinner-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== BUTTON LOADING STATE ===== */
.btn.loading,
button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: 0.7;
}

.btn.loading::after,
button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--spinner-size-sm);
  height: var(--spinner-size-sm);
  margin-left: calc(var(--spinner-size-sm) / -2);
  margin-top: calc(var(--spinner-size-sm) / -2);
  border: 2px solid var(--spinner-color-white);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-spin var(--spinner-speed-normal) linear infinite;
}

.btn-primary.loading::after,
button.btn-primary.loading::after {
  border-color: var(--spinner-color-white);
  border-top-color: transparent;
}

.btn-secondary.loading::after,
button.btn-secondary.loading::after {
  border-color: var(--spinner-color-light);
  border-top-color: var(--spinner-color);
}

/* ===== SKELETON LOADING ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-bg) 25%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-bg) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading var(--skeleton-speed) ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 1em;
  margin-bottom: var(--spacing-sm);
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--spacing-md);
}

.skeleton-subtitle {
  height: 1.25em;
  width: 40%;
  margin-bottom: var(--spacing-md);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-lg);
}

.skeleton-button {
  height: 44px;
  width: 120px;
  border-radius: var(--radius-button);
}

.skeleton-card {
  padding: var(--card-padding-md);
  border-radius: var(--card-border-radius);
}

/* ===== SKELETON ANIMATION ===== */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== SKELETON VARIANTS ===== */
.skeleton-pulse {
  animation: skeleton-pulse var(--skeleton-speed) ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.skeleton-wave {
  background: linear-gradient(
    90deg,
    var(--skeleton-bg) 0%,
    var(--skeleton-highlight) 20%,
    var(--skeleton-bg) 40%,
    var(--skeleton-bg) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-wave var(--skeleton-speed) linear infinite;
}

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

/* ===== LOADING OVERLAY ===== */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  border-radius: inherit;
}

[data-bs-theme="dark"] .loading-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.loading-overlay .spinner {
  position: relative;
}

/* ===== PROGRESS BAR ===== */
.progress {
  width: 100%;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-standard);
  animation: progress-shimmer 1.5s ease-in-out infinite;
}

@keyframes progress-shimmer {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.progress-sm {
  height: 4px;
}

.progress-lg {
  height: 12px;
}

/* ===== DOTS LOADER ===== */
.dots-loader {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.dots-loader span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  animation: dots-bounce var(--duration-slower) ease-in-out infinite;
}

.dots-loader span:nth-child(1) {
  animation-delay: 0s;
}

.dots-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.dots-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dots-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .skeleton,
  .skeleton-pulse,
  .skeleton-wave,
  .progress-bar,
  .dots-loader span {
    animation: none !important;
  }
  
  .skeleton {
    background: var(--skeleton-bg);
  }
}

/* =========================================== */
/* END UNIFIED LOADING STATES SYSTEM */
/* =========================================== */



/* =========================================== */
/* assets/css/design-system-states.css */
/* =========================================== */

/* =========================================== */
/* UNIFIED DESIGN SYSTEM - STATES SYSTEM */
/* Single source of truth for error & empty states */
/* Consistent messaging and feedback */
/* =========================================== */

:root {
  /* ===== ALERT COLORS ===== */
  --alert-success-bg: rgba(16, 185, 129, 0.1);
  --alert-success-border: var(--color-success);
  --alert-success-text: var(--color-success);
  --alert-success-icon: var(--color-success);
  
  --alert-error-bg: rgba(239, 68, 68, 0.1);
  --alert-error-border: var(--color-error);
  --alert-error-text: var(--color-error);
  --alert-error-icon: var(--color-error);
  
  --alert-warning-bg: rgba(245, 158, 11, 0.1);
  --alert-warning-border: var(--color-warning);
  --alert-warning-text: var(--color-warning);
  --alert-warning-icon: var(--color-warning);
  
  --alert-info-bg: rgba(59, 130, 246, 0.1);
  --alert-info-border: var(--color-info);
  --alert-info-text: var(--color-info);
  --alert-info-icon: var(--color-info);
  
  /* ===== ALERT SPACING ===== */
  --alert-padding: var(--spacing-md);
  --alert-padding-lg: var(--spacing-lg);
  --alert-border-width: 4px;
  --alert-border-radius: var(--radius-md);
  
  /* ===== EMPTY STATE COLORS ===== */
  --empty-state-text: var(--text-muted);
  --empty-state-icon-color: var(--text-tertiary);
  --empty-state-bg: transparent;
}

/* ===== ALERT BASE ===== */
.alert {
  position: relative;
  padding: var(--alert-padding);
  margin-bottom: var(--spacing-md);
  border-left: var(--alert-border-width) solid;
  border-radius: var(--alert-border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  transition: var(--transition-normal);
}

.alert:last-child {
  margin-bottom: 0;
}

/* ===== ALERT VARIANTS ===== */

/* Success Alert */
.alert-success {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

.alert-success .alert-icon {
  color: var(--alert-success-icon);
}

/* Error Alert */
.alert-error,
.alert-danger {
  background: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--alert-error-text);
}

.alert-error .alert-icon,
.alert-danger .alert-icon {
  color: var(--alert-error-icon);
}

/* Warning Alert */
.alert-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.alert-warning .alert-icon {
  color: var(--alert-warning-icon);
}

/* Info Alert */
.alert-info {
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

.alert-info .alert-icon {
  color: var(--alert-info-icon);
}

/* ===== ALERT CONTENT ===== */
.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-tight);
}

.alert-message {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.alert-icon {
  font-size: var(--icon-lg);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===== ALERT CLOSE BUTTON ===== */
.alert-close {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: var(--transition-opacity);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.alert-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .alert-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ===== ALERT SIZES ===== */
.alert-sm {
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.alert-sm .alert-icon {
  font-size: var(--icon-md);
}

.alert-lg {
  padding: var(--alert-padding-lg);
  font-size: var(--font-size-base);
}

.alert-lg .alert-icon {
  font-size: var(--icon-xl);
}

/* ===== ALERT WITH ICON ===== */
.alert-has-icon {
  padding-left: var(--spacing-md);
}

.alert-has-icon .alert-icon {
  position: absolute;
  left: var(--spacing-md);
  top: var(--spacing-md);
}

.alert-has-icon .alert-content {
  padding-left: calc(var(--icon-lg) + var(--spacing-sm));
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-lg);
  color: var(--empty-state-text);
}

.empty-state-icon {
  font-size: var(--icon-3xl);
  color: var(--empty-state-icon-color);
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.empty-state-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-action {
  margin-top: var(--spacing-lg);
}

/* ===== EMPTY STATE VARIANTS ===== */
.empty-state-sm {
  padding: var(--spacing-2xl) var(--spacing-md);
}

.empty-state-sm .empty-state-icon {
  font-size: var(--icon-xl);
}

.empty-state-lg {
  padding: var(--spacing-5xl) var(--spacing-xl);
}

.empty-state-lg .empty-state-icon {
  font-size: 80px;
}

/* ===== ERROR STATE ===== */
.error-state {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-lg);
  color: var(--alert-error-text);
}

.error-state-icon {
  font-size: var(--icon-3xl);
  color: var(--alert-error-icon);
  margin-bottom: var(--spacing-lg);
}

.error-state-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--alert-error-text);
  margin-bottom: var(--spacing-sm);
}

.error-state-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.error-state-code {
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  background: var(--bg-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  display: inline-block;
  color: var(--alert-error-text);
}

/* ===== SUCCESS STATE ===== */
.success-state {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-lg);
  color: var(--alert-success-text);
}

.success-state-icon {
  font-size: var(--icon-3xl);
  color: var(--alert-success-icon);
  margin-bottom: var(--spacing-lg);
  animation: successPulse var(--duration-slow) var(--ease-standard);
}

@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.success-state-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--alert-success-text);
  margin-bottom: var(--spacing-sm);
}

.success-state-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== INLINE STATES ===== */
.inline-error {
  display: block;
  color: var(--alert-error-text);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  line-height: var(--line-height-normal);
}

.inline-success {
  display: block;
  color: var(--alert-success-text);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  line-height: var(--line-height-normal);
}

.inline-warning {
  display: block;
  color: var(--alert-warning-text);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  line-height: var(--line-height-normal);
}

/* ===== DARK MODE ADJUSTMENTS ===== */
[data-bs-theme="dark"] .alert {
  background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.15);
}

[data-bs-theme="dark"] .alert-error,
[data-bs-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.15);
}

[data-bs-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.15);
}

[data-bs-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.15);
}

[data-bs-theme="dark"] .empty-state-icon,
[data-bs-theme="dark"] .error-state-icon {
  opacity: 0.4;
}

/* =========================================== */
/* END UNIFIED STATES SYSTEM */
/* =========================================== */