/* =============================================================
   Design tokens — Stock cabinet dentaire / La Badgeuse
   -------------------------------------------------------------
   Source de vérité pour la couleur, la typographie, l'espacement,
   les rayons et les ombres. Aucun composant ne doit utiliser de
   valeur en dur : tout passe par ces tokens. Ces variables sont
   conçues pour être réutilisées telles quelles dans La Badgeuse
   afin de maintenir la cohérence inter-produits.
   ============================================================= */

:root {
  /* -------------------------------------------------------------
     Couleur signature (validée Phase 0).
     --brand-900 est la valeur historique --ba-primary, theme-color
     iOS et fond navbar/drawer. Les autres teintes en dérivent par
     une échelle HSL régulière (H=204°, S=77%, L variable).
     ------------------------------------------------------------- */
  --brand-900: #10507b;     /* base — navbar, theme-color, accents forts */
  --brand-800: #0d4163;     /* shade ~-5% L — boutons primary, liens */
  --brand-700: #0b3551;     /* shade ~-10% L — hover boutons primary */
  --brand-100: #dbeefa;     /* tint très clair — fond actif subtil, focus ring */
  --brand-50:  #f1f7fb;     /* tint quasi-blanc — surface subtile, hover ghost */

  /* RGB séparés pour les ombres teintées (rgba(var(--brand-shadow-rgb), …)) */
  --brand-shadow-rgb: 16, 80, 123;

  /* -------------------------------------------------------------
     Neutres froids (gris-bleus). Échelle Tailwind-like calibrée
     pour un excellent contraste sur fond blanc.
     ------------------------------------------------------------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafbfc;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-500: #6b7280;
  --neutral-700: #374151;
  --neutral-900: #111827;

  /* -------------------------------------------------------------
     États sémantiques (volontairement désaturés).
     Pas de rouge vif, pas de jaune fluo : c'est un cabinet, pas
     un dashboard d'astreinte.
     ------------------------------------------------------------- */
  --success:    #2f7a5a;
  --success-bg: #ecf5f0;
  --warning:    #8a5715;    /* assombri : ~5,9:1 sur --warning-bg (WCAG AA texte) */
  --warning-bg: #fbf3e6;
  --danger:     #a83232;
  --danger-bg:  #fbeded;

  /* -------------------------------------------------------------
     Typographie.
     Police principale : Inter (chargée dans _base.css). Fallback
     système immédiat le temps que le woff2 se télécharge.
     L'échelle de tailles part de 15px pour densifier les listes
     sans tomber dans l'illisible.
     ------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   0.75rem;     /* 12px — eyebrow, badges, légende */
  --text-sm:   0.875rem;    /* 14px — métadonnées, labels secondaires */
  --text-base: 0.9375rem;   /* 15px — corps de texte par défaut */
  --text-lg:   1.0625rem;   /* 17px — H3, intro */
  --text-xl:   1.25rem;     /* 20px — H2 */
  --text-2xl:  1.5rem;      /* 24px — H1 sections internes */
  --text-3xl:  1.875rem;    /* 30px — H1 page, KPI */

  --leading-tight:  1.25;
  --leading-normal: 1.5;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* -------------------------------------------------------------
     Espacement — échelle multiple de 4px.
     ------------------------------------------------------------- */
  --space-1:  0.25rem;      /*  4px */
  --space-2:  0.5rem;       /*  8px */
  --space-3:  0.75rem;      /* 12px */
  --space-4:  1rem;         /* 16px */
  --space-5:  1.25rem;      /* 20px */
  --space-6:  1.5rem;       /* 24px */
  --space-8:  2rem;         /* 32px */
  --space-10: 2.5rem;       /* 40px */
  --space-12: 3rem;         /* 48px */

  /* -------------------------------------------------------------
     Rayons. La cible Stripe/Linear utilise des arrondis courts.
     Le pill 999px est conservé pour badges/pastilles uniquement.
     ------------------------------------------------------------- */
  --radius-sm:   4px;       /* badges */
  --radius-md:   6px;       /* boutons, inputs */
  --radius-lg:  10px;       /* cards petites, panels */
  --radius-xl:  14px;       /* cards grandes, modales */
  --radius-pill: 999px;     /* pastilles, avatars circulaires */

  /* -------------------------------------------------------------
     Ombres — teintées brand pour cohérence d'ensemble.
     ------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px  rgba(var(--brand-shadow-rgb), 0.04);
  --shadow-sm: 0 1px 3px  rgba(var(--brand-shadow-rgb), 0.06),
               0 1px 2px  rgba(var(--brand-shadow-rgb), 0.04);
  --shadow-md: 0 4px 12px rgba(var(--brand-shadow-rgb), 0.06);
  --shadow-lg: 0 12px 32px rgba(var(--brand-shadow-rgb), 0.08);

  /* -------------------------------------------------------------
     Bordures pré-composées.
     ------------------------------------------------------------- */
  --border-subtle: 1px solid var(--neutral-200);
  --border-strong: 1px solid var(--neutral-300);

  /* -------------------------------------------------------------
     Cible tactile (HIG / WCAG 2.5.5).
     Préservée depuis l'ancien design system pour compatibilité
     iPad / iPhone.
     ------------------------------------------------------------- */
  --tap-min: 44px;

  /* -------------------------------------------------------------
     Anneau de focus accessible — défini ici car réutilisé sur
     boutons, inputs, liens, et toute cible interactive.
     ------------------------------------------------------------- */
  /* Double liseré : anneau blanc interne + anneau brand-700 (~8,5:1 sur blanc).
     Visible au clavier sur fond clair ET sur les boutons foncés (le liseré
     blanc détache l'anneau sombre du bouton). Remplace l'ancien brand-100
     (1,19:1 sur blanc : quasi invisible). */
  --focus-ring: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--brand-700);
  --focus-ring-strong: 0 0 0 2px var(--brand-900);
}