@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap");

:root {
    --primary-color: #904ebf;
    --primary-light: #a66fe6;
    --primary-dark: #703d99;
    --primary-rgb: 144, 78, 191;
    --secondary-color: #3b82f6;
    --secondary-light: #60a5fa;
    --secondary-rgb: 59, 130, 246;
    --dark-bg: #0f0f15;
    --bg-dark: var(--dark-bg);
    --dark-bg-rgb: 15, 15, 21;
    --dark-card: #1a1a22;
    --dark-card-rgb: 26, 26, 34;
    --dark-card-hover: #1f1f28;
    --text-light: #e5e5e5;
    --text-muted: #b0b0b0;
    --border-color: #333333;
    --border-light-color: #4a4a52;
    --disabled-opacity: 0.6;
    --glow-color-primary: rgba(var(--primary-rgb), 0.6);
    --glow-color-secondary: rgba(var(--secondary-rgb), 0.6);
    --glow-color-premium: rgba(250, 204, 21, 0.6);
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --warning-text-color: #1a1a1a;
    --font-main: "Montserrat", sans-serif;
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.35s;
    --transition-speed-slow: 0.6s;
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --nav-height: 85px;
    --card-animation-delay-factor: 0.15s;
    --rarity-common: #9ca3af;
    --rarity-uncommon: #60a5fa;
    --rarity-rare: var(--primary-light);
    --rarity-epic: #f59e0b;
    --rarity-legendary: #ef4444;
    --primary: #8b5cf6;
    --card-dark: #1f1f2e;
    --border: #374151;
    --glass: rgba(255, 255, 255, 0.07);
    --header-bg: rgba(var(--dark-card-rgb), 0.95);
    --header-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
    --header-border: 1px solid rgba(var(--border-light-rgb), 0.15);
    --text-color-default: var(--text-muted);
    --text-color-hover-active: #ffffff;
    --link-padding-desktop: 0.75rem 1.3rem;
    --link-padding-mobile: 1rem 1.8rem;
    --link-border-radius: 8px;
    --link-hover-bg: rgba(255, 255, 255, 0.1);
    --link-active-bg-mobile: rgba(var(--primary-rgb), 0.3);
    --link-active-color-mobile: var(--primary-light);
    --underline-height: 3px;
    --underline-width: 65%;
    --underline-gradient: linear-gradient(to right, var(--primary-light), var(--secondary-light));
    --nav-height-desktop: 70px;
    --nav-height-mobile: 60px;
}

body {
    font-family: var(--font-main);
}