/**
 * ══════════════════════════════════════════════════════════════
 * GRUBKIT — Design Tokens CSS
 * ══════════════════════════════════════════════════════════════
 *
 * Source unique de vérité pour les couleurs, rayons et espacements.
 * Chaque valeur hardcodée dans app.css devrait pointer vers ces variables.
 *
 * ══════════════════════════════════════════════════════════════
 */

:root {
  /* ============================================================
     🎨 COULEURS
     ============================================================ */

  /** Couleur principale (bleu nuit GrubKit) */
  --color-primary:        #0F393E;
  --color-primary-light:  #1a5560;
  --color-primary-dark:   #0a2a2e;

  /** Couleur d'accent (rose poudré) */
  --color-accent:         #F0C6C2;
  --color-accent-light:   #f7e0dd;
  --color-accent-dark:    #e0a8a3;

  /** Neutres */
  --color-white:          #ffffff;
  --color-black:          #000000;
  --color-surface:        #f8f8f8;
  --color-border:         #e0e0e0;
  --color-muted:          #888888;
  --color-text:           #1a1a1a;

  /* ============================================================
     📐 BORDER RADIUS
     ============================================================ */

  --radius-xs:   6px;
  --radius-sm:   11px;
  --radius-md:   15px;
  --radius-pill: 50px;

  /* ============================================================
     📏 ESPACEMENTS
     ============================================================ */

  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* ============================================================
     🌊 TRANSITIONS
     ============================================================ */

  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ============================================================
     🎭 OMBRES
     ============================================================ */

  --shadow-sm:  0 1px 3px rgba(15, 57, 62, 0.12);
  --shadow-md:  0 4px 12px rgba(15, 57, 62, 0.16);
  --shadow-lg:  0 8px 24px rgba(15, 57, 62, 0.20);
}