/* ============================================
   Ixila.com — CSS Custom Properties
   Palette derivee du logo ixila (anthracite + rose berry)
   et du theme Wix existant pour la continuite visuelle.
   ============================================ */

:root {
    /* --- Couleurs principales --- */
    /* Texte/titres : anthracite, identique au logo "ixila" */
    --c-text:           #3D4044;
    --c-text-soft:      #5D5D61;
    --c-text-muted:     #8F8F8F;

    /* Accent principal : rose berry du "x" du logo */
    --c-primary:        #D94F70;
    --c-primary-light:  #E2758E;
    --c-primary-dark:   #B83557;

    /* Bleu marine (sections, deuxieme accent) */
    --c-secondary:      #2B5672;
    --c-secondary-light: #4B7892;
    --c-secondary-dark: #1B3D54;

    /* Jaune/or (alertes, highlights) */
    --c-tertiary:       #FFCB05;
    --c-tertiary-light: #FFD83A;

    /* Alias generique */
    --c-accent:         var(--c-primary);
    --c-accent-light:   var(--c-primary-light);

    /* Neutres / surfaces */
    --c-white:          #FFFFFF;
    --c-light:          #F8F7F4;     /* fond clair principal */
    --c-surface:        #EDEAE5;     /* cartes, surfaces elevees */
    --c-surface-hover:  #E2DFD8;
    --c-border:         #E2E2E2;
    --c-dark:           #212121;
    --c-dark-soft:      #3D4044;

    /* Etats systeme */
    --c-success:        #10B981;
    --c-error:          #EF4444;
    --c-warning:        #F59E0B;
    --c-info:           #2B5672;

    /* --- Typographie --- */
    /* Polices issues du site Wix : Syne (titres) + Jura (body) */
    /* Servies via Google Fonts (link dans head.php) */
    --ff-display: 'Syne', system-ui, -apple-system, sans-serif;
    --ff-body:    'Jura', system-ui, -apple-system, sans-serif;
    --ff-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Tailles fluides (clamp = mobile -> desktop) */
    --fs-hero: clamp(2.5rem, 5vw, 4.5rem);
    --fs-h1:   clamp(2rem,   4vw, 3.5rem);
    --fs-h2:   clamp(1.5rem, 3vw, 2.5rem);
    --fs-h3:   clamp(1.25rem, 2vw, 1.75rem);
    --fs-h4:   clamp(1.1rem, 1.5vw, 1.35rem);
    --fs-body:    1rem;
    --fs-body-lg: 1.125rem;
    --fs-small:   0.875rem;
    --fs-xs:      0.75rem;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:   1.2;
    --lh-normal:  1.6;
    --lh-relaxed: 1.8;

    --ls-tight:  -0.02em;
    --ls-normal: 0;
    --ls-wide:   0.05em;
    --ls-wider:  0.1em;

    /* --- Espacements --- */
    --sp-2xs: 0.125rem;  /* 2px */
    --sp-xs:  0.25rem;   /* 4px */
    --sp-sm:  0.5rem;    /* 8px */
    --sp-md:  1rem;      /* 16px */
    --sp-lg:  1.5rem;    /* 24px */
    --sp-xl:  2rem;      /* 32px */
    --sp-2xl: 3rem;      /* 48px */
    --sp-3xl: 4rem;      /* 64px */
    --sp-4xl: 6rem;      /* 96px */
    --sp-5xl: 8rem;      /* 128px */

    /* --- Layout --- */
    --container-max:    1200px;
    --container-narrow: 800px;
    --container-wide:   1400px;
    --container-padding: var(--sp-lg);
    --header-height:    72px;
    --section-padding:  var(--sp-4xl) 0;

    /* --- Bordures & rayons --- */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-full: 9999px;

    /* --- Ombres --- */
    --shadow-sm: 0 1px 3px rgba(33, 33, 33, 0.08);
    --shadow-md: 0 4px 12px rgba(33, 33, 33, 0.10);
    --shadow-lg: 0 8px 30px rgba(33, 33, 33, 0.12);
    --shadow-xl: 0 16px 50px rgba(33, 33, 33, 0.15);
    --shadow-glow-primary:   0 0 30px rgba(217, 79, 112, 0.30);
    --shadow-glow-secondary: 0 0 30px rgba(43, 86, 114, 0.25);

    /* --- Transitions --- */
    --transition-fast:    150ms ease;
    --transition-normal:  300ms ease;
    --transition-slow:    500ms ease;
    --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-index --- */
    --z-behind:  -1;
    --z-base:    0;
    --z-above:   10;
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;
}