/* Foundation CSS - TourBreak Design System */

*,
*::before,
*::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}

:root {
    /* Colors */
    --primary-color: #b3e59f;
    --accent-color: #446d59;

    --background-color: #121212;
    --secondary-background-color: #1a1a1a;
    --tertiary-background-color: #333333;

    --text-color: #ffffff;
    --secondary-text-color: #989898;
    --tertiary-text-color: #1a1a1a;

    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
    
    /* Content Overlay Colors */
    --overlay-bg-start: rgba(18, 18, 18, 0.98);
    --overlay-bg-30: rgba(18, 18, 18, 0.95);
    --overlay-bg-60: rgba(18, 18, 18, 0.8);
    --overlay-bg-85: rgba(18, 18, 18, 0.4);
    --overlay-bg-95: rgba(18, 18, 18, 0.1);
    --overlay-bg-end: transparent;
    
    /* Font Families */
    --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Font Sizes */
    --small-font-size: 0.8rem;
    --standard-font-size: 1.0rem;
    --medium-font-size: 1.2rem;
    --big-font-size: 1.8rem;
    --title-font-size: 2.5rem;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height: 1.5;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 12px;
    --spacing-xl: 15px;
    --spacing-2xl: 16px;
    --spacing-3xl: 18px;
    --spacing-4xl: 20px;
    --spacing-5xl: 22px;
    --spacing-6xl: 24px;
    --spacing-7xl: 25px;
    --spacing-8xl: 26px;
    --spacing-9xl: 28px;
    --spacing-10xl: 30px;
    --spacing-11xl: 35px;
    --spacing-12xl: 40px;
    --spacing-13xl: 50px;
    --spacing-14xl: 60px;
    --spacing-15xl: 70px;
    
    /* Border Radius */
    --border-radius-xs: 4px;
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 18px;
    --border-radius-2xl: 20px;
    
    /* Container Sizes */
    --container-max-width: 1400px;
    --container-max-width-content: 1000px;
    --container-max-width-narrow: 800px;
    --container-padding: 20px;
    
    /* Header Heights */
    --header-height: 70px;
    --header-height-mobile: 60px;
    
    /* Layout Heights */
    --hero-height: 50vh;
    
    /* Chip Sizes */
    --chip-min-height: 200px;
    --chip-min-height-tablet: 180px;
    --chip-min-height-mobile: 160px;
    --chip-height-mobile: 150px;
    
    /* Image Sizes */
    --image-width-desktop: 360px;
    --image-width-tablet: 280px;
    --image-width-mobile: 320px;
    --image-width-small-mobile: 280px;
    
    /* Icon Sizes */
    --icon-size-xs: 32px;
    --icon-size-sm: 90px;
    --icon-size-md: 100px;
    --icon-size-lg: 110px;
    --icon-size-xl: 150px;
    
    /* App Store Badge Sizes */
    --app-store-badge-width: 160px;
    --app-store-badge-width-tablet: 140px;
    --app-store-badge-width-mobile: 120px;
    
    /* Z-Index Scale */
    --z-index-dropdown: 10;
    --z-index-sticky: 100;
    --z-index-modal: 1000;
    --z-index-tooltip: 1100;
    
    /* Shadows */
    --shadow-sm: 0 2px 10px var(--shadow-color);
    --shadow-md: 0 6px 20px rgba(143, 188, 143, 0.35);
    --shadow-lg: 0 8px 24px rgba(143, 188, 143, 0.45);
    --shadow-xl: 0 12px 32px var(--shadow-color);
    --shadow-2xl: 0 6px 24px var(--shadow-color);
    
    /* Content Chip Shadows */
    --chip-shadow: rgba(0, 0, 0, 0.15);
    --chip-shadow-hover: rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Breakpoints (for reference in media queries) */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1400px;
    
    /* Grid Gaps */
    --grid-gap-xs: 10px;
    --grid-gap-sm: 16px;
    --grid-gap-md: 20px;
    --grid-gap-lg: 30px;
    --grid-gap-xl: 40px;
    
    /* Content Overlay Margins */
    --overlay-margin-desktop: calc(50vh + 70px - 50px);
    --overlay-margin-tablet: calc(50vh + 60px - 30px);
    --overlay-margin-mobile: calc(50vh + 60px - 20px);
    
    /* Blur Effects */
    --blur-light: blur(8px);
}