/* ============================================================
   TDN Design Tokens — CSS custom properties
   Source canonique : docs/tokens/tdn-tokens.json (W3C DT)
   Brand : Tomber des Nues (TDN)
   Version : 0.2 (2026-04-29)

   Convention de nommage :
     --tdn-<category>-<name>[-<variant>]
   Catégories : color, font-family, font-weight, font-size,
                line-height, letter-spacing, spacing, radius,
                shadow, container, gradient, blur, opacity

   Les tokens sémantiques (text-default, surface-dark, etc.)
   référencent les primitives via var(--...).
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLOR — Primitives
     -------------------------------------------------------- */

  /* Brand · Pink */
  --tdn-color-pink-50:        #FEF6F9;
  --tdn-color-pink-50-deep:   #FBE9EC;  /* nuance plus saturée que pink-50, observée Figma sur Photos section */
  --tdn-color-pink-100:       #F6C9D0;
  --tdn-color-pink-200:       #C06D80;
  --tdn-color-pink-500:       #C06D80;  /* brand primary — assombri 2026-05-29 (ex #C2185B jugé trop flashy, hors charte) */
  --tdn-color-pink-600:       #C06D80;  /* hover du brand (un cran sous le nouveau pink-500) */
  --tdn-color-pink-700:       #9c413d;  /* rouge-marron — naming Figma incorrect */

  /* Brand · Midnight */
  --tdn-color-midnight-900: #1A1A2E;  /* brand secondary */

  /* Neutral */
  --tdn-color-neutral-0:    #FFFFFF;
  --tdn-color-neutral-50:   #FAFAFA;
  --tdn-color-neutral-100:  #F0F0F0;
  --tdn-color-neutral-200:  #EBEBEB;
  --tdn-color-neutral-400:  #C0C0C0;
  --tdn-color-neutral-600:  #999999;  /* AA fail — placeholder only */
  --tdn-color-neutral-700:  #4D4D4C;
  --tdn-color-neutral-900:  #2A2827;

  /* --------------------------------------------------------
     COLOR — Semantic aliases (use these in components)
     -------------------------------------------------------- */

  /* Text */
  --tdn-color-text-default:       var(--tdn-color-midnight-900);
  --tdn-color-text-strong:        var(--tdn-color-neutral-900);
  --tdn-color-text-muted:         var(--tdn-color-neutral-700);
  --tdn-color-text-placeholder:   var(--tdn-color-neutral-600);
  --tdn-color-text-inverted:      var(--tdn-color-neutral-0);
  --tdn-color-text-on-dark:       var(--tdn-color-neutral-0);
  --tdn-color-text-on-dark-muted: var(--tdn-color-pink-100);
  --tdn-color-text-accent:        var(--tdn-color-pink-500); /* règle B1 — JAMAIS body */

  /* Surface */
  --tdn-color-surface-default: var(--tdn-color-neutral-0);
  --tdn-color-surface-subtle:  var(--tdn-color-pink-50);
  --tdn-color-surface-muted:   var(--tdn-color-neutral-50);
  --tdn-color-surface-dark:    var(--tdn-color-midnight-900);

  /* Border */
  --tdn-color-border-default: var(--tdn-color-neutral-200);
  --tdn-color-border-subtle:  var(--tdn-color-neutral-100);

  /* Action (buttons, CTAs) */
  --tdn-color-action-primary:         var(--tdn-color-pink-500);
  --tdn-color-action-primary-hover:   var(--tdn-color-pink-600);
  --tdn-color-action-primary-fg:      var(--tdn-color-neutral-0);
  --tdn-color-action-primary-icon-bg: var(--tdn-color-midnight-900);
  --tdn-color-action-secondary:       var(--tdn-color-neutral-0);
  --tdn-color-action-secondary-fg:    var(--tdn-color-midnight-900);

  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */

  --tdn-font-family-brand: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Weights */
  --tdn-font-weight-regular:  400;
  --tdn-font-weight-medium:   500;  /* officialisé Phase 3 (2026-05-29) — body lead premium, paragraphes éditoriaux, caption uppercase signature. Interdit eyebrows. */
  --tdn-font-weight-semibold: 600;  /* officialisé Phase 3.6 — labels CTA / boutons (self-hosté). */
  --tdn-font-weight-bold:     700;
  --tdn-font-weight-black:    900;

  /* Sizes */
  --tdn-font-size-12: 12px;
  --tdn-font-size-14: 14px;
  --tdn-font-size-16: 16px;
  --tdn-font-size-18: 18px;
  --tdn-font-size-20: 20px;
  --tdn-font-size-24: 24px;
  --tdn-font-size-32: 32px;
  --tdn-font-size-36: 36px;
  --tdn-font-size-60: 60px;
  --tdn-font-size-72: 72px;
  --tdn-font-size-82: 82px;
  --tdn-font-size-92: 92px;

  /* Line heights */
  --tdn-line-height-tight:   1.0;
  --tdn-line-height-snug:    1.15;
  --tdn-line-height-normal:  1.2;
  --tdn-line-height-relaxed: 1.5;
  --tdn-line-height-loose:   1.625;

  /* Letter spacings */
  --tdn-letter-spacing-display-xl: -6px;
  --tdn-letter-spacing-display-lg: -4.32px;
  --tdn-letter-spacing-display:    -3.68px;
  --tdn-letter-spacing-tight:      -1.8px;
  --tdn-letter-spacing-normal:     0;
  --tdn-letter-spacing-wide:       1.2px;
  --tdn-letter-spacing-wider:      2.7px;
  --tdn-letter-spacing-pill:       2px;    /* officialisé Phase 3 — eyebrows 14px format pill (case-study badge, realisations filter) */
  --tdn-letter-spacing-widest:     3.6px;

  /* --------------------------------------------------------
     SPACING — 4-pt grid
     -------------------------------------------------------- */

  --tdn-spacing-0:   0;
  --tdn-spacing-4:   4px;
  --tdn-spacing-8:   8px;
  --tdn-spacing-12:  12px;
  --tdn-spacing-16:  16px;
  --tdn-spacing-20:  20px;
  --tdn-spacing-24:  24px;
  --tdn-spacing-32:  32px;
  --tdn-spacing-40:  40px;
  --tdn-spacing-48:  48px;
  --tdn-spacing-52:  52px;  /* page gutter */
  --tdn-spacing-60:  60px;
  --tdn-spacing-64:  64px;
  --tdn-spacing-80:  80px;
  --tdn-spacing-100: 100px;
  --tdn-spacing-120: 120px;

  /* --------------------------------------------------------
     RADIUS
     -------------------------------------------------------- */

  --tdn-radius-none:         0;
  --tdn-radius-lg:           24px;
  --tdn-radius-xl:           32px;
  --tdn-radius-2xl:          40px;
  --tdn-radius-full:         9999px;
  --tdn-radius-button-pill:  9999px; /* ≤2 mots, sans icône, h≤44px */
  --tdn-radius-button-large: 40px;   /* 3+ mots, ou avec icône, ou h>44px */

  /* --------------------------------------------------------
     SHADOW
     -------------------------------------------------------- */

  --tdn-shadow-soft:       0 14px 16px 0 rgba(0, 0, 0, 0.10);
  --tdn-shadow-strong:     0 14px 32px 0 rgba(0, 0, 0, 0.10);
  --tdn-shadow-text-hero:  0 4px 4px rgba(0, 0, 0, 0.25);
  --tdn-shadow-inset-glow: inset 0 4px 8px 0 rgba(244, 244, 254, 0.25);

  /* --------------------------------------------------------
     CONTAINER
     -------------------------------------------------------- */

  --tdn-container-max:      1336px;
  --tdn-container-narrow:   993px;
  --tdn-container-gutter:   52px;
  --tdn-container-viewport: 1440px;

  /* --------------------------------------------------------
     GRADIENT
     -------------------------------------------------------- */

  --tdn-gradient-glass-pill:        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.30) 100%);
  --tdn-gradient-hero-overlay:      linear-gradient(180deg, rgba(26, 26, 46, 0) 40%, rgba(26, 26, 46, 0.7) 100%);
  --tdn-gradient-divider-pink-fade: linear-gradient(90deg, #C06D80 0%, rgba(192, 109, 128, 0) 100%);

  /* --------------------------------------------------------
     BLUR
     -------------------------------------------------------- */

  --tdn-blur-navbar-backdrop: blur(10px);
  --tdn-blur-hero-bg:         blur(1px);

  /* --------------------------------------------------------
     OPACITY
     -------------------------------------------------------- */

  --tdn-opacity-card-decoration: 0.1;
  --tdn-opacity-nav-inactive:    0.7;
  --tdn-opacity-stat-caption:    0.5;
  --tdn-opacity-navbar-fill:     0.8;

}