/* ============================================================
   kerbala.fr — Design Tokens
   Source : DESIGN.md — "Sacred Minimalism" / High-Contrast Editorial
   Toutes les valeurs sont exposées en CSS custom properties
   pour pouvoir être consommées par main.css et par les modules JS.
   ============================================================ */

:root {
  /* ---------- COULEURS (palette monochrome stricte) ---------- */
  --color-bg:                    #000000;      /* canvas principal — solennité */
  --color-bg-elevated-1:         #121212;      /* élévation tonale niveau 1 */
  --color-bg-elevated-2:         #1f2020;      /* élévation tonale niveau 2 (surface-container) */
  --color-bg-elevated-3:         #2a2a2a;      /* élévation tonale niveau 3 */
  --color-bg-elevated-4:         #353535;      /* élévation tonale niveau 4 */

  --color-bg-light:              #f5f5f4;      /* fond clair pour Shop (option (c) : pages catalogue) */
  --color-bg-light-elevated:     #ffffff;      /* cards sur fond clair */

  --color-fg:                    #ffffff;      /* texte principal sur noir — légibilité maximale */
  --color-fg-muted:              rgba(255,255,255,0.72);  /* texte secondaire */
  --color-fg-soft:               rgba(255,255,255,0.48);  /* texte tertiaire / métadonnées */
  --color-fg-faint:              rgba(255,255,255,0.24);  /* hint, placeholder */

  --color-fg-on-light:           #131313;      /* texte sur fond clair */
  --color-fg-on-light-muted:     rgba(19,19,19,0.64);
  --color-fg-on-light-soft:      rgba(19,19,19,0.40);

  --color-line:                  rgba(255,255,255,0.15);  /* hairline divider — signature visuelle */
  --color-line-strong:           rgba(255,255,255,0.24);
  --color-line-on-light:         rgba(19,19,19,0.12);

  --color-accent:                #ffffff;       /* l'accent est le blanc lui-même (inversion) */
  --color-error:                 #ffb4ab;
  --color-success:               #b6e3b6;

  /* ---------- TYPOGRAPHIE ---------- */
  --font-serif:   'Instrument Serif', 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:    'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Échelle modulaire — desktop */
  --type-display-xl-size:        clamp(64px, 8.5vw, 120px);
  --type-display-xl-lh:          110%;
  --type-display-xl-ls:          -0.04em;

  --type-headline-lg-size:       clamp(32px, 4vw, 48px);
  --type-headline-lg-lh:         120%;
  --type-headline-lg-ls:         -0.02em;

  --type-headline-md-size:       clamp(24px, 2.4vw, 32px);
  --type-headline-md-lh:         130%;
  --type-headline-md-ls:         -0.01em;

  --type-body-lg-size:           18px;
  --type-body-lg-lh:             160%;
  --type-body-lg-ls:             0.01em;
  --type-body-lg-weight:         300;

  --type-body-md-size:           16px;
  --type-body-md-lh:             160%;
  --type-body-md-weight:         400;

  --type-body-sm-size:           14px;
  --type-body-sm-lh:             150%;

  --type-label-caps-size:        12px;
  --type-label-caps-lh:          100%;
  --type-label-caps-ls:          0.2em;
  --type-label-caps-weight:      600;

  /* ---------- ESPACEMENT ---------- */
  --space-3xs:  4px;
  --space-2xs:  8px;
  --space-xs:   12px;
  --space-s:    16px;
  --space-m:    24px;
  --space-l:    32px;
  --space-xl:   48px;
  --space-2xl:  64px;
  --space-3xl:  80px;     /* margin desktop */
  --space-4xl:  120px;
  --space-5xl:  160px;    /* section gap signature */
  --space-mobile-margin:  20px;

  --container-max:     1600px;
  --gutter:            24px;

  /* ---------- BORDERS / RADIUS ---------- */
  /* DESIGN.md : tous les border-radius à 0px. Strictement géométrique. */
  --radius-base:       0px;
  --radius-circle:     50%;  /* uniquement icônes fonctionnelles ou masks décoratifs */

  --border-hairline:   0.5px solid var(--color-line);
  --border-thin:       1px solid var(--color-line);
  --border-strong:     1px solid var(--color-line-strong);

  /* ---------- ANIMATIONS ---------- */
  --ease-out-soft:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:     200ms;
  --duration-base:     400ms;     /* DESIGN.md : 400ms ease-in-out par défaut */
  --duration-slow:     800ms;
  --duration-glacial:  1400ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:        1;
  --z-elevated:    10;
  --z-header:      100;
  --z-overlay:     500;
  --z-modal:       1000;
  --z-tooltip:     1500;
  --z-cursor:      9999;

  /* ---------- HEADER ---------- */
  --header-height: 80px;
}

/* Respect des préférences utilisateur — animations réduites */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    1ms;
    --duration-base:    1ms;
    --duration-slow:    1ms;
    --duration-glacial: 1ms;
  }
}