/**
 * ══════════════════════════════════════════════════════════════
 * 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);

  /* ============================================================
     ✒️ SOCLE COMMUN GRUBKIT — typographie et nuances de texte

     Les écrans partagés avec les autres cartes GrubKit (Assistance,
     QR code, Show Style, Carte print) sont écrits en variables, jamais
     en couleurs fixes : le MÊME gabarit tourne sur chaque site, et
     chaque site sert ses propres valeurs. C'est ce qui permet de garder
     une base commune sans imposer une identité à tout le monde.

     Sans ces définitions, ces écrans tombaient sur les valeurs de repli
     du navigateur — d'où leur aspect étranger au reste de l'admin.

     NB : polices, tailles, graisses, interlignes et nuances de texte
     (--font-body, --text-*, --weight-*, --leading-*, --tracking-*,
     --color-text-*) sont DÉJÀ définies par assets/styles/typography-tokens.css,
     chargé juste après ce fichier. On ne les redéclare pas ici : ce serait
     entretenir deux vérités qui divergeraient au premier réglage.
     Seuls les cinq tokens réellement absents sont ajoutés ci-dessous.
     ============================================================ */

  /* Fond des blocs et filet plus marqué que --color-border */
  --color-canvas:        #f8f8f8;    /* même valeur que --color-surface */
  --color-border-strong: #c9d0d0;

  /* Signal : le vert de validation GrubKit, et un ton d'alerte pris dans
     la famille de l'accent plutôt qu'un rouge vif étranger à la charte. */
  --color-lime:   #ACCB43;
  --color-danger: #b56f68;

  /* Anneau de focus : accessibilité au clavier, aux couleurs de la maison */
  --focus-ring: 0 0 0 3px rgba(15, 57, 62, 0.12);
}