/*--------------------------------------------------------------
CSS CUSTOM PROPERTIES (VARIABLES)
This file contains all design tokens organized by category.
Edit these values to update the design system across the entire site.
--------------------------------------------------------------*/

:root {
  /* ============================================================
     COLOR PALETTE
     ============================================================ */
  
  /* Base Colors */
  --white-color: #FFFFFF;
  --black-color: #000;
  
  /* Brand Colors */
  --primary-color: #FF938E;      /* Main brand color - coral/salmon */
  --accent-color: #FF6B63;       /* Accent/CTA color - deeper coral */
  --secondary-color: #FFB5B0;    /* Secondary brand color - lighter coral */
  
  /* Text Colors */
  --heading-color: #FF938E;      /* Headings and important text */
  --body-color: #788094;         /* Regular body text */
  --text-dark: #FF938E;         /* Dark text variant */
  --text-light: #788094;        /* Light text variant */
  --text-muted: #999;           /* Muted text */
  
  /* UI Colors */
  --border-color: #D8DDE1;       /* Default borders */
  --border-light: #EFEFEF;      /* Light borders */
  --border-dark: #E5E5E5;       /* Darker borders */
  
  /* Background Colors */
  --bg-light: #F5F7FA;          /* Light background */
  --bg-lighter: #ECF1F5;        /* Even lighter background */
  --bg-gray: #F8F8F8;           /* Gray background */
  --bg-dark: #2A2A2A;           /* Dark background */
  
  /* Theme Colors */
  --theme-color-1: #FFF2F1;      /* Light coral theme background */
  --theme-color-2: #FF938E;      /* Primary coral */
  --theme-color-3: #FED91F;      /* Yellow accent (complementary) */
  --theme-color-4: #FFF2F1;      /* Light coral theme background */
  --theme-color-5: #FF6B63;      /* Deeper coral */
  
  /* Additional Brand Colors */
  --pink-color: #FF69B4;          /* Pink accent color */
  --violet-color: #551DFF;        /* Violet accent color */
  --orange-secondary: #FF5E14;    /* Orange star rating color */
  --coral-color: #FF938E;         /* Coral color - matches primary */
  
  /* Specific Colors */
  --green-color: #62EC30;        /* Success/positive color */
  --green-secondary: #2EB67D;    /* Secondary green color */
  --red-color: #FF4444;          /* Error/negative color */
  --red-error: #d90d0d;          /* Error red */
  --blue-color: #007BFF;         /* Info color */
  --purple-color: #7341F1;       /* Purple accent */
  --orange-color: #FF6B63;       /* Orange accent - matches deeper coral */
  --yellow-color: #FED91F;       /* Yellow accent */
  
  /* Gray Scale */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-medium: #6C6C6C;        /* Medium gray */
  --gray-light: #EFEFEF;         /* Light gray */
  --light-border: #F0F0F0;       /* Light border color */
  
  /* Dark Colors */
  --dark-green: #0F3A37;         /* Dark green */
  --dark-green-alt: #144138;     /* Alternative dark green */
  
  /* Additional UI Colors found in the CSS */
  --color-rgba-light: rgba(255, 255, 255, 0.1);
  --color-rgba-dark: rgba(0, 0, 0, 0.1);
  --color-rgba-accent: rgba(1, 50, 40, 0.1);
  
  /* Gradient Variables */
  --gradient-primary: linear-gradient(90deg, var(--theme-color-2) 0%, var(--green-secondary) 100%);
  --gradient-accent: linear-gradient(245deg, var(--primary-color) -67.04%, var(--primary-color) 129.05%);
  --gradient-heading: linear-gradient(245deg, var(--heading-color) -67.04%, var(--heading-color) 129.05%);
  --gradient-theme-1: linear-gradient(197deg, var(--theme-color-1) -22.98%, rgba(250, 248, 255, 0) 99.39%);
  --gradient-theme-2: linear-gradient(207deg, var(--theme-color-2) 27.07%, rgba(254, 206, 0, 0) 69.44%);
  --gradient-theme-4: linear-gradient(205deg, var(--theme-color-1) -14.5%, rgba(227, 255, 205, 0) 89.88%);
  --gradient-separator: linear-gradient(90deg, rgba(26, 26, 46, 0) 0%, var(--heading-color) 50%, rgba(26, 26, 46, 0) 100%);
  --gradient-separator-alt: linear-gradient(90deg, rgba(26, 26, 46, 0) 0%, var(--heading-color) 51.5%, rgba(26, 26, 46, 0) 100%);
  
  /* Additional Gradient Variables */
  --gradient-button-hover: linear-gradient(245deg, var(--pink-color) -67.04%, var(--violet-color) 129.05%);
  --gradient-button-alt: linear-gradient(245deg, var(--violet-color) -77.04%, var(--pink-color) 119.05%);
  --gradient-tags-hover: linear-gradient(245deg, var(--pink-color) -67.04%, var(--violet-color) 129.05%);
  --gradient-blue: linear-gradient(90deg, var(--blue-gradient-start) 27.14%, var(--white-color) 100%);
  --gradient-reverse: linear-gradient(90deg, var(--violet-color) 0%, var(--pink-color) 100%);
  --gradient-pricing: linear-gradient(90deg, var(--violet-color) 0%, var(--pink-color) 100%);
  --gradient-purple-green: linear-gradient(90deg, var(--purple-color) 0%, var(--green-secondary) 100%);
  --gradient-green-bright: linear-gradient(211deg, var(--green-color) -15.3%, rgba(250, 248, 255, 0) 94.38%);
  
  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  
  /* Font Families */
  --heading-font: "Sora", sans-serif;
  --body-font: "DM Sans", sans-serif;
  --font-primary: "Sora", sans-serif;
  --font-secondary: "DM Sans", sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  
  /* Responsive Font Sizes */
  --h1-size: 56px;
  --h2-size: 42px;
  --h3-size: 30px;
  --h4-size: 24px;
  --h5-size: 18px;
  --h6-size: 16px;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  
  /* ============================================================
     SPACING
     ============================================================ */
  
  /* Base spacing unit (1rem = 16px) */
  --space-unit: 1rem;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */
  
  /* Common margins and paddings */
  --margin-section: 100px;
  --margin-small: 15px;
  --margin-medium: 25px;
  --margin-large: 50px;
  
  --padding-small: 10px;
  --padding-medium: 20px;
  --padding-large: 30px;
  --padding-xl: 50px;
  
  /* ============================================================
     LAYOUT & COMPONENTS
     ============================================================ */
  
  /* Border Radius */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-full: 50%;
  --radius-rounded: 100px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-all: all 0.3s 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;
  --z-toast: 1080;
  
  /* Container widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
  
  /* ============================================================
     BUTTON STYLES
     ============================================================ */
  
  /* Button Colors */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-color: var(--white-color);
  --btn-primary-border: var(--primary-color);
  
  --btn-secondary-bg: var(--secondary-color);
  --btn-secondary-color: var(--white-color);
  --btn-secondary-border: var(--secondary-color);
  
  --btn-outline-bg: transparent;
  --btn-outline-color: var(--primary-color);
  --btn-outline-border: var(--primary-color);
  
  /* Button Sizes */
  --btn-padding-sm: 8px 16px;
  --btn-padding-md: 12px 24px;
  --btn-padding-lg: 16px 32px;
  
  --btn-font-size-sm: 14px;
  --btn-font-size-md: 16px;
  --btn-font-size-lg: 18px;
  
  /* ============================================================
     FORM ELEMENTS
     ============================================================ */
  
  --input-bg: var(--white-color);
  --input-border: var(--border-color);
  --input-border-focus: var(--primary-color);
  --input-color: var(--heading-color);
  --input-placeholder: var(--body-color);
  
  --input-padding: 12px 16px;
  --input-radius: var(--radius-sm);
  
  /* ============================================================
     BREAKPOINTS
     ============================================================ */
  
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  
  /* Light Background Colors */
  --light-green-bg: #F2FCF7;      /* Light green background */
  --light-gray-bg: #F5F5F5;       /* Light gray background */
  --light-purple-bg: #FAF8FF;     /* Light purple background */
  --light-blue-bg: #F7F7FA;       /* Light blue background */
  --light-beige-bg: #FFF8E9;      /* Light beige background */
  --light-cyan-bg: #DBFCFF;       /* Light cyan background */
  --light-mint-bg: #DDFFF5;       /* Light mint background */
  --light-pink-bg: #FFF2F7;       /* Light pink background */
  --light-yellow-bg: #F4FFCE;     /* Light yellow background */
  --light-teal-bg: #DDFFFC;       /* Light teal background */
  --light-peach-bg: #FFEEE4;      /* Light peach background */
  
  /* Specific Brand Colors */
  --green-bright: #00F043;        /* Bright green */
  --green-success: #00CC61;       /* Success green */
  --purple-light: #936DFF;        /* Light purple */
  --blue-accent: #D5DCFC;         /* Blue accent */
  --blue-gradient-start: #B5BFFF; /* Blue gradient start */
  --pink-accent: #FF5F85;         /* Pink accent */
  
  /* Additional Gradient Variables */
  --gradient-colorful: linear-gradient(270deg, var(--purple-light) 0%, var(--green-success) 100%);
  --gradient-gray: linear-gradient(270deg, var(--gray-medium) 0%, var(--white-color) 100%);
  --gradient-gray-alt: linear-gradient(90deg, var(--gray-medium) 0%, var(--white-color) 100%);
  --gradient-button-alt: linear-gradient(245deg, var(--violet-color) -77.04%, var(--pink-color) 119.05%);
  --gradient-blue: linear-gradient(90deg, var(--blue-gradient-start) 27.14%, var(--white-color) 100%);
  --gradient-reverse: linear-gradient(90deg, var(--violet-color) 0%, var(--pink-color) 100%);
  --gradient-green-bright: linear-gradient(211deg, var(--green-color) -15.3%, rgba(250, 248, 255, 0) 94.38%);
}

/* ============================================================
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS
   ============================================================ */

/* Tablet adjustments */
@media (max-width: 991px) {
  :root {
    --h1-font-size: var(--font-size-6xl);    /* 48px */
    --h2-font-size: var(--font-size-4xl);    /* 36px */
    --h3-font-size: var(--font-size-2xl);    /* 24px */
  }
}

/* Mobile adjustments */
@media (max-width: 575px) {
  :root {
    --h1-font-size: var(--font-size-4xl);    /* 36px */
    --h2-font-size: var(--font-size-3xl);    /* 30px */
    --h3-font-size: var(--font-size-xl);     /* 20px */
    --font-size-base: 14px;                  /* Smaller base on mobile */
  }
}

/* ============================================================
   UTILITY CLASSES FOR EASY VARIABLE ACCESS
   ============================================================ */

/* Color utilities */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-heading { color: var(--heading-color); }
.text-body { color: var(--body-color); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-accent { background-color: var(--bg-accent); }
.bg-dark { background-color: var(--bg-dark); }

/* Typography utilities */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Spacing utilities */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Transition utilities */
.transition-fast { transition: var(--transition-fast); }
.transition-base { transition: var(--transition-base); }
.transition-slow { transition: var(--transition-slow); }
.transition-all { transition: var(--transition-all); }