/* ═══════════════════════════════════════════════════════════
   LetzSmile Dental — Design Tokens

   Toutes les valeurs de design sont ici.
   Pour changer une couleur, une taille ou une police,
   modifiez uniquement ce fichier.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Couleurs principales ─────────────────────────────── */
  --color-primary:          #BA9E74;
  --color-primary-dark:     #A38A62;
  --color-primary-darker:   #2C2420;
  --color-primary-light:    #F5F0E8;
  --color-primary-50:       #FAF8F4;

  --color-accent:           #D4B896;
  --color-accent-dark:      #BA9E74;
  --color-accent-light:     #F0E8DC;

  /* ─── Neutres ──────────────────────────────────────────── */
  --color-white:            #FFFFFF;
  --color-gray-50:          #F8FAFC;
  --color-gray-100:         #F1F5F9;
  --color-gray-200:         #E2E8F0;
  --color-gray-300:         #CBD5E1;
  --color-gray-400:         #94A3B8;
  --color-gray-500:         #64748B;
  --color-gray-600:         #475569;
  --color-gray-700:         #334155;
  --color-gray-800:         #1E293B;
  --color-gray-900:         #0F172A;

  /* ─── Sémantiques ──────────────────────────────────────── */
  --color-success:          #10B981;
  --color-error:            #EF4444;
  --color-warning:          #F59E0B;

  /* ─── Backgrounds ──────────────────────────────────────── */
  --bg-body:                var(--color-white);
  --bg-section-alt:         var(--color-gray-50);
  --bg-hero:                linear-gradient(135deg, var(--color-primary-darker) 0%, #4A3C30 50%, var(--color-primary) 100%);
  --bg-footer:              var(--color-gray-900);

  /* ─── Texte ────────────────────────────────────────────── */
  --text-heading:           var(--color-gray-900);
  --text-body:              var(--color-gray-600);
  --text-muted:             var(--color-gray-400);
  --text-on-primary:        var(--color-white);
  --text-on-dark:           var(--color-gray-200);
  --text-link:              #8A7350;
  --text-link-hover:        var(--color-primary-darker);

  /* ─── Typographie ──────────────────────────────────────── */
  --font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-heading:    'Havana', var(--font-family);

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

  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  --line-height-tight:      1.25;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.75;

  /* ─── Espacement ───────────────────────────────────────── */
  --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 */

  --section-padding:        var(--space-20) 0;
  --container-max:          1200px;
  --container-padding:      var(--space-6);

  /* ─── Bordures & Radius ────────────────────────────────── */
  --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;

  --border-color:           var(--color-gray-200);
  --border-color-light:     var(--color-gray-100);

  /* ─── Ombres ───────────────────────────────────────────── */
  --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:              0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:              0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:              0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* ─── Transitions ──────────────────────────────────────── */
  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;
  --transition-slow:        400ms ease;

  /* ─── Z-index ──────────────────────────────────────────── */
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-fixed:                300;
  --z-overlay:              400;
  --z-modal:                500;
  --z-cookie:               600;
}