/* ═══════════════════════════════════════════════════════════════
   OnTyme — design-tokens.css
   Source UNIQUE des tokens. Lié en PREMIER dans index/login/admin.
   Thème sombre par défaut ; clair via :root[data-theme="light"].
   Identité : monochrome + un seul accent lime, réservé au « flash »
   (nouveauté en direct) et à l'action principale.
   ═══════════════════════════════════════════════════════════════ */

:root {                      /* SOMBRE (défaut) */
  --ff-bg:            #0B0B0C;
  --ff-surface-1:     #141416;   /* carte */
  --ff-surface-2:     #1A1A1D;   /* élevé */
  --ff-surface-inset: #1F1F24;   /* placeholder image */
  --ff-border:        rgba(255,255,255,0.08);
  --ff-border-strong: rgba(255,255,255,0.14);
  --ff-border-accent: rgba(199,249,78,0.45);
  --ff-text-1:        #F5F5F7;
  --ff-text-2:        #9A9AA2;
  --ff-text-3:        #6A6A72;
  --ff-accent:        #C7F94E;   /* fill lime */
  --ff-accent-hover:  #D4FF66;
  --ff-on-accent:     #0B0B0C;   /* texte sur lime (les deux thèmes) */
  --ff-accent-text:   #C7F94E;   /* lime en TEXTE/label (ex. "Live") */
  --ff-accent-tint:   rgba(199,249,78,0.12); /* fond nav actif */
}

:root[data-theme="light"] {  /* CLAIR */
  --ff-bg:            #F7F7F6;
  --ff-surface-1:     #FFFFFF;
  --ff-surface-2:     #FFFFFF;
  --ff-surface-inset: #F0F0EF;
  --ff-border:        rgba(0,0,0,0.09);
  --ff-border-strong: rgba(0,0,0,0.16);
  --ff-border-accent: rgba(120,160,0,0.55);
  --ff-text-1:        #17171A;
  --ff-text-2:        #5A5A62;
  --ff-text-3:        #8A8A92;
  --ff-accent:        #C7F94E;
  --ff-accent-hover:  #B8EE3E;
  --ff-on-accent:     #0B0B0C;
  --ff-accent-text:   #4E6B00;   /* lime foncé lisible sur blanc */
  --ff-accent-tint:   rgba(199,249,78,0.28);
}

:root {
  /* Échelle typographique — SEULE source des tailles de police */
  --ff-fs-xs: 11px; --ff-fs-sm: 12px; --ff-fs-md: 14px;
  --ff-fs-lg: 16px; --ff-fs-xl: 18px; --ff-fs-2xl: 22px;

  /* Échelle d'espacement — SEULE source des espacements */
  --ff-space-1: 4px; --ff-space-2: 8px; --ff-space-3: 12px;
  --ff-space-4: 16px; --ff-space-5: 20px; --ff-space-6: 24px; --ff-space-8: 32px;

  /* Rayons */
  --ff-radius-sm: 8px; --ff-radius-md: 12px; --ff-radius-pill: 999px;

  /* Graisses : deux seulement */
  --ff-weight-normal: 400;
  --ff-weight-medium: 500;

  /* Police */
  --ff-font: 'Inter', system-ui, -apple-system, sans-serif;
}