/* ============================================
   BOISEXPRESS — Design Tokens & Artistic Direction
   Élégance Française : Vert Forêt, Chaleur Braise, Anthracite & Chêne Doré
   Optimisation Mobile-First & WebKit Performance
   ============================================ */

:root {
  /* ─── Identité Visuelle BoisExpress (France) ─── */
  /* Vert Forêt Français & Chêne Séculaire */
  --primary: #1E3F27;
  --primary-light: #2C5E3A;
  --primary-dark: #152E1C;
  --primary-rgb: 30, 63, 39;
  --color-primary: var(--primary);
  --primary-color: var(--primary);

  /* Chaleur Braise & Feu de Cheminée (Terracotta / Ambre) */
  --accent: #C85A32;
  --accent-hover: #B44A24;
  --accent-light: #E67E22;
  --accent-rgb: 200, 90, 50;
  --color-accent: var(--accent);
  --accent-color: var(--accent);

  /* WhatsApp Officiel Service Client & Expéditions */
  --whatsapp: #25D366;
  --whatsapp-hover: #1EBE5D;
  --whatsapp-dark: #128C7E;

  /* Anthracite Profond & Surfaces Sombres */
  --dark-base: #14181D;
  --dark-elevated: #1B2128;
  --dark-surface: #242B35;
  --dark-border: rgba(255, 255, 255, 0.12);

  /* Surfaces Claires & Tons Naturels */
  --surface: #FFFFFF;
  --surface-elevated: #FAF8F5;
  --background: #F4EFEB;
  --background-alt: #EBE3D9;
  --secondary: #F4F1E9;
  --secondary-dark: #E6E0D3;

  /* Typographie & Couleurs de Texte */
  --text: #1E232A;
  --text-muted: #5A6472;
  --text-light: #8C96A5;
  --text-on-primary: #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* Bordures & Séparateurs */
  --border: #E2D9CE;
  --border-light: #EFE8DE;
  --border-focus: var(--primary);

  /* États Sémantiques */
  --success: #15803D;
  --success-bg: #F0FDF4;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --danger: #B91C1C;
  --danger-bg: #FEF2F2;
  --info: #0284C7;
  --info-bg: #F0F9FF;

  /* Polices */
  --font-heading: 'Outfit', 'Lora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Échelles Typographiques */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Espacements */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Rayons de Courbure */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(20, 24, 29, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(20, 24, 29, 0.08), 0 2px 4px -1px rgba(20, 24, 29, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(20, 24, 29, 0.12), 0 4px 8px -2px rgba(20, 24, 29, 0.06);
  --shadow-xl: 0 20px 32px -6px rgba(20, 24, 29, 0.16), 0 8px 16px -4px rgba(20, 24, 29, 0.08);
  --shadow-whatsapp: 0 8px 24px rgba(37, 211, 102, 0.35);
  --shadow-card-hover: 0 20px 40px rgba(200, 90, 50, 0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Largeurs maximales */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1440px;

  /* Glassmorphism WebKit */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(16px);

  /* WebKit & Safe Areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Hauteurs dynamiques — mises à jour en JS via setProperty() */
  --navbar-height: 65px;   /* valeur initiale, recalculée dès DOMContentLoaded */
  --promo-height: 40px;    /* idem — 0px quand la bannière est fermée */
  --chrome-offset: calc(var(--promo-height) + var(--navbar-height));
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

button, a, input, select, textarea {
  touch-action: manipulation;
}