/* ============================================================================
   DESIGN SYSTEM - .NET 10 Blazor Component Library
   ============================================================================
   
   This file defines the foundational design tokens and utilities for all
   components across the application. Following .NET 10 CSS isolation best
   practices, these variables are globally available but components use
   their own .razor.css files for scoped styling.
   
   ============================================================================ */

/* ============================================================================
   1. COLOR PALETTE
   ============================================================================ */

:root {
    /* Primary Brand Colors */
    --color-primary: #594AE2;
    --color-primary-light: #7B68EE;
    --color-primary-dark: #3D2FB8;
    --color-primary-50: #F3F0FF;
    --color-primary-100: #EDE9FE;
    --color-primary-200: #DDD6FE;
    --color-primary-300: #C4B5FD;
    --color-primary-400: #A78BFA;
    --color-primary-500: #8B5CF6;
    --color-primary-600: #7C3AED;
    --color-primary-700: #6D28D9;
    --color-primary-800: #5B21B6;
    --color-primary-900: #4C1D95;

    /* Semantic Colors */
    --color-success: #4CAF50;
    --color-success-light: #81C784;
    --color-success-dark: #2E7D32;
    
    --color-warning: #FBC02D;
    --color-warning-light: #FDD835;
    --color-warning-dark: #F57F17;
    
    --color-error: #F44336;
    --color-error-light: #EF5350;
    --color-error-dark: #C62828;
    
    --color-info: #2196F3;
    --color-info-light: #64B5F6;
    --color-info-dark: #1565C0;

    /* Neutral Colors */
    --color-neutral-50: #FAFAFA;
    --color-neutral-100: #F5F5F5;
    --color-neutral-200: #EEEEEE;
    --color-neutral-300: #E0E0E0;
    --color-neutral-400: #BDBDBD;
    --color-neutral-500: #9E9E9E;
    --color-neutral-600: #757575;
    --color-neutral-700: #616161;
    --color-neutral-800: #424242;
    --color-neutral-900: #212121;

    /* Background Colors */
    --color-background: #FFFFFF;
    --color-background-secondary: #F8F9FA;
    --color-surface: #FFFFFF;
    --color-surface-variant: #F5F5F5;

    /* Text Colors */
    --color-text-primary: #212121;
    --color-text-secondary: #757575;
    --color-text-disabled: #BDBDBD;
    --color-text-inverse: #FFFFFF;

    /* Dark Mode Colors */
    --color-dark-background: #1A1A27;
    --color-dark-surface: #2D2D3D;
    --color-dark-surface-variant: #3A3A4A;
    --color-dark-text-primary: #FFFFFF;
    --color-dark-text-secondary: #B0B0B0;
    --color-dark-text-disabled: #5A5A6A;
}

/* Dark Mode */
.mud-theme-dark {
    --color-background: var(--color-dark-background);
    --color-surface: var(--color-dark-surface);
    --color-surface-variant: var(--color-dark-surface-variant);
    --color-text-primary: var(--color-dark-text-primary);
    --color-text-secondary: var(--color-dark-text-secondary);
    --color-text-disabled: var(--color-dark-text-disabled);
}

/* ============================================================================
   2. TYPOGRAPHY
   ============================================================================ */

:root {
    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                    sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* Font Sizes (Modular Scale 1.125) */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.875rem;     /* 30px */
    --font-size-4xl: 2.25rem;      /* 36px */
    --font-size-5xl: 3rem;         /* 48px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* 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;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
}

/* ============================================================================
   3. SPACING SYSTEM (8px base unit)
   ============================================================================ */

:root {
    --spacing-0: 0;
    --spacing-1: 0.25rem;      /* 4px */
    --spacing-2: 0.5rem;       /* 8px */
    --spacing-3: 0.75rem;      /* 12px */
    --spacing-4: 1rem;         /* 16px */
    --spacing-6: 1.5rem;       /* 24px */
    --spacing-8: 2rem;         /* 32px */
    --spacing-12: 3rem;        /* 48px */
    --spacing-16: 4rem;        /* 64px */
    --spacing-20: 5rem;        /* 80px */
    --spacing-24: 6rem;        /* 96px */
}

/* ============================================================================
   4. BORDER RADIUS
   ============================================================================ */

:root {
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-base: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
}

/* ============================================================================
   5. SHADOWS & ELEVATION
   ============================================================================ */

:root {
    /* Box Shadows (Material Design 3) */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Glass Shadow (for glassmorphism) */
    --shadow-glass-sm: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --shadow-glass-md: 0 8px 32px 0 rgba(31, 38, 135, 0.5);
}

/* ============================================================================
   6. ANIMATIONS & TRANSITIONS
   ============================================================================ */

:root {
    /* 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-linear: linear;

    /* Duration */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
}

/* ============================================================================
   7. BREAKPOINTS
   ============================================================================ */

:root {
    /* Mobile First Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ============================================================================
   8. SAFE AREA & VIEWPORT
   ============================================================================ */

:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);

    --status-bar-height: env(safe-area-inset-top, 24px);
    --navigation-bar-height: env(safe-area-inset-bottom, 0px);
}

/* ============================================================================
   9. Z-INDEX SCALE
   ============================================================================ */

:root {
    --z-hide: -1;
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-notification: 80;
    --z-appbar: 1300;
    --z-drawer: 1200;
}

/* ============================================================================
   10. UTILITY CLASSES
   ============================================================================ */

/* Display Utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }

/* Padding Utilities */
.p-2 { padding: var(--spacing-2); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

/* Margin Utilities */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mb-4 { margin-bottom: var(--spacing-4); }

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.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); }

/* Color Utilities */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.bg-primary { background-color: var(--color-primary); }
.bg-surface { background-color: var(--color-surface); }

/* Border Radius Utilities */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-base); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* Width & Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Transitions */
.transition { transition: all var(--duration-200) var(--ease-in-out); }
.transition-fast { transition: all var(--duration-100) var(--ease-in-out); }
.transition-slow { transition: all var(--duration-300) var(--ease-in-out); }

/* ============================================================================
   11. RESPONSIVE UTILITIES
   ============================================================================ */

@media (max-width: 640px) {
    .hide-sm { display: none; }
    .show-sm { display: block; }
}

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

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

/* ============================================================================
   12. ANIMATION DEFINITIONS
   ============================================================================ */

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

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

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

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Animation Classes */
.animate-fadeIn { animation: fadeIn var(--duration-300) var(--ease-in-out); }
.animate-slideInUp { animation: slideInUp var(--duration-300) var(--ease-out); }
.animate-slideInDown { animation: slideInDown var(--duration-300) var(--ease-out); }
.animate-slideInLeft { animation: slideInLeft var(--duration-300) var(--ease-out); }
.animate-slideInRight { animation: slideInRight var(--duration-300) var(--ease-out); }
.animate-scaleIn { animation: scaleIn var(--duration-300) var(--ease-out); }
.animate-pulse { animation: pulse var(--duration-1000) var(--ease-linear) infinite; }

/* ============================================================================
   13. ACCESSIBILITY
   ============================================================================ */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================================
   14. PRINT STYLES
   ============================================================================ */

@media print {
    .no-print { display: none; }
    body {
        background: white;
        color: black;
    }
}

/* ============================================================================
   15. MOBILE VIEWPORT FIX
   ============================================================================ */

@supports (-webkit-touch-callout: none) {
    html {
        height: 100vh;
        height: -webkit-fill-available;
    }

    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* No glass effect (for exceptions) */
.no-glass {
    background: var(--color-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

/* ============================================================================
   16. CUSTOM UTILITY CLASSES (Dashboard & Pages)
   ============================================================================ */

/* Modern Card Enhancements */
.modern-card {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stat Cards */
.stat-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stat-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stat-card-stack {
    height: 100%;
    min-height: 140px;
}

.stat-number {
    line-height: 1.2;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.stat-chip {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Hover Lift Effect */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.mud-theme-dark .hover-lift:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Font Weight Utilities */
.fw-bold {
    font-weight: 700;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-light {
    font-weight: 300;
}

/* Glass AppBar */
.glass-appbar {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.mud-theme-dark .glass-appbar {
    background: rgba(26, 26, 39, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Pricing Card Styling */
.pricing-card {
    position: relative;
    transition: all var(--duration-300) var(--ease-in-out);
    border-radius: var(--radius-lg);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.pricing-card-featured {
    border: 2px solid var(--color-primary);
    box-shadow: 0 8px 32px rgba(89, 74, 226, 0.2);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    right: 24px;
}

.pricing-button {
    margin-top: auto;
    font-weight: 600;
}