/*
 * ASAP Delivery — Design system, direction D « ASAP Red & Black » (Phase 1 : base).
 * Référence : docs/DESIGN_SYSTEM.md
 *
 * Volontairement minimal : le fond de page (#main-content .container-fluid), la couleur du texte
 * (body), les titres (h1–h6) et les familles de polices passent déjà par les variables
 * historiques ré-aiguillées dans tokens.css. Ce fichier n'ajoute que ce qui n'existait pas :
 * police arabe, lissage, sélection, focus visible accessible, barres de défilement.
 * Aucune règle de composant ici (Phases 2/3), aucun !important, propriétés logiques (RTL).
 */

/* Cairo : repli pour les glyphes arabes uniquement (voir --primary-font/--secondary-font dans
   tokens.css). Même fournisseur que les polices déjà importées par css/sass/style.css. */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap");

body.with-sidebar {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scrollbar-color: var(--ds-border-strong) transparent;
}

body.with-sidebar ::selection {
    background-color: var(--ds-primary-soft);
    color: var(--ds-primary-soft-text);
}

/* Focus clavier uniforme et visible (cramoisi de marque). :focus-visible n'affecte pas les clics
   souris ; :where() garde une spécificité basse pour que les composants (Phases 2/3) puissent
   affiner leur propre état de focus. */
body.with-sidebar :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

/* Montants, compteurs et identifiants alignés en colonnes (classe utilitaire opt-in). */
.ds-num {
    font-variant-numeric: tabular-nums;
}

.ds-mono {
    font-family: var(--ds-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Contrôles natifs (cases, radios, barres de défilement, sélecteurs de date) cohérents avec le
   thème : sans cela, les cases non cochées restaient blanches en mode sombre. */
body.with-sidebar {
    color-scheme: light;
}

body.with-sidebar.dark-mode {
    color-scheme: dark;
}