/*
Theme Name: Yoga by Cecile
Theme URI: https://yogabycecile.com
Author: Julien Le Mée
Author URI: https://yogabycecile.com
Description: Thème personnalisé pour Yoga by Cecile
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoga-by-cecile
Tags: custom, responsive
*/

/* Variables globales */
:root {
    /* Couleurs */
    --color-primary: #BA936F;
    --color-primary-hover: #93704c;
    --color-secondary: #F4EDE5;
    --color-accent: #cbac90;
    --color-background: #ffffff;
    --color-text: #343434;
    --color-text-dark: #513125;
    --color-text-light: #999999;
    --color-border: #dddddd;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Typographie */
    --font-size-h1: clamp(2rem, 5vw, 3rem);
    --font-size-h2: clamp(1.5rem, 5vw, 2rem);
    --font-size-h3: clamp(1.25rem, 5vw, 1.5rem);
    --font-size-h4: clamp(1.125rem, 5vw, 1.25rem);
    --font-size-h5: clamp(1rem, 5vw, 1.125rem);
    --font-size-h6: clamp(0.875rem, 5vw, 1rem);

    --font-size-base: 1rem;
    --line-height-base: 1.5;

    /* Layout */
    --layout-wide-size: 1280px;
    --layout-content-size: 1000px;

    /* Espacement */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    --gap-block: 5rem;
    --gap-block-sm: 2.5rem;
    --gap-section: 8rem;
    --gap-section-sm: 4rem;

    /* Points de rupture */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 1200px;

    /* Conteneur */
    --container-width: 1200px;
    --container-padding: 20px;

    /* Box */
    --box-border-radius: 1rem;
    --box-padding: 1rem;
    --box-background-color: var(--color-white);
    --box-background-color-hover: var(--color-secondary);
    --box-border-color: var(--color-primary);
    --box-border-color-hover: var(--color-secondary);
    --box-border-width: 1px;
    --box-font-size: var(--font-size-base);
    --box-background-overlay: rgba(0, 0, 0, 0.5);

    /* Card */
    --card-border-radius: 1rem;
    --card-button-border-radius: 0.5rem;
    --card-button-padding: 0.5rem 1rem;
    --card-gap: 1rem;
    
    /* Boutons */
    --button-padding: 1rem;
    --button-border-radius: 1rem;
    --button-font-size: 1rem;
    --button-font-weight: 400;

    --button-default-background-color: var(--color-primary);
    --button-default-border-color: var(--color-primary);
    --button-default-color: var(--color-white);
    --button-default-background-color-hover: var(--color-primary-hover);
    --button-default-border-color-hover: var(--color-primary-hover);

    --button-outline-border-color: var(--color-primary);
    --button-outline-color: var(--color-primary);
    --button-outline-font-size: 1rem;
    --button-outline-font-weight: 400;
    --button-outline-background-color-hover: var(--color-primary);
    --button-outline-color-hover: var(--color-white);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-ease: ease-in-out;

    /* Ombres */
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.15);

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

    @media (max-width: 768px) {
        --gap-block: var(--gap-block-sm);
        --gap-section: var(--gap-section-sm);

        --spacing-lg: var(--spacing-md);
    }
}