diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD
index 0137412..4a2333f 100644
--- a/UI_UPDATE.MD
+++ b/UI_UPDATE.MD
@@ -236,41 +236,41 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
- [x] Implement icon sprite system
#### 2.4.2: Icon Size Variants
-- [x] Define icon size scale (xs-xl)
-- [x] Create consistent icon sizing proportions
-- [x] Implement responsive icon scaling
+- [ ] Define icon size scale (xs-xl)
+- [ ] Create consistent icon sizing proportions
+- [ ] Implement responsive icon scaling
#### 2.4.3: Animated Icons
-- [x] Create loading spinners and progress indicators
-- [x] Implement micro-interaction animations
-- [x] Add hover state animations for interactive icons
+- [ ] Create loading spinners and progress indicators
+- [ ] Implement micro-interaction animations
+- [ ] Add hover state animations for interactive icons
#### 2.4.4: Accessibility Implementation
-- [x] Add screen reader labels for decorative icons
-- [x] Implement focus indicators for icon buttons
-- [x] Test keyboard navigation for icon controls
+- [ ] Add screen reader labels for decorative icons
+- [ ] Implement focus indicators for icon buttons
+- [ ] Test keyboard navigation for icon controls
### Sub-task 2.5: Component Visual Polish
#### 2.5.1: Button Style Redesign
-- [x] Create button component with multiple variants
-- [x] Implement consistent button sizing and padding
-- [x] Add button state variations (hover, active, disabled)
+- [ ] Create button component with multiple variants
+- [ ] Implement consistent button sizing and padding
+- [ ] Add button state variations (hover, active, disabled)
#### 2.5.2: Card Design Updates
-- [x] Redesign card components with modern styling
-- [x] Implement consistent card shadows and borders
-- [x] Add card interaction states
+- [ ] Redesign card components with modern styling
+- [ ] Implement consistent card shadows and borders
+- [ ] Add card interaction states
#### 2.5.3: Form Element Updates
-- [x] Enhance input field styling
-- [x] Create consistent form element design
-- [x] Implement form validation states
+- [ ] Enhance input field styling
+- [ ] Create consistent form element design
+- [ ] Implement form validation states
#### 2.5.4: Loading States
-- [x] Implement skeleton loading patterns
-- [x] Create smooth loading transitions
-- [x] Add stateful component styling
+- [ ] Implement skeleton loading patterns
+- [ ] Create smooth loading transitions
+- [ ] Add stateful component styling
---
diff --git a/index.php b/index.php
index 13c51d4..d7c16a8 100644
--- a/index.php
+++ b/index.php
@@ -326,7 +326,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
- No messages yet. Be the first to say hello!
+ No messages yet. Be the first to say hello!
diff --git a/static/css/components.css b/static/css/components.css
index e4d4ab5..dca71e4 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -1,529 +1,5 @@
/* Component styles - Reusable UI components */
-/* =================================================================
- BUTTON COMPONENT SYSTEM
- ================================================================= */
-
-/* Base button styles */
-.btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-2);
- padding: var(--spacing-3) var(--spacing-5);
- border: 2px solid transparent;
- border-radius: var(--border-radius-lg);
- font-family: var(--font-family-base);
- font-size: var(--font-size-sm);
- font-weight: var(--font-weight-semibold);
- text-align: center;
- text-decoration: none;
- cursor: pointer;
- transition: all var(--transition-fast);
- user-select: none;
- position: relative;
- overflow: hidden;
- min-height: var(--min-tap-target-size, 44px);
- box-sizing: border-box;
-}
-
-/* Button sizes */
-.btn-sm {
- padding: var(--spacing-2) var(--spacing-4);
- font-size: var(--font-size-xs);
- min-height: var(--min-tap-target-size-sm, 36px);
-}
-
-.btn-lg {
- padding: var(--spacing-4) var(--spacing-6);
- font-size: var(--font-size-base);
- min-height: var(--min-tap-target-size-lg, 52px);
-}
-
-/* Button variants */
-.btn-primary {
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
- color: var(--color-on-primary);
- box-shadow: var(--elevation-3);
- border-color: var(--color-primary);
-}
-
-.btn-secondary {
- background: var(--color-secondary);
- color: var(--color-on-secondary);
- border-color: var(--color-secondary);
-}
-
-.btn-accent {
- background: linear-gradient(135deg, var(--color-accent), var(--color-accent-darker));
- color: var(--color-on-accent);
- box-shadow: var(--elevation-3);
- border-color: var(--color-accent);
-}
-
-.btn-outline {
- background: transparent;
- border-color: var(--color-outline);
- color: var(--color-on-surface);
-}
-
-.btn-outline-primary {
- background: transparent;
- border-color: var(--color-primary);
- color: var(--color-primary);
-}
-
-.btn-text {
- background: transparent;
- border-color: transparent;
- color: var(--color-primary);
- padding: var(--spacing-2) var(--spacing-3);
- box-shadow: none;
-}
-
-/* Button states */
-.btn:hover {
- /* Transform handled by state variants */
-}
-
-.btn:active {
- transform: translateY(0);
-}
-
-.btn:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- transform: none !important;
-}
-
-.btn-primary:hover {
- background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
- transform: translateY(-1px);
- box-shadow: var(--elevation-4);
-}
-
-.btn-secondary:hover {
- transform: translateY(-1px);
- box-shadow: var(--elevation-2);
-}
-
-.btn-accent:hover {
- background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
- transform: translateY(-1px);
- box-shadow: var(--elevation-4);
-}
-
-.btn-outline:hover {
- background: var(--color-surface-variant);
-}
-
-.btn-outline-primary:hover {
- background: var(--color-primary);
- color: var(--color-on-primary);
-}
-
-.btn-text:hover {
- background: rgba(var(--color-primary-rgb), 0.1);
-}
-
-/* Focus states for accessibility */
-.btn:focus-visible {
- outline: 2px solid var(--color-focus);
- outline-offset: 2px;
-}
-
-/* Loading state */
-.btn-loading {
- position: relative;
- color: transparent;
-}
-
-.btn-loading::after {
- position: absolute;
- content: '';
- width: 1em;
- height: 1em;
- border: 2px solid rgba(255,255,255,0.3);
- border-top: 2px solid white;
- border-radius: 50%;
- animation: spin 1s linear infinite;
-}
-
-/* Full width button */
-.btn-full {
- width: 100%;
-}
-
-/* Icon buttons */
-.btn-icon {
- padding: var(--spacing-2);
- width: auto;
- aspect-ratio: 1;
-}
-
-.btn-icon-only {
- width: var(--min-tap-target-size, 44px);
- height: var(--min-tap-target-size, 44px);
- padding: 0;
-}
-
-/* =================================================================
- CARD COMPONENT SYSTEM
- ================================================================= */
-
-/* Base card styles */
-.card {
- background: var(--color-surface);
- border-radius: var(--border-radius-lg);
- box-shadow: var(--elevation-1);
- border: 1px solid var(--color-outline-variant);
- transition: all var(--transition-fast);
- overflow: hidden;
- position: relative;
-}
-
-.card-elevated {
- box-shadow: var(--elevation-2);
-}
-
-.card-outlined {
- border-width: 2px;
- background: var(--color-surface);
-}
-
-.card-header {
- padding: var(--spacing-4);
- border-bottom: 1px solid var(--color-outline-variant);
- background: var(--color-surface-variant);
-}
-
-.card-body {
- padding: var(--spacing-4);
-}
-
-.card-footer {
- padding: var(--spacing-4);
- border-top: 1px solid var(--color-outline-variant);
- background: var(--color-surface-variant);
-}
-
-/* Card interaction states */
-.card:hover {
- transform: translateY(-2px);
- box-shadow: var(--elevation-3);
-}
-
-.card-interactive {
- cursor: pointer;
-}
-
-.card-interactive:hover {
- transform: translateY(-2px);
- box-shadow: var(--elevation-3);
-}
-
-.card-interactive:active {
- transform: translateY(0);
- box-shadow: var(--elevation-1);
-}
-
-.card:focus-visible {
- outline: 2px solid var(--color-focus);
- outline-offset: 2px;
-}
-
-/* Card variants */
-.card-compact .card-body {
- padding: var(--spacing-3);
-}
-
-.card-compact .card-header,
-.card-compact .card-footer {
- padding: var(--spacing-3);
-}
-
-/* =================================================================
- FORM ELEMENT SYSTEM
- ================================================================= */
-
-/* Base input styles */
-.form-control {
- width: 100%;
- padding: var(--spacing-3) var(--spacing-4);
- border: 2px solid var(--color-outline);
- border-radius: var(--border-radius-md);
- background: var(--color-surface);
- color: var(--color-on-surface);
- font-family: inherit;
- font-size: var(--font-size-sm);
- transition: all var(--transition-fast);
- box-sizing: border-box;
-}
-
-.form-control:focus {
- outline: none;
- border-color: var(--color-primary);
- box-shadow: 0 0 0 3px var(--focus-ring);
-}
-
-.form-label {
- display: block;
- margin-bottom: var(--spacing-2);
- font-size: var(--font-size-sm);
- font-weight: var(--font-weight-medium);
- color: var(--color-on-surface);
-}
-
-.form-input,
-.form-textarea,
-.form-select {
- /* Inherit from form-control */
- width: 100%;
- padding: var(--spacing-3) var(--spacing-4);
- border: 2px solid var(--color-outline);
- border-radius: var(--border-radius-md);
- background: var(--color-surface);
- color: var(--color-on-surface);
- font-family: inherit;
- font-size: var(--font-size-sm);
- transition: all var(--transition-fast);
- box-sizing: border-box;
-}
-
-.form-input:focus,
-.form-textarea:focus,
-.form-select:focus {
- outline: none;
- border-color: var(--color-primary);
- box-shadow: 0 0 0 3px var(--focus-ring);
-}
-
-/* Form row for horizontal layouts */
-.form-row {
- display: flex;
- gap: var(--spacing-4);
- align-items: flex-start;
-}
-
-.form-row .form-control {
- flex: 1;
-}
-
-/* Validation states */
-.form-group {
- margin-bottom: var(--spacing-4);
- position: relative;
-}
-
-.form-group--error .form-control {
- border-color: var(--color-error);
-}
-
-.form-group--error .form-control:focus {
- box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.2);
-}
-
-.form-group--success .form-control {
- border-color: var(--color-success);
-}
-
-.form-group--success .form-control:focus {
- box-shadow: 0 0 0 3px rgba(var(--color-success-rgb), 0.2);
-}
-
-.form-error,
-.form-success {
- font-size: var(--font-size-xs);
- margin-top: var(--spacing-1);
- display: block;
-}
-
-.form-error {
- color: var(--color-error);
-}
-
-.form-success {
- color: var(--color-success);
-}
-
-/* =================================================================
- LOADING STATES - SKELETONS AND TRANSITIONS
- ================================================================= */
-
-/* Skeleton loading animations */
-@keyframes skeleton-pulse {
- 0% { opacity: 1; }
- 50% { opacity: 0.6; }
- 100% { opacity: 1; }
-}
-
-/* Base skeleton styles */
-.skeleton {
- background: linear-gradient(90deg, var(--color-surface-variant) 25%, var(--color-surface) 50%, var(--color-surface-variant) 75%);
- background-size: 200% 100%;
- animation: skeleton-pulse 1.5s ease-in-out infinite, skeleton-shimmer 1.5s ease-in-out infinite;
- border-radius: var(--border-radius-sm);
-}
-
-@keyframes skeleton-shimmer {
- 0% { background-position: -200% 0; }
- 100% { background-position: 200% 0; }
-}
-
-/* Specific skeleton types */
-.skeleton-text {
- height: var(--font-size-base);
- width: 100%;
- margin-bottom: var(--spacing-2);
-}
-
-.skeleton-text:last-child {
- margin-bottom: 0;
-}
-
-.skeleton-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
-}
-
-.skeleton-button {
- height: var(--min-tap-target-size, 44px);
- width: 120px;
- border-radius: var(--border-radius-lg);
-}
-
-.skeleton-card {
- padding: var(--spacing-4);
- margin-bottom: var(--spacing-4);
-}
-
-.skeleton-card .skeleton-header {
- height: var(--font-size-lg);
- width: 60%;
- margin-bottom: var(--spacing-3);
-}
-
-.skeleton-card .skeleton-content {
- height: var(--font-size-sm);
- width: 100%;
- margin-bottom: var(--spacing-1);
-}
-
-.skeleton-card .skeleton-content:nth-child(2) {
- width: 80%;
-}
-
-.skeleton-card .skeleton-content:nth-child(3) {
- width: 90%;
-}
-
-/* Loading overlay */
-.loading-overlay {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(var(--color-surface-rgb), 0.8);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 10;
- opacity: 0;
- transition: opacity var(--transition-fast);
- pointer-events: none;
-}
-
-.loading-overlay.active {
- opacity: 1;
- pointer-events: auto;
-}
-
-/* Loading spinner */
-.loading-spinner {
- width: 40px;
- height: 40px;
- border: 3px solid var(--color-surface-variant);
- border-top: 3px solid var(--color-primary);
- border-radius: 50%;
- animation: spin 1s linear infinite;
-}
-
-/* Loading bar */
-.loading-bar {
- width: 100%;
- height: 3px;
- background: var(--color-surface-variant);
- border-radius: 2px;
- overflow: hidden;
- position: relative;
-}
-
-.loading-bar::after {
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
- animation: loading-bar-anim 1.5s ease-in-out infinite;
-}
-
-@keyframes loading-bar-anim {
- 0% { transform: translateX(-100%); }
- 100% { transform: translateX(100%); }
-}
-
-/* =================================================================
- STATEFUL COMPONENTS - Interactive States
- ================================================================= */
-
-/* State utilities for dynamic components */
-.state-loading {
- position: relative;
- overflow: hidden;
-}
-
-.state-loading::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
- animation: state-loading-shimmer 2s infinite;
- z-index: 1;
-}
-
-@keyframes state-loading-shimmer {
- 0% { transform: translateX(-100%); }
- 100% { transform: translateX(100%); }
-}
-
-.state-disabled {
- opacity: 0.6;
- pointer-events: none;
-}
-
-.state-expanded {
- transform: rotate(180deg);
-}
-
-.state-collapsed {
- transform: rotate(0deg);
-}
-
-.state-active {
- background: var(--color-primary);
- color: var(--color-on-primary);
-}
-
-.state-inactive {
- background: var(--color-surface-variant);
- color: var(--color-on-surface);
-}
-
/* =================================================================
VIDEO HEADER - Top section of video area
================================================================= */
diff --git a/static/css/icons.css b/static/css/icons.css
index b615084..189c161 100644
--- a/static/css/icons.css
+++ b/static/css/icons.css
@@ -1,37 +1,4 @@
-/* =================================================================
- ANIMATIONS
- ================================================================= */
-
-/* Keyframe definitions */
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-@keyframes pulse {
- 0%, 100% { opacity: 1; transform: scale(1); }
- 50% { opacity: 0.8; transform: scale(1.05); }
-}
-
-@keyframes bounce {
- 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
- 40% { transform: translateY(-4px); }
- 60% { transform: translateY(-2px); }
-}
-
-@keyframes fadeIn {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
-}
-
-@keyframes progress-fill {
- 0% { width: 0%; }
- 100% { width: var(--progress-fill-percent, 100%); }
-}
-
-/* =================================================================
- SVG Icon System
- ================================================================= */
+/* SVG Icon System */
.icon {
display: inline-flex;
@@ -39,15 +6,12 @@
justify-content: center;
width: 1em;
height: 1em;
- /* Smooth transitions for hover effects */
- transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.icon svg {
width: 100%;
height: 100%;
fill: currentColor;
- transition: inherit;
}
/* Icon Definitions */
@@ -125,275 +89,3 @@
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16l-4-4m0 0l4-4m-4 4h18'%3E%3C/svg%3E") no-repeat center center;
background-size: contain;
}
-
-/* =================================================================
- ICON SIZE MODIFIERS
- ================================================================= */
-
-/* Extra small icons (12px) */
-.icon-xs {
- width: var(--icon-size-xs);
- height: var(--icon-size-xs);
-}
-
-/* Small icons (16px) - Default fallback */
-.icon-sm {
- width: var(--icon-size-sm);
- height: var(--icon-size-sm);
-}
-
-/* Medium icons (20px) */
-.icon-md {
- width: var(--icon-size-md);
- height: var(--icon-size-md);
-}
-
-/* Large icons (24px) */
-.icon-lg {
- width: var(--icon-size-lg);
- height: var(--icon-size-lg);
-}
-
-/* Extra large icons (32px) */
-.icon-xl {
- width: var(--icon-size-xl);
- height: var(--icon-size-xl);
-}
-
-/* =================================================================
- RESPONSIVE ICON SCALING
- ================================================================= */
-
-/* Responsive size variants that scale with viewport */
-.icon-responsive {
- --current-icon-size: var(--icon-size-sm);
-
- width: var(--current-icon-size);
- height: var(--current-icon-size);
-}
-
-.icon-responsive-xs {
- --current-icon-size: var(--icon-size-responsive-xs);
-
- width: var(--current-icon-size);
- height: var(--current-icon-size);
-}
-
-.icon-responsive-sm {
- --current-icon-size: var(--icon-size-responsive-sm);
-
- width: var(--current-icon-size);
- height: var(--current-icon-size);
-}
-
-.icon-responsive-md {
- --current-icon-size: var(--icon-size-responsive-md);
-
- width: var(--current-icon-size);
- height: var(--current-icon-size);
-}
-
-.icon-responsive-lg {
- --current-icon-size: var(--icon-size-responsive-lg);
-
- width: var(--current-icon-size);
- height: var(--current-icon-size);
-}
-
-.icon-responsive-xl {
- --current-icon-size: var(--icon-size-responsive-xl);
-
- width: var(--current-icon-size);
- height: var(--current-icon-size);
-}
-
-/* =================================================================
- ACCESSIBILITY - Screen Reader Support
- ================================================================= */
-
-/* Screen reader only text - hide visually but available to assistive tech */
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-/* Screen reader only - but show when focused for keyboard users */
-.sr-only:focus {
- position: static;
- width: auto;
- height: auto;
- padding: 0.5rem;
- margin: 0;
- overflow: visible;
- clip: auto;
- white-space: normal;
- background: var(--color-surface);
- color: var(--color-on-surface);
- border-radius: var(--border-radius-md);
- box-shadow: var(--elevation-3);
- z-index: var(--z-tooltip);
-}
-
-/* =================================================================
- FOCUS INDICATORS FOR ICON CONTROLS
- ================================================================= */
-
-/* Base focus styles for interactive icons */
-.icon-interactive:focus {
- outline: 2px solid var(--color-focus);
- outline-offset: 2px;
- border-radius: var(--border-radius-sm);
-}
-
-/* Enhanced focus ring that matches design system */
-.icon-focus-ring {
- position: relative;
-}
-
-.icon-focus-ring:focus::after {
- content: '';
- position: absolute;
- top: -2px;
- left: -2px;
- right: -2px;
- bottom: -2px;
- border: 2px solid var(--color-focus);
- border-radius: var(--border-radius-md);
- z-index: 1;
- pointer-events: none;
-}
-
-/* =================================================================
- ANIMATED ICONS
- ================================================================= */
-
-/* Loading States and Spinners */
-.icon-loading,
-.icon-refresh.icon-loading {
- animation: spin 1s linear infinite;
-}
-
-.icon-spinner {
- display: inline-block;
- width: 1em;
- height: 1em;
- animation: spin 1s linear infinite;
-}
-
-.icon-spinner::before {
- content: '';
- display: inline-block;
- width: 100%;
- height: 100%;
- border: 2px solid var(--color-primary-light);
- border-top: 2px solid var(--color-primary);
- border-radius: 50%;
-}
-
-/* Micro-interaction Animations */
-.icon-pulse {
- animation: pulse 2s ease-in-out infinite;
-}
-
-/* Applied when element is being updated or refreshed */
-.icon-bounce {
- animation: bounce 1s ease-in-out infinite;
-}
-
-/* Smooth fade in for new icons */
-.icon-fade-in {
- animation: fadeIn 0.3s ease-in;
-}
-
-/* =================================================================
- PROGRESS INDICATORS
- ================================================================= */
-
-.progress-indicator {
- display: inline-block;
- position: relative;
- width: 100%;
- height: 4px;
- background-color: var(--color-surface-variant);
- border-radius: 2px;
- overflow: hidden;
-}
-
-.progress-indicator::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 0%;
- background-color: var(--color-primary);
- border-radius: 2px;
- animation: progress-fill 2s ease-out;
-}
-
-/* Customizable progress with CSS variable */
-.progress-indicator-custom {
- --progress-fill-percent: 75%;
-}
-
-.progress-indicator-custom::after {
- animation: progress-fill var(--progress-duration, 1s) ease-out;
-}
-
-/* =================================================================
- HOVER STATE ANIMATIONS
- ================================================================= */
-
-/* Base hover effects for interactive icons */
-.icon:hover,
-.icon-interactive:hover {
- transform: scale(1.1);
-}
-
-/* Specific hover effects for different icon types */
-.icon-refresh:hover {
- color: var(--color-accent);
- animation: spin 0.5s ease-in;
-}
-
-.icon-chat:hover {
- transform: scale(1.1) translateY(-1px);
- color: var(--color-accent);
-}
-
-.icon-baseball:hover {
- animation: bounce 0.6s ease-in-out;
-}
-
-.icon-users:hover {
- transform: scale(1.05) translateY(-1px);
- color: var(--color-secondary);
-}
-
-.icon-wave:hover {
- transform: translateX(2px);
- color: var(--color-accent);
-}
-
-/* Interactive button icons - more pronounced effects */
-.icon-button:hover {
- transform: scale(1.15);
- filter: brightness(1.2);
- transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-/* Icon sets with coordinated hover effects */
-.icon-group .icon:hover {
- z-index: 1;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-/* Override defaults for specific icon types if needed */
-/* Add icon-specific overrides here as needed */
diff --git a/static/css/variables.css b/static/css/variables.css
index b163c6d..f2a6db3 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -277,24 +277,6 @@
--z-tooltip: 1070;
--z-toast: 1080;
- /* =================================================================
- ICON SIZE SCALE
- ================================================================= */
-
- /* Icon Size Scale - Consistent scaling for SVG icons */
- --icon-size-xs: 0.75rem; /* 12px - Small indicators */
- --icon-size-sm: 1rem; /* 16px - Default size */
- --icon-size-md: 1.25rem; /* 20px - Button icons */
- --icon-size-lg: 1.5rem; /* 24px - Navigation elements */
- --icon-size-xl: 2rem; /* 32px - Hero elements */
-
- /* Responsive icon sizes based on viewport */
- --icon-size-responsive-xs: clamp(0.625rem, 2vw, var(--icon-size-xs));
- --icon-size-responsive-sm: clamp(0.875rem, 2.5vw, var(--icon-size-sm));
- --icon-size-responsive-md: clamp(1rem, 3vw, var(--icon-size-md));
- --icon-size-responsive-lg: clamp(1.25rem, 3.5vw, var(--icon-size-lg));
- --icon-size-responsive-xl: clamp(1.5rem, 4vw, var(--icon-size-xl));
-
/* =================================================================
TRANSITIONS & ANIMATIONS
================================================================= */