/* ============================================================
   REFONTE 2026 - Variables CSS
   Fichier central de la charte graphique.
   Modifier ces valeurs pour adapter couleurs, polices et espacements.
   ============================================================ */

:root {
    /* === COULEURS PRINCIPALES === */
    --r26-primary: #1B4332;
    --r26-primary-light: #2D6A4F;
    --r26-primary-dark: #143326;
    --r26-secondary: #E76F51;
    --r26-secondary-light: #F4A261;
    --r26-secondary-dark: #C9563A;
    --r26-accent: #264653;

    /* === FONDS === */
    --r26-bg: #FAFAF8;
    --r26-bg-alt: #F3F2EE;
    --r26-bg-card: #FFFFFF;
    --r26-bg-header: #FFFFFF;
    --r26-bg-footer: #1a1a2e;
    --r26-bg-banner: #1B4332;
    --r26-bg-promo: #E76F51;

    /* === TEXTE === */
    --r26-text: #1a1a2e;
    --r26-text-secondary: #374151;
    --r26-text-light: #5b6572;
    --r26-text-muted: #646b77;
    --r26-text-on-primary: #FFFFFF;
    --r26-text-on-dark: #F9FAFB;
    --r26-text-link: #1B4332;
    --r26-text-link-hover: #2D6A4F;

    /* === BORDURES === */
    --r26-border: #e5e7eb;
    --r26-border-light: #f3f4f6;
    --r26-border-focus: #1B4332;

    /* === PRIX & STATUTS === */
    --r26-price: #E76F51;
    --r26-price-old: #9ca3af;
    --r26-promo: #dc2626;
    --r26-success: #059669;
    --r26-danger: #dc2626;
    --r26-warning: #d97706;

    /* === TYPOGRAPHIE === */
    --r26-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --r26-font-display: 'Plus Jakarta Sans', sans-serif;
    --r26-fw-normal: 400;
    --r26-fw-medium: 500;
    --r26-fw-semibold: 600;
    --r26-fw-bold: 700;
    --r26-fw-extrabold: 800;

    --r26-fs-xs: 0.8125rem;  /* 13px */
    --r26-fs-sm: 0.875rem;   /* 14px */
    --r26-fs-base: 1rem;     /* 16px */
    --r26-fs-md: 1.125rem;   /* 18px */
    --r26-fs-lg: 1.3125rem;  /* 21px */
    --r26-fs-xl: 1.5rem;     /* 24px */
    --r26-fs-2xl: 2rem;      /* 32px */
    --r26-fs-3xl: 2.5rem;    /* 40px */
    --r26-fs-4xl: 3.5rem;    /* 56px */

    --r26-lh: 1.6;
    --r26-lh-tight: 1.2;
    --r26-lh-heading: 1.3;

    /* === ESPACEMENTS === */
    --r26-space-xs: 0.25rem;  /* 4px */
    --r26-space-sm: 0.5rem;   /* 8px */
    --r26-space-md: 1rem;     /* 16px */
    --r26-space-lg: 1.5rem;   /* 24px */
    --r26-space-xl: 2rem;     /* 32px */
    --r26-space-2xl: 3rem;    /* 48px */
    --r26-space-3xl: 4rem;    /* 64px */

    /* === ARRONDIS === */
    --r26-radius-sm: 6px;
    --r26-radius: 10px;
    --r26-radius-lg: 16px;
    --r26-radius-xl: 24px;
    --r26-radius-full: 9999px;

    /* === OMBRES === */
    --r26-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --r26-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --r26-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --r26-shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
    --r26-shadow-hover: 0 12px 32px rgba(0,0,0,0.12);

    /* === TRANSITIONS === */
    --r26-transition: all 0.2s ease;
    --r26-transition-fast: all 0.15s ease;
    --r26-transition-slow: all 0.3s ease;

    /* === LAYOUT === */
    --r26-header-height: 64px;
    --r26-header-height-mobile: 56px;
    --r26-sidebar-width: 280px;
    --r26-max-width: 1400px;
    --r26-content-width: 1200px;

    /* === Z-INDEX === */
    --r26-z-dropdown: 100;
    --r26-z-sticky: 200;
    --r26-z-header: 300;
    --r26-z-overlay: 400;
    --r26-z-drawer: 500;
    --r26-z-modal: 600;
}