/**
 * CSS Variables for Pet Match App
 */

:root {
  /* Colors - Fresh Green Nature Theme */
  --primary-color: #2d9f5d; /* Vibrant forest green */
  --primary-hover: #25864e; /* Darker green on hover */
  --primary-light: #80a78f; /* Soft mint green background */
  --primary-color-light-2: #4ec57a; /* Lighter green accent */
  --primary-color-rgb: 45, 159, 93; /* RGB values for primary */
  --secondary-color: #7ec699; /* Sage green */
  --secondary-hover: #6ab485; /* Darker sage on hover */

  --success-color: #34d058; /* Bright success green */
  --danger-color: #e85d4c; /* Soft coral red */
  --warning-color: #f4a825; /* Warm amber */
  --info-color: #3b9dd6; /* Ocean blue */

  --text-primary: #1a3a2e; /* Deep forest green for primary text */
  --text-secondary: #4a6358; /* Medium green-gray */
  --text-muted: #8fa599; /* Soft sage */
  --text-light: #ffffff;

  --icon-free: #999999;
  --icon-free-dark: #484848;
  --icon-plus: #f8006c;
  --icon-plus-dark: #d10000;
  --icon-gold: #ffd700;
  --icon-gold-dark: #e09200;

  --bg-primary: #ffffff;
  --bg-secondary: #f7faf8; /* Very light mint tint */
  --bg-tertiary: #eef5f1; /* Soft green-tinted background */
  --bg-dark: #1a3a2e; /* Deep forest green */

  --border-color: #d4e8dd; /* Light green-tinted border */
  --border-light: #e8f3ed; /* Very light green border */
  --shadow: rgba(45, 159, 93, 0.1); /* Green-tinted shadow */
  --shadow-lg: rgba(45, 159, 93, 0.15); /* Stronger green shadow */

  /* Social Media Colors */
  --facebook-color: #1877f2;
  --google-color: #db4437;
  --instagram-color: #e4405f;

  /* Gradients - Nature-Inspired */
  --gradient-users: linear-gradient(135deg, #2d9f5d 0%, #1e7347 100%);
  --gradient-matches: linear-gradient(135deg, #4ec57a 0%, #2d9f5d 100%);
  --gradient-messages: linear-gradient(135deg, #7ec699 0%, #4ec57a 100%);
  --gradient-revenue: linear-gradient(135deg, #34d058 0%, #2d9f5d 100%);
  --gradient-premium: linear-gradient(135deg, #f4a825 0%, #e89310 100%);
  --gradient-reports: linear-gradient(135deg, #e85d4c 0%, #d4443a 100%);
  --gradient-recommended-badge: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-color-light-2) 100%
  );
  --gradient-recommended-btn: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-color-light-2) 100%
  );
  --gradient-recommended-btn-hover: linear-gradient(
    135deg,
    var(--primary-color-light-2) 0%,
    var(--primary-color) 100%
  );
  --gradient-premium-badge: linear-gradient(
    45deg,
    var(--primary-color),
    var(--primary-hover)
  );

  /* Typography */
  --font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-size-base: 14px;
  --font-size-sm: 12px;
  --font-size-xs: 10px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 6px;
  --spacing-lg: 14px;
  --spacing-xl: 20px;
  --spacing-2xl: 26px;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Card dimensions */
  --card-width: 90vw;
  --card-max-width: 400px;
  --card-height: 70vh;
  --card-max-height: 600px;

  /* Navigation */
  --navbar-height: 47px;
  --navbar-mobile-height: 47px;

  /* Breakpoints (for reference in JS) */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-light: #333333;

    --bg-primary: #1a1a1a;
    --bg-secondary: #252525;
    --bg-tertiary: #303030;
    --bg-dark: #0d0d0d;

    --border-color: #404040;
    --border-light: #353535;
    --shadow: rgba(255, 255, 255, 0.05);
    --shadow-lg: rgba(255, 255, 255, 0.1);
  }
}