/* ============================================
   STYLES.CSS - Variables, Base Styles, Shared Utilities
   ============================================
   Contains:
   - Font imports
   - CSS Variables (Light Theme)
   - CSS Variables (Dark Theme)
   - Base styles
   - Animation keyframes
   - Basic utilities
   ============================================ */

/* /app/static/css/styles.css */

/* Import Nunito font - friendly, rounded typography */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ============================================
   CSS VARIABLES - Light Theme (Default)
   ============================================ */
:root {
    /* Primary Colors (Microsoft Blue) */
    --primary: #0078d4;
    --primary-hover: #106ebe;
    --primary-soft: #e6f2fa;
    --primary-light: rgba(0, 120, 212, 0.08);

    /* Soft, Warm Neutrals */
    --background: #faf9f7;
    --surface: #ffffff;
    --surface-hover: #f5f4f2;
    --surface-elevated: #ffffff;

    /* Borders */
    --border: #e8e6e3;
    --border-soft: #f0eeeb;
    --border-focus: var(--primary);
    --border-hover: #d0cec9;

    /* Text Colors */
    --text-primary: #2d3748;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* Semantic Colors - Soft Variants */
    --success: #22c55e;
    --success-soft: #dcfce7;
    --success-text: #166534;

    --warning: #f59e0b;
    --warning-soft: #fef3c7;
    --warning-text: #92400e;

    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --danger-text: #991b1b;

    --info: #0ea5e9;
    --info-soft: #e0f2fe;
    --info-text: #0369a1;

    /* Legacy color mappings (for backwards compatibility) */
    --primary-color: var(--primary);
    --secondary-color: #6c757d;
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --info-color: var(--info);
    --light-color: var(--background);
    --dark-color: #343a40;
    --bg-color: var(--background);
    --text-color: var(--text-primary);

    /* Border Radius - Generous and Friendly */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows - Soft and Diffused */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
}

/* ============================================
   CSS VARIABLES - Dark Theme
   ============================================ */
[data-theme="dark"] {
    /* Primary Colors */
    --primary: #4da6ff;
    --primary-hover: #7dbfff;
    --primary-soft: rgba(77, 166, 255, 0.15);
    --primary-light: rgba(77, 166, 255, 0.08);

    /* Dark, Warm Neutrals */
    --background: #1a1a1a;
    --surface: #242424;
    --surface-hover: #2a2a2a;
    --surface-elevated: #2e2e2e;

    /* Borders */
    --border: #3a3a3a;
    --border-soft: #333333;
    --border-focus: var(--primary);
    --border-hover: #4a4a4a;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #1a1a1a;

    /* Semantic Colors - Dark Mode */
    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.15);
    --success-text: #86efac;

    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.15);
    --warning-text: #fcd34d;

    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.15);
    --danger-text: #fca5a5;

    --info: #38bdf8;
    --info-soft: rgba(56, 189, 248, 0.15);
    --info-text: #7dd3fc;

    /* Legacy mappings */
    --bg-color: var(--background);
    --text-color: var(--text-primary);
    --table-header-bg: var(--surface-elevated);
    --table-row-bg: var(--surface);
    --table-row-alt-bg: var(--surface-hover);
    --table-border: var(--border);

    /* Shadows - Darker, more subtle */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* ============================================
   BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

.animate-fade-up {
    animation: fadeUp 0.5s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Staggered animation delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--surface-hover) 25%, var(--surface) 50%, var(--surface-hover) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

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

/* ============================================
   BASIC UTILITIES
   ============================================ */
.hidden { display: none; }
.clickable { cursor: pointer; }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }

/* Navbar - Soft styling */
.navbar-custom {
    background-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
    color: white;
    font-weight: 600;
}