/* ═══════════════════════════════════════════════════════════════
   DarJadida Design System — LOT 1 : Tokens CSS + Typographie
   Fondations : variables, polices, utilitaires de base.
   Chargé après Bootstrap + algerian-theme.css.
   Ne modifie pas l'apparence des composants existants.
═══════════════════════════════════════════════════════════════ */

/* ── Variables (:root) ──────────────────────────────────────── */
:root {

  /* ── Couleurs — palette drapeau algérien ── */
  --dj-vert:          #006233;
  --dj-vert-fonce:    #0F6E56;
  --dj-rouge:         #C8102E;
  --dj-rouge-fonce:   #A32D2D;
  --dj-dark:          #1A1F2E;
  --dj-dark-soft:     #2C3142;

  /* Vert clair — SEUL accent autorisé sur fond sombre (retrait du doré,
     identité drapeau 2026-08-25). #006233 direct tombe a 2,18:1 sur
     --dj-dark (illisible) ; celui-ci mesure 5,46-6,27:1 selon le fond
     sombre reel du site (auth/footer/bottomnav/overlay carte). Jamais
     sur fond clair (contraste insuffisant, ~3:1 sur blanc). */
  --dj-vert-clair:    #66A185;

  /* Gris accessibles (contraste AA ≥4.5:1 sur fond blanc) */
  --dj-gris-900:  #1A1A1A;   /* texte principal */
  --dj-gris-700:  #444444;   /* texte secondaire — seuil minimum acceptable */
  --dj-gris-500:  #6B7280;   /* labels, métadonnées (contraste 4.6:1) */
  --dj-gris-300:  #D1D5DB;   /* bordures */
  --dj-gris-100:  #F3F4F6;   /* fonds de cartes */
  --dj-gris-50:   #F9FAFB;   /* fond de page */

  /* Couleurs sémantiques opérations */
  --dj-op-vente:    #006233;   /* vert  — Vente */
  --dj-op-location: #185FA5;   /* bleu  — Location */
  --dj-op-vacances: #C8102E;   /* rouge     — Location vacances */
  --dj-op-cherche:  #6B7A8F;   /* gris-bleu — Cherche Achat / Cherche Location (ex-dore) */
  --dj-op-echange:  #6B7A8F;   /* gris-bleu — Echange (ex-dore, consolide ici : duplique
                                   auparavant en local dans darjadida-cards.css, seule
                                   source maintenant) */

  /* ── Rôles de surface (LOT redesign — consolidation dark/light) ──
     Alias sémantiques vers les couleurs ci-dessus. Objectif : que
     layouts/main.php, auth/layout_dj.php et annonces/form.php pointent
     tous vers CES 3 rôles au lieu de redéclarer leurs propres --dark/
     --accent/#f4f6f9 locaux — une seule source de vérité pour les zones
     claires et les zones sombres du site. Alias purs, aucune nouvelle
     couleur : zéro impact visuel tant qu'ils ne sont pas branchés. */
  --dj-surface:         #fff;
  --dj-surface-sombre:  var(--dj-dark);
  --dj-fond-page:       var(--dj-gris-50);

  /* ── États (lot photos, 28/09) ── message d'échec d'un envoi.
     Contrastes mesurés sur --dj-erreur-fond : --dj-erreur 6,1:1 (AA),
     --dj-gris-900 15:1. Le rouge vif --dj-rouge reste réservé aux accents. */
  --dj-erreur:          var(--dj-rouge-fonce);
  --dj-erreur-fond:     #FBEAEA;

  /* ── Typographie — familles ── */
  --dj-font-titre:    'Manrope',           'Segoe UI', sans-serif;
  --dj-font-corps:    'Inter',             'Segoe UI', sans-serif;
  --dj-font-ar-titre: 'Noto Naskh Arabic', serif;
  --dj-font-ar-corps: 'Noto Sans Arabic',  sans-serif;

  /* Échelle de taille (base 16px — accessibilité 40-55 ans) */
  --dj-text-xs:   0.75rem;    /* 12px */
  --dj-text-sm:   0.875rem;   /* 14px */
  --dj-text-base: 1rem;       /* 16px */
  --dj-text-lg:   1.125rem;   /* 18px */
  --dj-text-xl:   1.25rem;    /* 20px */
  --dj-text-2xl:  1.5rem;     /* 24px */
  --dj-text-3xl:  1.875rem;   /* 30px */
  --dj-text-4xl:  2.25rem;    /* 36px */

  /* ── Espacements ── */
  --dj-space-1:   0.25rem;    /* 4px  */
  --dj-space-2:   0.5rem;     /* 8px  */
  --dj-space-3:   0.75rem;    /* 12px */
  --dj-space-4:   1rem;       /* 16px */
  --dj-space-5:   1.25rem;    /* 20px */
  --dj-space-6:   1.5rem;     /* 24px */
  --dj-space-8:   2rem;       /* 32px */
  --dj-space-10:  2.5rem;     /* 40px */
  --dj-space-12:  3rem;       /* 48px */

  /* ── Barre de navigation collante (darjadida-nav.css : 64 px mini + filet
     de 4 px) — sert aux ancres (scroll-margin-top) pour qu'une cible
     atteinte par un lien #… ne passe pas sous la barre (B12, 11/10). ── */
  --dj-hauteur-navbar: 68px;

  /* ── Rayons ── */
  --dj-radius-sm: 4px;
  --dj-radius-md: 8px;
  --dj-radius-lg: 12px;
  --dj-radius-xl: 16px;

  /* ── Ombres ── */
  --dj-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --dj-shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --dj-shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);

  /* ── Accessibilité ── */
  --dj-tap-target: 44px;   /* zone tactile minimum WCAG 2.5.5 */
  --dj-transition: 150ms ease;
}

/* ── Chiffres tabulaires ─────────────────────────────────────────
   Primitive typographique : toutes les fenêtres de chiffres ont la
   MÊME largeur, donc les prix d'une grille s'alignent en colonne et se
   comparent d'un coup d'œil au lieu de danser d'une carte à l'autre.
   Cible 40-55 ans : la comparaison de prix est le geste principal de
   la page de liste.

   font-feature-settings en second : couvre les moteurs qui ignorent
   encore font-variant-numeric. Si la police n'a pas de jeu 'tnum', les
   deux déclarations sont simplement inertes — aucun repli à prévoir.

   S'applique via cette classe (compteurs, pagination) OU directement
   sur les sélecteurs de composants numériques (cf darjadida-cards.css :
   prix, pills, badge de référence). */
.dj-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Corps de texte ──────────────────────────────────────────── */
body {
  font-family: var(--dj-font-corps);
  font-size: var(--dj-text-base);   /* 16px minimum */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Arabe : basculer vers les polices arabes ─────────────────── */
html[lang="ar"] body {
  font-family: var(--dj-font-ar-corps);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
  font-family: var(--dj-font-ar-titre);
}

/* ── Utilitaires typographiques ─────────────────────────────── */
.dj-titre {
  font-family: var(--dj-font-titre);
  font-weight: 600;
  line-height: 1.2;
}

html[lang="ar"] .dj-titre {
  font-family: var(--dj-font-ar-titre);
}

.dj-prix {
  font-family: var(--dj-font-titre);
  font-weight: 700;
  color: var(--dj-vert);
}

/* ── Focus visible (navigation clavier, contraste AA) ──────── */
/* Defaut pour fond CLAIR (majorite du site). Sur fond sombre, chaque
   composant (footer, hero, bottomnav, cards, wilaya-select dark) porte
   son propre override en --dj-vert-clair — voir ces fichiers. */
:focus-visible {
  outline: 3px solid var(--dj-vert);
  outline-offset: 2px;
  border-radius: var(--dj-radius-sm);
}