/* ============================================================
   MTGG — Design tokens (Direction · Slate, light)
   Source de vérité pour toutes les couleurs, la typo, les radius.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:        #F7F8FA;   /* fond principal */
  --bg-2:      #FFFFFF;   /* panneau, carte */
  --bg-3:      #EEF0F4;   /* hover, état actif neutre */

  /* Lignes & bordures */
  --line:        #E4E7EC;
  --line-strong: #CBD0D8;

  /* Encres (textes) */
  --ink:      #0F172A;   /* slate-900 — texte principal, titres */
  --ink-dim:  #475569;   /* slate-600 — texte secondaire */
  --ink-mute: #94A3B8;   /* slate-400 — méta, labels uppercase */

  /* Accent — INDIGO */
  --accent:        #4F46E5;   /* indigo-600 */
  --accent-2:      #4338CA;   /* indigo-700 (hover plein) */
  --accent-soft:   #EEF0FE;   /* indigo-50 — fond actif chips/nav */
  --accent-ring:   rgba(79, 70, 229, .18);  /* focus ring */

  /* Sémantiques */
  --success:  #16A34A;
  --warning:  #C77A1F;
  --danger:   #DC2626;
  --muted:    #94A3B8;

  --success-soft: #DCFCE7;
  --danger-soft:  #FEE2E2;
  --warning-soft: #FEF3E2;

  /* Couleurs MTG (pips & identités) — adaptées au fond clair */
  --mtg-w-from: #F5EDC8; --mtg-w-to: #C9B470;
  --mtg-u-from: #6FB0E2; --mtg-u-to: #1F4E7A;
  --mtg-b-from: #6B6360; --mtg-b-to: #1F1B1A;
  --mtg-r-from: #E07A5F; --mtg-r-to: #962D1A;
  --mtg-g-from: #88C190; --mtg-g-to: #2F6A3D;
  --mtg-c-from: #C2BDB2; --mtg-c-to: #807A6F;
  --mtg-m-from: #E0B25C; --mtg-m-to: #8A6C20;

  /* Typo */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Optionnel, réservé à des cas éditoriaux ponctuels — pas utilisé par défaut */
  --font-serif:   'Fraunces', 'Iowan Old Style', Georgia, serif;

  /* Radius */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-5: 14px;
  --r-pill: 999px;

  /* Hauteurs de contrôles — UNE valeur partagée pour boutons/inputs/chips.
     Mobile-first : cibles tactiles en base, densité desktop restaurée à 1024px
     (cf. « CSS mobile-first » dans CLAUDE.md). `sm` reste sous les 44px : c'est
     la taille des contrôles compacts groupés (bulk bar, en-têtes), où 44px
     chacun doublerait la hauteur de la barre. */
  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 44px;

  /* Ombres (légères, on est en flat clair) */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-3: 0 24px 48px rgba(15, 23, 42, .12);
}

@media (min-width: 1024px) {
  :root {
    --control-h-sm: 28px;
    --control-h-md: 36px;
  }
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}