/* ============================================================
   DESIGN TOKENS — Atelier Dubois
   Direction : L'Atelier Noir · Coiffure Premium Paris
   ============================================================ */

:root {
  /* ── Palette ── */
  --color-bg:          #1a1a1a;   /* fond principal — charcoal profond */
  --color-surface:     #222220;   /* cards, nav scrollée, footer */
  --color-surface-2:   #2c2c2a;   /* chiffres décoratifs, bordures intérieures */
  --color-text:        #f5f0e8;   /* texte principal — crème chaude */
  --color-text-muted:  #9a8f80;   /* captions, descriptions, labels */
  --color-accent:      #c8a96e;   /* or — CTA, eyebrows, accents */
  --color-accent-hover:#dfc08a;   /* or plus clair pour les hover */
  --color-border:      rgba(200, 169, 110, 0.15); /* bordures subtiles */

  /* ── Typographie ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Échelle fluide (mobile-first) */
  --text-xs:    clamp(0.75rem,  1.5vw, 0.875rem);  /*  12–14px */
  --text-sm:    clamp(0.875rem, 2vw,   1rem);       /*  14–16px */
  --text-base:  clamp(1rem,     2.5vw, 1.125rem);   /*  16–18px */
  --text-lg:    clamp(1.125rem, 3vw,   1.5rem);     /*  18–24px */
  --text-xl:    clamp(1.5rem,   4vw,   2.5rem);     /*  24–40px */
  --text-2xl:   clamp(2rem,     6vw,   4rem);       /*  32–64px */
  --text-hero:  clamp(3.5rem,   10vw,  9rem);       /*  56–144px */

  /* ── Espacement (base 8px) ── */
  --space-xs:  0.5rem;    /*   8px */
  --space-sm:  1rem;      /*  16px */
  --space-md:  2rem;      /*  32px */
  --space-lg:  4rem;      /*  64px */
  --space-xl:  8rem;      /* 128px */
  --space-2xl: 14rem;     /* 224px */

  /* ── Layout ── */
  --max-width: 1280px;
  --gutter:    clamp(1.25rem, 5vw, 3rem);

  /* ── Animations (GPU-only : transform + opacity) ── */
  --ease-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      200ms;
  --dur-base:      400ms;
  --dur-slow:      800ms;
  --dur-cinematic: 1300ms;

  /* ── Ombres ── */
  --shadow-card:
    0 2px 4px  rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-gold:
    0 0 48px rgba(200, 169, 110, 0.12);
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:      0ms;
    --dur-base:      0ms;
    --dur-slow:      0ms;
    --dur-cinematic: 0ms;
  }
}