/* ============================================
   PEG PIXEL - Variables CSS
   ============================================
   Modifiez ces variables pour changer rapidement
   l'apparence de tout le site
   ============================================ */

:root {
    /* ----------------------------------------
       COULEURS PRINCIPALES — THÈME LIGHT (défaut)
       ---------------------------------------- */

    /* Fond principal — beige chaud */
    --color-bg-primary: #e1d9d4;
    --color-bg-secondary: #c3bbb5;
    --color-bg-tertiary: #b9b1ab;

    /* RGB triplets — utilisés dans les overlays rgba() pour suivre le thème */
    --bg-rgb: 205, 197, 191;
    --bg-secondary-rgb: 195, 187, 181;
    --fg-rgb: 26, 23, 20;

    /* Textes — légèrement adoucis (pas pur noir) */
    --color-text-primary: #0d0c0b;
    --color-text-secondary: #0e0d0c;
    --color-text-muted: #4f4842;

    /* Couleurs d'accent — CHANGER ICI pour tout mettre à jour (CSS + JS canvas) */
    --color-accent-primary: #00b4d8;
    --color-accent-secondary: #0077b6;
    --color-accent-gradient: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);

    /* Couleurs d'interaction (dérivées des accents) */
    --color-hover: var(--color-accent-primary);
    --color-active: var(--color-accent-secondary);
    --color-border: rgba(0, 0, 0, 0.12);
    --color-border-accent: color-mix(in srgb, var(--color-accent-primary) 50%, transparent);

    /* Overlay et effets */
    --color-overlay: rgba(var(--bg-rgb), 0.7);
    --color-overlay-light: rgba(var(--bg-rgb), 0.5);

    /* Couleur dark partagée — utilisée par body.body--client-section et autres
       contextes "forced dark" sans toucher à --color-bg-primary qui doit cascader
       proprement vers les sections (supports, etc.). */
    --color-bg-dark: #10101a;

    /* Blend mode des canvas décoratifs (bokeh, sparks)
       light → multiply (les couleurs accent assombrissent le fond clair)
       dark  → lighten  (les couleurs accent éclaircissent le fond sombre) */
    --blend-canvas: multiply;
    /* Dither d'images : en light → multiply + saturate fort pour bien ressortir
       sur le beige ; en dark → blend normal et pas de filtre. */
    --blend-dither: multiply;
    --filter-dither: saturate(3.5);

    color-scheme: light;

    /* ----------------------------------------
       TYPOGRAPHIE
       ---------------------------------------- */

    /* Polices */
    --font-primary: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Tailles de police */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 2rem;        /* 32px */
    --font-size-3xl: 2.5rem;      /* 40px */
    --font-size-4xl: 3rem;        /* 48px */
    --font-size-5xl: 4rem;        /* 64px */
    --font-size-hero: clamp(2.5rem, 5vw, 5rem);

    /* Poids de police */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Hauteurs de ligne */
    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Espacement des lettres */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
    --letter-spacing-widest: 0.2em;

    /* ----------------------------------------
       ESPACEMENTS
       ---------------------------------------- */

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

    /* ----------------------------------------
       HEADER / NAVIGATION
       ---------------------------------------- */

    --header-height: 120px;
    --header-height-scrolled: 80px;
    --logo-width: 80px;
    --logo-width-scrolled: 50px;

    /* Header « pill » flottant — THÈME LIGHT (pill claire, texte foncé). Ces tokens sont
       propres au header et ne sont PAS écrasés par .header--on-dark → cohérence garantie. */
    --header-pill: var(--color-bg-primary);
    --header-pill-rgb: 225, 217, 212; /* #e1d9d4 — pour le fond translucide (blur) */
    --header-ink: #12100e;
    /* Liquid glass (light) : reflet + liseré + irisation (film d'huile / essence) */
    --glass-sheen: 0.28;
    --glass-rim: 0.75;
    --glass-rim-2: 0.14;
    --iri: 0.16;
    --header-ink-sub: #6e665f;
    --header-pill-border: rgba(0, 0, 0, 0.06);
    --header-pill-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);

    /* ----------------------------------------
       LAYOUT
       ---------------------------------------- */

    --container-max-width: 1440px;
    --container-padding: 5%;
    --section-padding: clamp(4rem, 10vh, 8rem);

    /* ----------------------------------------
       BORDURES ET ARRONDIS
       ---------------------------------------- */

    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 32px;
    --border-radius-full: 9999px;

    /* ----------------------------------------
       OMBRES
       ---------------------------------------- */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);
    --shadow-accent: 0 4px 20px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);

    /* ----------------------------------------
       TRANSITIONS
       ---------------------------------------- */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-header: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ----------------------------------------
       Z-INDEX
       ---------------------------------------- */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}


/* ----------------------------------------
   THÈME DARK (override + scope forcé sur .client-slide)
   ---------------------------------------- */
[data-theme="dark"],
.clients-section,
.client-panel,
.client-dots,
.material-item {
    --color-bg-primary: var(--color-bg-dark);
    --color-bg-secondary: #08080b;
    --color-bg-tertiary: #131318;

    --bg-rgb: 3, 3, 6;
    --bg-secondary-rgb: 8, 8, 11;
    --fg-rgb: 255, 255, 255;

    --color-text-primary: #ededea;
    --color-text-secondary: #d1d1cd;
    --color-text-muted: #888884;

    --color-border: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    --blend-canvas: lighten;
    --blend-dither: normal;
    --filter-dither: none;

    color-scheme: dark;
}

/* Header « pill » flottant — THÈME DARK (pill sombre légèrement élevée, texte clair).
   Scopé au vrai thème dark uniquement (pas aux îlots forcés-dark, qui ne contiennent
   jamais le header). */
[data-theme="dark"] {
    --header-pill: #1a1a24;
    --header-pill-rgb: 26, 26, 36; /* #1a1a24 — pour le fond translucide (blur) */
    --header-ink: #ededea;
    /* Liquid glass (dark) : reflet + liseré + irisation plus marquée (ressort sur le sombre) */
    --glass-sheen: 0.12;
    --glass-rim: 0.42;
    --glass-rim-2: 0.06;
    --iri: 0.26;
    --header-ink-sub: #8f8f8a;
    --header-pill-border: rgba(255, 255, 255, 0.08);
    --header-pill-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}


/* ----------------------------------------
   RESPONSIVE OVERRIDES
   ---------------------------------------- */

@media (max-width: 768px) {
    :root {
        --header-height: 100px;
        --header-height-scrolled: 80px;
        --logo-width: 80px;
        --logo-width-scrolled: 50px;
        --container-padding: 6%;
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 100px;
        --header-height-scrolled: 80px;
        --logo-width: 80px;
        --logo-width-scrolled: 50px;
        --font-size-4xl: 2.2rem;      /* 35px — h2 plus petit sur mobile */
    }
}