/*
 * Modern Anime MMORPG Design System
 * A comprehensive design token library for a modern anime gaming experience
 * Theme: Soft pastels, gentle gradients, glassmorphism
 */

:root {
    /* ===== COLOR PALETTE - ANIME MMORPG ===== */

    /* Primary Colors - Soft Pastels */
    --color-primary: #FFB3C6;
    /* Soft Pink */
    --color-primary-light: #FFD4E0;
    /* Light Pink */
    --color-primary-dark: #FF8FAB;
    /* Medium Pink */
    --color-primary-darker: #FF7096;
    /* Deep Pink */

    /* Secondary Colors - Lavender & Purple Pastels */
    --color-secondary: #C7B3FF;
    /* Soft Lavender */
    --color-secondary-light: #E0D4FF;
    /* Light Lavender */
    --color-secondary-dark: #B399FF;
    /* Medium Lavender */

    /* Tertiary Colors - Sky Blue Pastels */
    --color-tertiary: #B3D9FF;
    /* Soft Sky Blue */
    --color-tertiary-light: #D4ECFF;
    /* Light Sky Blue */
    --color-tertiary-dark: #99C9FF;
    /* Medium Sky Blue */

    /* Accent Colors - Gentle Pastels */
    --color-accent-peach: #FFD4B3;
    /* Soft Peach */
    --color-accent-mint: #B3FFE6;
    /* Soft Mint */
    --color-accent-lilac: #E6B3FF;
    /* Soft Lilac */
    --color-accent-gold: #FFE5B3;
    /* Soft Gold */
    --color-accent-coral: #FFB3B3;
    /* Soft Coral */

    /* Anime Theme Colors */
    --color-sakura: #FFB3D9;
    /* Sakura Pink */
    --color-sky: #B3E5FF;
    /* Anime Sky */
    --color-magic: #D4B3FF;
    /* Magic Purple */
    --color-starlight: #FFF8E6;
    /* Soft Starlight */
    --color-moonlight: #E6F0FF;
    /* Moonlight Blue */

    /* Background Colors - Original Dark Theme */
    --color-bg-primary: #0f0f23;
    /* Dark Blue Purple */
    --color-bg-secondary: #1a1a2e;
    /* Medium Dark */
    --color-bg-tertiary: #16213e;
    /* Tertiary Dark */
    --color-bg-elevated: #1f2937;
    /* Elevated */

    /* Surface Colors - For cards and panels */
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-surface-hover: rgba(255, 255, 255, 0.08);
    --color-surface-active: rgba(255, 255, 255, 0.12);

    /* Text Colors - Light */
    --color-text-primary: #f9fafb;
    /* Primary White */
    --color-text-secondary: #e5e7eb;
    /* Secondary */
    --color-text-muted: #9ca3af;
    /* Muted */
    --color-text-disabled: #6b7280;
    /* Disabled */

    /* Semantic Colors - Soft Versions */
    --color-success: #B3E6C8;
    /* Soft Green */
    --color-success-light: #D4F0DD;
    /* Light Green */
    --color-success-dark: #99D9B3;
    /* Medium Green */
    --color-error: #FFB3B3;
    /* Soft Red/Coral */
    --color-error-light: #FFD4D4;
    /* Light Coral */
    --color-error-dark: #FF9999;
    /* Medium Coral */
    --color-warning: #FFD9B3;
    /* Soft Orange */
    --color-warning-light: #FFECD4;
    /* Light Orange */
    --color-info: #B3D9FF;
    /* Soft Blue */
    --color-info-light: #D4ECFF;
    /* Light Blue */

    /* Border Colors - Subtle */
    --color-border: rgba(199, 179, 255, 0.2);
    --color-border-light: rgba(199, 179, 255, 0.1);
    --color-border-strong: rgba(199, 179, 255, 0.4);

    /* Gradient Definitions - Soft & Gentle */
    --gradient-primary: linear-gradient(135deg, #FFB3C6 0%, #C7B3FF 100%);
    --gradient-secondary: linear-gradient(135deg, #B3D9FF 0%, #C7B3FF 100%);
    --gradient-gold: linear-gradient(135deg, #FFE5B3 0%, #FFD4B3 100%);
    --gradient-hero: linear-gradient(135deg, rgba(255, 179, 198, 0.15) 0%, rgba(199, 179, 255, 0.15) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(255, 248, 245, 0) 0%, rgba(255, 248, 245, 0.9) 100%);

    /* Anime MMORPG Gradients - Soft & Dreamy */
    --gradient-sakura: linear-gradient(135deg, #FFB3D9 0%, #FFD4E6 50%, #FFB3D9 100%);
    --gradient-magic: linear-gradient(135deg, #C7B3FF 0%, #E0D4FF 50%, #B3D9FF 100%);
    --gradient-starlight: linear-gradient(135deg, #FFF8E6 0%, #FFE5B3 50%, #FFD4B3 100%);
    --gradient-rainbow: linear-gradient(135deg, #FFB3C6 0%, #C7B3FF 25%, #B3D9FF 50%, #B3FFE6 75%, #FFE5B3 100%);
    --gradient-sky: linear-gradient(135deg, #B3E5FF 0%, #D4F0FF 50%, #E6F8FF 100%);
    --gradient-dreamy: linear-gradient(135deg, #FFD4E0 0%, #E0D4FF 33%, #D4ECFF 66%, #B3FFE6 100%);

    /* ===== TYPOGRAPHY ===== */

    /* Font Families - Softer Choices */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', 'Segoe UI', sans-serif;
    /* Using Inter instead of Orbitron for softer look */
    --font-heading: 'Inter', sans-serif;

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

    /* Font Weights - Lighter */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    /* Reduced usage */
    --font-extrabold: 800;
    /* Minimal usage */

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

    /* ===== SPACING ===== */
    --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 */

    /* ===== BORDERS ===== */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;

    /* Border Radius - Super Rounded */
    --radius-sm: 1rem;
    /* 16px */
    --radius-md: 1.25rem;
    /* 20px */
    --radius-lg: 1.5rem;
    /* 24px */
    --radius-xl: 2rem;
    /* 32px */
    --radius-2xl: 2.5rem;
    /* 40px */
    --radius-3xl: 3rem;
    /* 48px */
    --radius-full: 9999px;

    /* ===== SHADOWS - Soft & Gentle ===== */
    --shadow-sm: 0 2px 4px 0 rgba(199, 179, 255, 0.08);
    --shadow-md: 0 4px 8px 0 rgba(199, 179, 255, 0.12);
    --shadow-lg: 0 8px 16px 0 rgba(199, 179, 255, 0.16);
    --shadow-xl: 0 12px 24px 0 rgba(199, 179, 255, 0.20);
    --shadow-2xl: 0 16px 32px 0 rgba(199, 179, 255, 0.24);

    /* Gentle Glow Effects */
    --shadow-glow-pink: 0 4px 20px rgba(255, 179, 198, 0.3);
    --shadow-glow-lavender: 0 4px 20px rgba(199, 179, 255, 0.3);
    --shadow-glow-sky: 0 4px 20px rgba(179, 217, 255, 0.3);
    --shadow-glow-gold: 0 4px 20px rgba(255, 229, 179, 0.3);
    --shadow-glow-magic: 0 4px 20px rgba(212, 179, 255, 0.35);
    --shadow-glow-dreamy: 0 6px 24px rgba(199, 179, 255, 0.25);

    /* ===== TRANSITIONS - Slower & Smoother ===== */
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slowest: 600ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Z-INDEX SCALE ===== */
    --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;

    /* ===== BREAKPOINTS (for reference) ===== */
    /* sm: 640px */
    /* md: 768px */
    /* lg: 1024px */
    /* xl: 1280px */
    /* 2xl: 1536px */
}

/* ===== GLASSMORPHISM UTILITIES - Anime Style ===== */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid rgba(199, 179, 255, 0.2);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(30px) saturate(130%);
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    border: 1px solid rgba(199, 179, 255, 0.3);
}

.glass-subtle {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px) saturate(110%);
    -webkit-backdrop-filter: blur(15px) saturate(110%);
    border: 1px solid rgba(199, 179, 255, 0.15);
}

/* ===== ANIMATION UTILITIES ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

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

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

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    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.85;
    }
}

@keyframes gentleFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

@keyframes colorShift {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

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

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

@keyframes softGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 8px currentColor);
    }

    50% {
        filter: drop-shadow(0 0 16px currentColor);
    }
}

@keyframes dreamy {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn var(--transition-base) ease-out;
}

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

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

.animate-slide-in-left {
    animation: slideInLeft var(--transition-slow) ease-out;
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-slow) ease-out;
}

.animate-scale-in {
    animation: scaleIn var(--transition-base) ease-out;
}

.animate-pulse {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-shimmer {
    animation: shimmer 3s linear infinite;
    background: linear-gradient(90deg, transparent, rgba(199, 179, 255, 0.2), transparent);
    background-size: 200% 100%;
}

.animate-glow {
    animation: softGlow 3s ease-in-out infinite;
}

.animate-dreamy {
    animation: dreamy 10s ease-in-out infinite;
    background-size: 200% 200%;
}

/* ===== CUSTOM SCROLLBAR - Pastel Theme ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius-full);
    border: 2px solid var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-primary-dark), var(--color-secondary-dark));
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-bg-secondary);
}