/**
 * EAAS Theme - CSS Variables
 *
 * @package    EAAS
 * @version    2.5
 * @author     Rodolphe
 * @link       https://enaccordavecsoi.fr
 * @file       variables.css
 */

:root {
    --primary-color: #1a1a2e;
    --secondary-color: #4a90e2;
    --accent-color: #f39c12;

    --text-color: #2c3e50;
    --text-color-light: #6c757d;
    --text-color-muted: #999999;
    --body-bg: #ffffff;
    --light-bg: #f7f9fc;

    --white: #ffffff;
    --dark: #1a1a1a;
    --soft-blue: #e8f4f8;
    --warm-beige: #faf8f5;
    --muted-color: #888888;
    --muted-border: #e0e0e0;
    --code-bg: #f0f0f0;

    --danger: #e74c3c;
    --danger-light: #fdf2f2;
    --warning: #ff9800;
    --warning-light: #fff8e1;
    --success: #27ae60;
    --success-light: #e8f5e9;
    --info: #17a2b8;
    --info-light: #e3f2fd;

    --header-bg: #ffffff;
    --header-text-color: #2c3e50;
    --footer-bg: #1a1a2e;
    --footer-text-color: #ffffff;

    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-h1: 52px;
    --font-size-h2: 38px;
    --font-size-h3: 28px;
    --font-size-h4: 22px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;
    --line-height-base: 1.6;
    --line-height-tight: 1.3;
    --line-height-loose: 1.8;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-base-mobile: 14px;
    --font-size-h1-mobile: 32px;
    --font-size-h2-mobile: 26px;
    --font-size-h3-mobile: 22px;
    --font-size-h4-mobile: 18px;
    --font-size-h5-mobile: 16px;
    --font-size-h6-mobile: 14px;

    --font-size-base-tablet: 15px;
    --font-size-h1-tablet: 42px;
    --font-size-h2-tablet: 32px;
    --font-size-h3-tablet: 24px;
    --font-size-h4-tablet: 20px;
    --font-size-h5-tablet: 16px;
    --font-size-h6-tablet: 14px;

    --font-size-base-tablet-landscape: 16px;
    --font-size-h1-tablet-landscape: 46px;
    --font-size-h2-tablet-landscape: 34px;
    --font-size-h3-tablet-landscape: 26px;
    --font-size-h4-tablet-landscape: 21px;
    --font-size-h5-tablet-landscape: 17px;
    --font-size-h6-tablet-landscape: 15px;

    --hamburger-line-height: 3px;
    --hamburger-line-spacing: 8px;
    --hamburger-width: 30px;
    --hamburger-width-tablet: 28px;
    --hamburger-width-tablet-landscape: 30px;
    --hamburger-color: #2c3e50;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    --section-spacing: 80px;
    --section-spacing-mobile: 40px;
    --section-spacing-tablet: 60px;
    --section-spacing-tablet-landscape: 70px;

    --content-margin-top-mobile: 20px;
    --content-margin-top-tablet: 20px;
    --content-margin-top-tablet-landscape: 20px;

    --header-height: 80px;

    --page-width: 90%;
    --container-width: 90%;
    --container-width-tablet: 90%;
    --container-width-mobile: 90%;
    --container-padding: 20px;
    --container-padding-tablet: 15px;
    --container-padding-tablet-landscape: 20px;
    --container-padding-mobile: 15px;
    --content-width: 800px;
    --content-width-tablet: 100%;
    --content-width-mobile: 100%;

    --blog-columns: 3;
    --blog-columns-tablet: 2;
    --blog-columns-mobile: 1;

    --btn-padding-v: 12px;
    --btn-padding-h: 24px;
    --btn-padding-v-mobile: 10px;
    --btn-padding-h-mobile: 20px;
    --btn-padding-v-tablet: 12px;
    --btn-padding-h-tablet: 24px;
    --btn-padding-v-tablet-landscape: 12px;
    --btn-padding-h-tablet-landscape: 24px;

    --btn-border-radius: 8px;
    --btn-border-radius-mobile: 4px;
    --btn-border-radius-tablet: 6px;

    --nav-padding-tablet-landscape: 14px;
    --nav-font-size-tablet-landscape: 15px;
    --nav-font-size-mobile: 14px;
    --back-to-top-size-tablet-landscape: 46px;

    --border-width: 1px;
    --border-color: #e0e0e0;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    --transition-timing: ease;
    --animation-duration: 300ms;

    --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-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    --focus-outline-color: var(--secondary-color);
    --focus-outline-width: 3px;
    --focus-outline-offset: 2px;
    --focus-ring: 0 0 0 var(--focus-outline-width) rgba(74, 144, 226, 0.4);

    --gradient-cta: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    --gradient-footer: linear-gradient(135deg, var(--footer-bg) 0%, #2c3e50 100%);
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);

    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-medium: rgba(255, 255, 255, 0.2);
    --overlay-dark: rgba(0, 0, 0, 0.3);
    --overlay-backdrop: rgba(0, 0, 0, 0.5);

    --z-dropdown: 1100;
    --z-sticky: 1000;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    --container-padding: 20px;
    --container-padding-mobile: 15px;
    --text-max-width: 600px;
    --text-max-width-lg: 700px;
    --text-container-width: 800px;
    --form-max-width: 600px;
    --modal-max-width: 600px;

    --section-padding: 60px;
    --section-padding-lg: 80px;
    --section-padding-mobile: 40px;
    --section-padding-mobile-sm: 30px;
    --section-underline-width: 60px;
    --section-underline-height: 3px;

    --hero-min-height: 50vh;
    --hero-padding-top: 100px;
    --hero-padding-bottom: 80px;
    --hero-padding-mobile: 60px;
    --hero-title-size: 52px;
    --hero-title-size-tablet: 36px;
    --hero-title-size-mobile: 28px;
    --hero-lead-size: 22px;
    --hero-text-size: 18px;
    --hero-subtitle-size: 32px;
    --hero-max-width: 100%;
    --hero-logo-size: 120px;

    --button-padding-y: 14px;
    --button-padding-x: 32px;
    --button-padding-y-sm: 10px;
    --button-padding-x-sm: 18px;
    --button-padding-y-lg: 18px;
    --button-padding-x-lg: 36px;
    --button-font-size: 16px;
    --button-font-size-sm: 14px;
    --button-font-size-lg: 18px;
    --button-border-radius: 8px;
    --button-border-width: 2px;
    --hover-lift: -3px;
    --hover-lift-sm: -2px;

    --input-padding-y: 12px;
    --input-padding-x: 16px;
    --input-font-size: 15px;
    --input-border-width: 2px;
    --input-border-radius: 4px;
    --focus-ring-width: 3px;

    --card-min-width: 300px;
    --card-icon-size: 80px;
    --card-icon-size-mobile: 60px;
    --card-icon-font-size: 36px;
    --card-icon-font-size-mobile: 28px;
    --post-card-min-width: 320px;
    --post-thumbnail-height: 220px;

    --header-height-mobile: 70px;
    --header-padding-x: 60px;
    --header-blur: 10px;
    --logo-height: 50px;
    --logo-height-mobile: 40px;
    --logo-font-size: 24px;
    --site-title-font-size: 18px;
    --site-title-font-size-mobile: 14px;
    --nav-gap: 35px;
    --nav-font-size: 15px;
    --nav-underline-height: 2px;
    --submenu-width: 240px;
    --burger-width: 25px;
    --burger-line-height: 3px;
    --progress-bar-height: 3px;
    --admin-bar-height: 32px;
    --admin-bar-height-mobile: 46px;
    --z-index-header: 1000;

    --footer-logo-height: 40px;

    --badge-radius: 25px;
    --badge-border-width: 2px;

    --blockquote-border-width: 5px;

    --toggle-width: 50px;
    --toggle-height: 28px;
    --toggle-knob-size: 22px;
    --toggle-translate: 24px;

    --social-facebook-bg: #1877F2;
    --social-facebook-bg-hover: #0A66C2;
    --social-twitter-bg: #000000;
    --social-twitter-bg-hover: #1a1a1a;
    --social-linkedin-bg: #0A66C2;
    --social-linkedin-bg-hover: #004182;
    --social-instagram-bg: linear-gradient(135deg, #833AB4 0%, #E1306C 25%, #FD1D1D 50%, #F77737 75%, #FCAF45 100%);
    --social-instagram-bg-hover: linear-gradient(135deg, #6D2C91 0%, #C2185B 25%, #D41A1A 50%, #E86B2B 75%, #E89B2B 100%);

    --icon-size-xs: 14px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 30px;
    --header-icon-size: 56px;
    --list-icon-size: 24px;

    --font-size-2xs: 10px;
    --font-size-2xl: 28px;
    --font-size-3xl: 42px;
    --font-weight-extrabold: 800;
    --line-height-relaxed: 1.7;
    --letter-spacing-tight: -0.5px;
    --letter-spacing-wide: 0.3px;
    --underline-offset: 3px;
    --underline-thickness: 2px;
    --link-underline-width: 2px;
    --logo-letter-size: 48px;
    --stat-font-size: 42px;

    --spacing-2xs: 4px;
    --category-border-width: 4px;
    --cta-btn-min-width: 220px;
    --cookie-text-min-width: 300px;
    --cookie-btn-min-width: 110px;
    --cookie-btn-min-width-mobile: 120px;

    --z-index-cookie: 9998;
    --z-index-modal: 9999;
    --z-index-modal-top: 10000;

    --circle-1-size: 400px;
    --circle-2-size: 300px;
    --circle-3-size: 200px;
    --border-radius: 8px;
}

*:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    z-index: var(--z-tooltip);
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: var(--spacing-sm);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--light-bg);
    clip: auto !important;
    clip-path: none;
    color: var(--text-color);
    display: block;
    font-size: var(--font-size-base);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: var(--z-tooltip);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
    }
}