/* 
 * Carria Website Configuration
 * Easy customization variables - modify these to change the website appearance
 */

:root {
    /* Brand Colors */
    --primary-blue: #008AFC;        /* Main brand color - used for buttons, links, highlights */
    --accent-red: #FD6262;          /* Accent color - used for icons and dividers */
    --brand-highlight: #008AFC;     /* Color for "RelayKit" text */
    
    /* Text Colors */
    --text-primary: #333333;        /* Main text color */
    --text-secondary: #666666;      /* Secondary text color */
    --text-light: #999999;          /* Light text color */
    --text-white: #ffffff;          /* White text for dark backgrounds */
    
    /* Background Colors */
    --background-light: #f8f9fa;    /* Light background for sections */
    --background-white: #ffffff;    /* White background */
    --background-dark: #333333;     /* Dark background for footer */
    
    /* Border and Divider Colors */
    --border-light: #e0e0e0;        /* Light borders */
    --divider-color: #FD6262;       /* Color for feature dividers */
    
    /* Typography */
    --font-primary: 'Poppins', sans-serif;         /* Primary font for headings */
    --font-secondary: 'Open Sans', sans-serif;     /* Secondary font for body text */
    --font-tertiary: 'Barlow', sans-serif;        /* Tertiary font for descriptions */
    
    /* Font Sizes */
    --font-size-hero: clamp(36px, 7.5vw, 76px);   /* Hero title size */
    --font-size-h2: 30px;                         /* Section headings */
    --font-size-h3: 18px;                         /* Feature titles */
    --font-size-intro: 30px;                      /* Intro text size */
    --font-size-description: 24px;                /* Description text */
    --font-size-body: 16px;                       /* Body text */
    --font-size-small: 14px;                      /* Small text */
    
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;
    
    /* Layout */
    --max-width: 1200px;            /* Maximum content width */
    --header-height: 80px;          /* Header height */
    --section-padding: 80px 0;      /* Section padding */
    
    /* Shadows */
    --shadow-light: 0 5px 20px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 4px 15px rgba(0, 138, 252, 0.3);
    --shadow-button-hover: 0 6px 20px rgba(0, 138, 252, 0.4);
    
    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 17px;
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.6s ease;
    --transition-slow: 0.8s ease;
    
    /* Z-index layers */
    --z-header: 999;
    --z-overlay: 2;
    --z-background: 1;
    --z-negative: -1;
}

/* 
 * Company Information Variables
 * Change these to customize the content
 */
:root {
    /* Company Details */
    --company-name: "CARRIA";
    --company-email: "info@farlight.io";
    --company-address: "7837 Fay Avenue #310, La Jolla, CA 92037";
    
    /* Product Information */
    --product-name: "RelayKit";
    --hero-title: "Secure Global Communications for Modern Device Fleets";
    --hero-description: "Encrypted edge networking, embedded in your code. Anycast reach, mTLS trust. Dependable in any network conditions.";
    
    /* Call-to-Action */
    --cta-text: "Discover More";
    --cta-url: "#";
    
    /* Features Section */
    --features-title: "Revolutionizing Secure Edge Networking";
    --features-description: "Placeholder";
}

/* 
 * Responsive Breakpoints
 */
:root {
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-large: 1200px;
}

/* 
 * Animation Settings
 */
:root {
    --animation-duration-fast: 0.3s;
    --animation-duration-medium: 0.6s;
    --animation-duration-slow: 0.8s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-delay-increment: 0.1s;
}

/* 
 * Custom Properties for Easy Theme Switching
 * Uncomment and modify these for different themes
 */

/* Dark Theme (uncomment to enable)
:root[data-theme="dark"] {
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --background-light: #1a1a1a;
    --background-white: #2d2d2d;
    --background-dark: #000000;
    --border-light: #404040;
}
*/

/* High Contrast Theme (uncomment to enable)
:root[data-theme="high-contrast"] {
    --primary-blue: #0066ff;
    --text-primary: #000000;
    --background-white: #ffffff;
    --border-light: #000000;
}
*/

/* 
 * Print Styles Configuration
 */
@media print {
    :root {
        --text-primary: #000000;
        --background-white: #ffffff;
        --shadow-light: none;
        --shadow-medium: none;
    }
}