/**
 * Design System - Freguesia App
 * 
 * Utility classes and component patterns built on design tokens.
 * Tokens are defined in design-tokens.css.
 * 
 * IMPORTANT: Utility classes use 'ds-' prefix to avoid conflicts
 * with Tailwind CSS utilities. Legacy unprefixed classes are kept
 * for backward compatibility but should be migrated.
 * 
 * CSS Layer Architecture (for cascade control):
 * 1. reset - Browser resets
 * 2. tokens - CSS custom properties
 * 3. bootstrap-bridge - Bootstrap variable mappings
 * 4. base - Base element styles
 * 5. components - Component patterns
 * 6. utilities - Utility classes
 * 
 * Based on:
 * - 8-point grid system
 * - 60-30-10 color distribution
 * - UX Psychology principles
 * - Performance-first animations
 */

/* CSS Layer Order Declaration */
@layer reset, tokens, bootstrap-bridge, base, components, utilities;

/* 
 * Note: Design tokens and CSS bridge are loaded via application.blade.php
 * to ensure proper loading order and avoid @import layer() compatibility issues.
 * 
 * Loading order in application.blade.php:
 * 1. design-tokens.css (CSS variables)
 * 2. design-system.css (this file)
 * 3. css-bridge.css (Bootstrap mappings)
 */

/* ============================================
   1. CSS Custom Properties (Legacy - now in design-tokens.css)
   Kept here for backward compatibility
   ============================================ */

:root {
    /* === Color Palette === */
    /* Primary - Blue (Trust, Professional) */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    /* Secondary - Emerald/Teal (Growth, Nature) */
    --color-secondary-50: #ecfdf5;
    --color-secondary-100: #d1fae5;
    --color-secondary-200: #a7f3d0;
    --color-secondary-300: #6ee7b7;
    --color-secondary-400: #34d399;
    --color-secondary-500: #10b981;
    --color-secondary-600: #059669;
    --color-secondary-700: #047857;
    --color-secondary-800: #065f46;
    --color-secondary-900: #064e3b;

    /* Accent - Amber (Energy, Warmth) */
    --color-accent-50: #fffbeb;
    --color-accent-100: #fef3c7;
    --color-accent-200: #fde68a;
    --color-accent-300: #fcd34d;
    --color-accent-400: #fbbf24;
    --color-accent-500: #f59e0b;
    --color-accent-600: #d97706;
    --color-accent-700: #b45309;
    --color-accent-800: #92400e;
    --color-accent-900: #78350f;

    /* Neutrals */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;

    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* === Spacing (8-point grid) === */
    --space-0: 0;
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */

    /* === Typography === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-mono: 'Fira Code', 'Monaco', monospace;

    /* Font Sizes (1.25 scale) */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */
    --text-6xl: 3.75rem;
    /* 60px */
    --text-7xl: 4.5rem;
    /* 72px */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* === Shadows (Elevation System) === */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Colored Shadows */
    --shadow-primary: 0 10px 40px -10px rgb(59 130 246 / 0.4);
    --shadow-secondary: 0 10px 40px -10px rgb(16 185 129 / 0.4);
    --shadow-accent: 0 10px 40px -10px rgb(245 158 11 / 0.4);

    /* Hover Shadows (for cards) */
    --shadow-hover: 0 20px 40px -10px rgb(0 0 0 / 0.15), 0 10px 20px -10px rgb(0 0 0 / 0.1);

    /* === Border Radius === */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 6px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* === Transitions === */
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --transition-slower: 500ms;

    /* Easing Functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* === Z-Index Scale === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* === Glassmorphism === */
    --glass-bg: rgb(255 255 255 / 0.8);
    --glass-bg-dark: rgb(17 24 39 / 0.8);
    --glass-border: rgb(255 255 255 / 0.2);
    --glass-blur: 12px;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
    :root {
        --glass-bg: rgb(17 24 39 / 0.8);
        --glass-border: rgb(255 255 255 / 0.1);
    }
}

/* ============================================
   2. Keyframe Animations
   ============================================ */

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* Fade In Scale */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide In Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Float Animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

/* Pulse Glow */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgb(59 130 246 / 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgb(59 130 246 / 0.6);
    }
}

/* Gentle Pulse */
@keyframes gentlePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Shimmer (for skeletons) */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Shake (for errors) */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Spin */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Gradient Shift */
@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* ============================================
   3. Animation Utility Classes
   ============================================ */

.animate-fade-in {
    animation: fadeIn var(--transition-slow) var(--ease-out) forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s var(--ease-out) forwards;
    opacity: 0;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s var(--ease-out) forwards;
    opacity: 0;
}

.animate-fade-in-scale {
    animation: fadeInScale 0.4s var(--ease-out) forwards;
    opacity: 0;
}

.animate-slide-in-left {
    animation: slideInLeft 0.5s var(--ease-out) forwards;
    opacity: 0;
}

.animate-slide-in-right {
    animation: slideInRight 0.5s var(--ease-out) forwards;
    opacity: 0;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-slow {
    animation: float 8s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 7s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

.animate-gentle-pulse {
    animation: gentlePulse 2s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg,
            var(--color-gray-200) 25%,
            var(--color-gray-100) 50%,
            var(--color-gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.animate-shake {
    animation: shake 0.5s var(--ease-out);
}

.animate-bounce-in {
    animation: bounceIn 0.6s var(--ease-spring) forwards;
    opacity: 0;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Staggered Animation Delays */
.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

.stagger-4 {
    animation-delay: 0.4s;
}

.stagger-5 {
    animation-delay: 0.5s;
}

.stagger-6 {
    animation-delay: 0.6s;
}

/* ============================================
   4. Visual Effect Utilities
   ============================================ */

/* Glassmorphism */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.glass-strong {
    background: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(255 255 255 / 0.3);
}

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-700));
}

.bg-gradient-accent {
    background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
}

.bg-gradient-hero {
    background: linear-gradient(135deg,
            var(--color-primary-600) 0%,
            var(--color-secondary-600) 50%,
            var(--color-primary-700) 100%);
}

.bg-gradient-subtle {
    background: linear-gradient(180deg,
            var(--color-gray-50) 0%,
            var(--color-gray-100) 100%);
}

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-animated {
    background: linear-gradient(135deg,
            var(--color-primary-600),
            var(--color-secondary-500),
            var(--color-primary-600));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

/* Glow Effects */
.glow-primary {
    box-shadow: 0 0 20px rgb(59 130 246 / 0.3),
        0 0 40px rgb(59 130 246 / 0.2);
}

.glow-secondary {
    box-shadow: 0 0 20px rgb(16 185 129 / 0.3),
        0 0 40px rgb(16 185 129 / 0.2);
}

.glow-accent {
    box-shadow: 0 0 20px rgb(245 158 11 / 0.3),
        0 0 40px rgb(245 158 11 / 0.2);
}

/* Overlay Gradients */
.overlay-gradient-bottom {
    background: linear-gradient(to top,
            rgb(0 0 0 / 0.7) 0%,
            rgb(0 0 0 / 0.3) 50%,
            transparent 100%);
}

.overlay-gradient-top {
    background: linear-gradient(to bottom,
            rgb(0 0 0 / 0.5) 0%,
            transparent 100%);
}

/* ============================================
   5. Interactive State Utilities
   ============================================ */

/* Card Hover Lift */
.hover-lift {
    transition: transform var(--transition-base) var(--ease-out),
        box-shadow var(--transition-base) var(--ease-out);
}

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

/* Card Hover Lift Large */
.hover-lift-lg {
    transition: transform var(--transition-slow) var(--ease-out),
        box-shadow var(--transition-slow) var(--ease-out);
}

.hover-lift-lg:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

/* Scale on Hover */
.hover-scale {
    transition: transform var(--transition-base) var(--ease-out);
}

.hover-scale:hover {
    transform: scale(1.02);
}

.hover-scale-sm {
    transition: transform var(--transition-base) var(--ease-out);
}

.hover-scale-sm:hover {
    transform: scale(1.05);
}

/* Image Zoom on Hover */
.hover-zoom {
    overflow: hidden;
}

.hover-zoom img {
    transition: transform var(--transition-slow) var(--ease-out);
}

.hover-zoom:hover img {
    transform: scale(1.08);
}

/* Button Press Effect */
.press-effect {
    transition: transform var(--transition-fast) var(--ease-out);
}

.press-effect:active {
    transform: scale(0.97);
}

/* Glow on Hover */
.hover-glow {
    transition: box-shadow var(--transition-base) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-primary);
}

/* Border Glow on Focus */
.focus-glow:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.3);
}

/* ============================================
   6. Component Patterns
   ============================================ */

/* Premium Card */
.card-premium {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base) var(--ease-out);
    overflow: hidden;
}

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

/* Glass Card */
.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

/* Input Premium */
.input-premium {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    background: var(--color-gray-50);
    transition: all var(--transition-base) var(--ease-out);
}

.input-premium:focus {
    outline: none;
    border-color: var(--color-primary-500);
    background: white;
    box-shadow: 0 0 0 4px rgb(59 130 246 / 0.1);
}

/* Button Premium */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base) var(--ease-out);
    cursor: pointer;
}

.btn-premium:active {
    transform: scale(0.97);
}

.btn-primary-premium {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    color: white;
    border: none;
    box-shadow: var(--shadow-md), 0 4px 20px rgb(59 130 246 / 0.3);
}

.btn-primary-premium:hover {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    box-shadow: var(--shadow-lg), 0 8px 30px rgb(59 130 246 / 0.4);
    transform: translateY(-2px);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
}

.badge-primary {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.badge-secondary {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

.badge-accent {
    background: var(--color-accent-100);
    color: var(--color-accent-700);
}

/* Interactive Card */
.card-interactive {
    cursor: pointer;
    transition: all var(--transition-base) var(--ease-out);
}

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

.card-interactive:active {
    transform: translateY(-2px);
}

/* Enhanced Glow Variants */
.glow-blue-soft {
    box-shadow: 0 0 30px rgb(59 130 246 / 0.15);
}

.glow-green-soft {
    box-shadow: 0 0 30px rgb(16 185 129 / 0.15);
}

.glow-purple-soft {
    box-shadow: 0 0 30px rgb(147 51 234 / 0.15);
}

/* Hover Glow Variants */
.hover-glow-blue:hover {
    box-shadow: 0 0 30px rgb(59 130 246 / 0.25), var(--shadow-xl);
}

.hover-glow-green:hover {
    box-shadow: 0 0 30px rgb(16 185 129 / 0.25), var(--shadow-xl);
}

.hover-glow-purple:hover {
    box-shadow: 0 0 30px rgb(147 51 234 / 0.25), var(--shadow-xl);
}

/* Decorative Quote */
.quote-decorative::before {
    content: '"';
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--color-gray-100);
    font-family: Georgia, serif;
    transition: color var(--transition-base) var(--ease-out);
}

.group:hover .quote-decorative::before {
    color: var(--color-primary-100);
}

/* Animated Underline */
.underline-animated {
    position: relative;
    display: inline-block;
}

.underline-animated::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500));
    border-radius: var(--radius-full);
    animation: underlineGrow 0.6s var(--ease-out) forwards;
}

@keyframes underlineGrow {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 60px;
        opacity: 1;
    }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg,
            var(--color-gray-200) 25%,
            var(--color-gray-100) 50%,
            var(--color-gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ============================================
   7. Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-fade-in-scale,
    .animate-slide-in-left,
    .animate-slide-in-right,
    .animate-bounce-in {
        opacity: 1;
    }

    .animate-float,
    .animate-float-slow,
    .animate-float-delayed,
    .animate-pulse-glow,
    .animate-gentle-pulse,
    .animate-shimmer,
    .animate-gradient,
    .animate-spin {
        animation: none;
    }
}

/* ============================================
   8. Dark Mode Overrides
   ============================================ */

@media (prefers-color-scheme: dark) {
    .card-premium {
        background: var(--color-gray-800);
        border: 1px solid var(--color-gray-700);
    }

    .input-premium {
        background: var(--color-gray-800);
        border-color: var(--color-gray-700);
        color: white;
    }

    .input-premium:focus {
        background: var(--color-gray-900);
        border-color: var(--color-primary-500);
    }

    .skeleton {
        background: linear-gradient(90deg,
                var(--color-gray-700) 25%,
                var(--color-gray-600) 50%,
                var(--color-gray-700) 75%);
        background-size: 200% 100%;
    }

    .badge-primary {
        background: rgb(59 130 246 / 0.2);
        color: var(--color-primary-300);
    }

    .badge-secondary {
        background: rgb(16 185 129 / 0.2);
        color: var(--color-secondary-300);
    }

    .badge-accent {
        background: rgb(245 158 11 / 0.2);
        color: var(--color-accent-300);
    }
}

/* ============================================
   9. Print Styles
   ============================================ */

@media print {

    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-fade-in-scale {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .glass,
    .glass-dark,
    .glass-strong,
    .ds-glass,
    .ds-glass-dark,
    .ds-glass-strong {
        background: white !important;
        backdrop-filter: none !important;
    }
}

/* ============================================
   10. Namespaced Utilities (ds- prefix)
   
   These are the preferred classes to use to avoid
   conflicts with Tailwind CSS. The unprefixed versions
   above are kept for backward compatibility.
   ============================================ */

/* DS Glassmorphism */
.ds-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.ds-glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.ds-glass-strong {
    background: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(255 255 255 / 0.3);
}

.ds-glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* DS Hover Effects */
.ds-hover-lift {
    transition: transform var(--transition-base) var(--ease-out),
        box-shadow var(--transition-base) var(--ease-out);
}

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

.ds-hover-lift-lg {
    transition: transform var(--transition-slow) var(--ease-out),
        box-shadow var(--transition-slow) var(--ease-out);
}

.ds-hover-lift-lg:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.ds-hover-scale {
    transition: transform var(--transition-base) var(--ease-out);
}

.ds-hover-scale:hover {
    transform: scale(1.02);
}

.ds-hover-scale-sm {
    transition: transform var(--transition-base) var(--ease-out);
}

.ds-hover-scale-sm:hover {
    transform: scale(1.05);
}

.ds-hover-glow {
    transition: box-shadow var(--transition-base) var(--ease-out);
}

.ds-hover-glow:hover {
    box-shadow: var(--shadow-primary);
}

/* DS Gradient Backgrounds */
.ds-bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
}

.ds-bg-gradient-secondary {
    background: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-700));
}

.ds-bg-gradient-accent {
    background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
}

.ds-bg-gradient-hero {
    background: linear-gradient(135deg,
            var(--color-primary-600) 0%,
            var(--color-secondary-600) 50%,
            var(--color-primary-700) 100%);
}

/* DS Text Gradient */
.ds-text-gradient {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* DS Glow Effects */
.ds-glow-primary {
    box-shadow: 0 0 20px rgb(59 130 246 / 0.3),
        0 0 40px rgb(59 130 246 / 0.2);
}

.ds-glow-secondary {
    box-shadow: 0 0 20px rgb(16 185 129 / 0.3),
        0 0 40px rgb(16 185 129 / 0.2);
}

.ds-glow-accent {
    box-shadow: 0 0 20px rgb(245 158 11 / 0.3),
        0 0 40px rgb(245 158 11 / 0.2);
}

/* DS Component Patterns */
.ds-card-premium {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base) var(--ease-out);
    overflow: hidden;
}

.ds-card-premium:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.ds-card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.ds-card-interactive {
    cursor: pointer;
    transition: all var(--transition-base) var(--ease-out);
}

.ds-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.ds-card-interactive:active {
    transform: translateY(-2px);
}

/* DS Button Premium */
.ds-btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base) var(--ease-out);
    cursor: pointer;
}

.ds-btn-premium:active {
    transform: scale(0.97);
}

.ds-btn-primary-premium {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    color: white;
    border: none;
    box-shadow: var(--shadow-md), 0 4px 20px rgb(59 130 246 / 0.3);
}

.ds-btn-primary-premium:hover {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    box-shadow: var(--shadow-lg), 0 8px 30px rgb(59 130 246 / 0.4);
    transform: translateY(-2px);
}

/* DS Input Premium */
.ds-input-premium {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    background: var(--color-gray-50);
    transition: all var(--transition-base) var(--ease-out);
}

.ds-input-premium:focus {
    outline: none;
    border-color: var(--color-primary-500);
    background: white;
    box-shadow: 0 0 0 4px rgb(59 130 246 / 0.1);
}

/* DS Badge */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
}

.ds-badge-primary {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.ds-badge-secondary {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

.ds-badge-accent {
    background: var(--color-accent-100);
    color: var(--color-accent-700);
}

/* DS Skeleton Loading */
.ds-skeleton {
    background: linear-gradient(90deg,
            var(--color-gray-200) 25%,
            var(--color-gray-100) 50%,
            var(--color-gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* DS Press Effect */
.ds-press-effect {
    transition: transform var(--transition-fast) var(--ease-out);
}

.ds-press-effect:active {
    transform: scale(0.97);
}

/* DS Focus Glow */
.ds-focus-glow:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.3);
}

/* DS Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    .ds-card-premium {
        background: var(--color-gray-800);
        border: 1px solid var(--color-gray-700);
    }

    .ds-input-premium {
        background: var(--color-gray-800);
        border-color: var(--color-gray-700);
        color: white;
    }

    .ds-input-premium:focus {
        background: var(--color-gray-900);
        border-color: var(--color-primary-500);
    }

    .ds-skeleton {
        background: linear-gradient(90deg,
                var(--color-gray-700) 25%,
                var(--color-gray-600) 50%,
                var(--color-gray-700) 75%);
        background-size: 200% 100%;
    }

    .ds-badge-primary {
        background: rgb(59 130 246 / 0.2);
        color: var(--color-primary-300);
    }

    .ds-badge-secondary {
        background: rgb(16 185 129 / 0.2);
        color: var(--color-secondary-300);
    }

    .ds-badge-accent {
        background: rgb(245 158 11 / 0.2);
        color: var(--color-accent-300);
    }
}