/* ════════════════════════════════════════════════════════════════════
   33 LAB — DESIGN TOKENS
   Source unique pour couleurs, espacements, typographie, breakpoints.
   Modifier ici, propagation automatique sur les 12 pages.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── SURFACES (theme dark warm — lifted) ─────────────────── */
  --bg:                 #15110A;       /* lift +5% luminance vs original */
  --bg-section:         #1E1610;       /* sections alternées */
  --bg-elevated:        #231910;       /* cards, navbar */
  --bg-elevated-2:      #2A1E14;       /* surfaces hautes */
  --surface:            rgba(255, 255, 255, 0.05);
  --surface-hover:      rgba(255, 255, 255, 0.08);
  --surface-strong:     rgba(255, 255, 255, 0.12);

  /* ─── AMBIENT GRADIENT (subtle layer pour casser le flat dark) ─── */
  --gradient-ambient:   radial-gradient(ellipse 800px 600px at 30% 0%, rgba(196,129,61,0.06) 0%, transparent 60%),
                        radial-gradient(ellipse 600px 400px at 80% 90%, rgba(232,201,160,0.04) 0%, transparent 70%);

  /* ─── BORDERS ──────────────────────────────────────────────── */
  --border:             rgba(196, 129, 61, 0.15);
  --border-strong:      rgba(196, 129, 61, 0.30);
  --border-subtle:      rgba(232, 201, 160, 0.08);

  /* ─── TEXT ─────────────────────────────────────────────────── */
  --text:               #FAF6F0;
  --text-muted:         rgba(232, 201, 160, 0.70);
  --text-subtle:        rgba(232, 201, 160, 0.45);
  --text-on-amber:      #0E0A06;

  /* ─── BRAND ────────────────────────────────────────────────── */
  --amber:              #C4813D;
  --amber-on-dark:      #D99B57;   /* AA contrast 4.6:1 sur --bg */
  --amber-hover:        #E0AC6E;
  --gold:               #E8C9A0;

  /* ─── FEEDBACK ─────────────────────────────────────────────── */
  --success:            #52C27A;
  --success-bg:         rgba(82, 194, 122, 0.12);
  --warning:            #E8C9A0;
  --error:              #E05252;
  --error-bg:           rgba(224, 82, 82, 0.12);
  --info:               #5285E0;

  /* ─── SPACING (8pt grid) ───────────────────────────────────── */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;

  /* ─── RADIUS ───────────────────────────────────────────────── */
  --radius-xs:          4px;
  --radius-sm:          6px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-xl:          20px;
  --radius-2xl:         28px;
  --radius-pill:        999px;

  /* ─── TYPOGRAPHY ───────────────────────────────────────────── */
  --font-display:       'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-2xs:           0.6875rem;   /* 11px — eyebrows, tags */
  --text-xs:            0.75rem;     /* 12px — captions */
  --text-sm:            0.8125rem;   /* 13px — small body */
  --text-base:          0.9375rem;   /* 15px — body */
  --text-md:            1rem;        /* 16px — body large */
  --text-lg:            1.125rem;    /* 18px — lead */
  --text-xl:            1.375rem;    /* 22px — sub-heading */
  --text-2xl:           clamp(1.5rem, 2.5vw, 1.875rem);   /* h3 */
  --text-3xl:           clamp(2rem, 4vw, 2.75rem);        /* h2 */
  --text-4xl:           clamp(2.5rem, 6vw, 4rem);         /* h1 small */
  --text-5xl:           clamp(3rem, 8vw, 6rem);           /* hero */
  --text-6xl:           clamp(3.5rem, 10vw, 7.5rem);      /* hero XL */

  --leading-tight:      1.1;
  --leading-snug:       1.3;
  --leading-normal:     1.6;
  --leading-relaxed:    1.75;

  --tracking-tight:     -0.03em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.12em;

  /* ─── SHADOWS ──────────────────────────────────────────────── */
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:          0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:          0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl:          0 32px 80px rgba(0, 0, 0, 0.7);
  --shadow-amber:       0 12px 32px rgba(196, 129, 61, 0.25);

  /* ─── EFFECTS ──────────────────────────────────────────────── */
  --blur-nav:           blur(12px) saturate(1.4);
  --blur-modal:         blur(20px);

  /* ─── MOTION ───────────────────────────────────────────────── */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:          cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast:      0.18s;
  --duration-base:      0.28s;
  --duration-slow:      0.6s;

  /* ─── LAYOUT ───────────────────────────────────────────────── */
  --container:          1200px;
  --container-narrow:   880px;
  --container-wide:     1440px;
  --gutter:             24px;
  --gutter-lg:          32px;

  --nav-height:         84px;

  /* ─── BREAKPOINTS (référence — utiliser en min-width:) ─────── */
  /* --bp-sm: 640px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px; */
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0.01ms;
    --duration-base:    0.01ms;
    --duration-slow:    0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}