/* CSS Custom Properties - Cartoon Style Variables */
:root {
  /* Primary Colors - Bright and Fun */
  --fp-primary: #FF6B9D;
  --fp-primary-light: #FF8FB3;
  --fp-primary-dark: #E5527A;
  --fp-secondary: #4ECDC4;
  --fp-secondary-light: #6FD9D1;
  --fp-secondary-dark: #3BA99F;
  --fp-accent: #FFE66D;
  --fp-accent-light: #FFED8A;
  --fp-accent-dark: #E5CC5A;
  
  /* Category Colors */
  --fp-adventure: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 100%);
  --fp-puzzle: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
  --fp-sports: linear-gradient(135deg, #FFE66D 0%, #FF6B6B 100%);
  --fp-girls: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
  --fp-casual: linear-gradient(135deg, #A8EDEA 0%, #FED6E3 100%);
  --fp-clicker: linear-gradient(135deg, #9F7AEA 0%, #B794F4 100%);
  
  /* Background Colors */
  --fp-bg-primary: #FAFBFF;
  --fp-bg-secondary: #F0F4FF;
  --fp-bg-tertiary: #E8F0FE;
  --fp-bg-card: #FFFFFF;
  --fp-bg-overlay: rgba(0, 0, 0, 0.5);
  --fp-bg-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* Text Colors */
  --fp-text-primary: #2D3748;
  --fp-text-secondary: #4A5568;
  --fp-text-muted: #718096;
  --fp-text-light: #A0AEC0;
  --fp-text-white: #FFFFFF;
  --fp-text-dark: #1A202C;
  
  /* Border Colors */
  --fp-border-light: #E2E8F0;
  --fp-border-medium: #CBD5E0;
  --fp-border-dark: #A0AEC0;
  
  /* Shadow Colors */
  --fp-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --fp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --fp-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
  --fp-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  --fp-shadow-colored: 0 8px 25px rgba(255, 107, 157, 0.3);
  
  /* Gradients */
  --fp-gradient-primary: linear-gradient(135deg, #FF6B9D 0%, #4ECDC4 100%);
  --fp-gradient-secondary: linear-gradient(135deg, #FFE66D 0%, #FF6B6B 100%);
  --fp-gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --fp-gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F7FAFC 100%);
  
  /* Spacing */
  --fp-space-xs: 0.25rem;   /* 4px */
  --fp-space-sm: 0.5rem;    /* 8px */
  --fp-space-md: 1rem;      /* 16px */
  --fp-space-lg: 1.5rem;    /* 24px */
  --fp-space-xl: 2rem;      /* 32px */
  --fp-space-2xl: 3rem;     /* 48px */
  --fp-space-3xl: 4rem;     /* 64px */
  --fp-space-4xl: 6rem;     /* 96px */
  
  /* Typography */
  --fp-font-primary: 'Fredoka', 'Comic Sans MS', cursive;
  --fp-font-secondary: 'Comic Neue', 'Comic Sans MS', cursive;
  --fp-font-mono: 'Courier New', monospace;
  
  /* Font Sizes */
  --fp-text-xs: 0.75rem;    /* 12px */
  --fp-text-sm: 0.875rem;   /* 14px */
  --fp-text-base: 1rem;     /* 16px */
  --fp-text-lg: 1.125rem;   /* 18px */
  --fp-text-xl: 1.25rem;    /* 20px */
  --fp-text-2xl: 1.5rem;    /* 24px */
  --fp-text-3xl: 1.875rem;  /* 30px */
  --fp-text-4xl: 2.25rem;   /* 36px */
  --fp-text-5xl: 3rem;      /* 48px */
  --fp-text-6xl: 4rem;      /* 64px */
  
  /* Font Weights */
  --fp-weight-light: 300;
  --fp-weight-normal: 400;
  --fp-weight-medium: 500;
  --fp-weight-semibold: 600;
  --fp-weight-bold: 700;
  
  /* Line Heights */
  --fp-leading-tight: 1.25;
  --fp-leading-normal: 1.5;
  --fp-leading-relaxed: 1.75;
  
  /* Border Radius */
  --fp-radius-sm: 0.375rem;   /* 6px */
  --fp-radius-md: 0.5rem;     /* 8px */
  --fp-radius-lg: 0.75rem;    /* 12px */
  --fp-radius-xl: 1rem;       /* 16px */
  --fp-radius-2xl: 1.5rem;    /* 24px */
  --fp-radius-3xl: 2rem;      /* 32px */
  --fp-radius-full: 9999px;
  
  /* Transitions */
  --fp-transition-fast: 150ms ease-in-out;
  --fp-transition-normal: 250ms ease-in-out;
  --fp-transition-slow: 350ms ease-in-out;
  
  /* Z-index */
  --fp-z-dropdown: 1000;
  --fp-z-sticky: 1020;
  --fp-z-fixed: 1030;
  --fp-z-modal-backdrop: 1040;
  --fp-z-modal: 1050;
  --fp-z-popover: 1060;
  --fp-z-tooltip: 1070;
  
  /* Breakpoints (for reference in media queries) */
  --fp-breakpoint-sm: 640px;
  --fp-breakpoint-md: 768px;
  --fp-breakpoint-lg: 1024px;
  --fp-breakpoint-xl: 1280px;
  --fp-breakpoint-2xl: 1536px;
  
  /* Animation Durations */
  --fp-duration-fast: 0.15s;
  --fp-duration-normal: 0.25s;
  --fp-duration-slow: 0.35s;
  
  /* Container Sizes */
  --fp-container-sm: 640px;
  --fp-container-md: 768px;
  --fp-container-lg: 1024px;
  --fp-container-xl: 1280px;
  --fp-container-2xl: 1400px;
  
  /* Game Card Sizes */
  --fp-card-width: 280px;
  --fp-card-height: 200px;
  --fp-card-image-height: 160px;
  
  /* Header Height */
  --fp-header-height: 80px;
  
  /* Fun Animation Variables */
  --fp-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --fp-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Loading Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Bounce Animation */
@keyframes fp-bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.fp-animate-bounce {
  animation: fp-bounce 1s ease-in-out;
}

/* Dark Mode Variables (Optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --fp-bg-primary: #1A202C;
    --fp-bg-secondary: #2D3748;
    --fp-bg-tertiary: #4A5568;
    --fp-bg-card: #2D3748;
    --fp-text-primary: #F7FAFC;
    --fp-text-secondary: #E2E8F0;
    --fp-text-muted: #A0AEC0;
    --fp-border-light: #4A5568;
    --fp-border-medium: #718096;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fp-transition-fast: 0ms;
    --fp-transition-normal: 0ms;
    --fp-transition-slow: 0ms;
    --fp-duration-fast: 0ms;
    --fp-duration-normal: 0ms;
    --fp-duration-slow: 0ms;
  }
}