/* Liaison — jetons de marque (site + app web)
   Police : <link href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600&display=swap" rel="stylesheet"> */

:root {
  /* Marque */
  --li-abricot: #C66846;          /* symbole, illustrations, grands aplats — jamais texte < 24px */
  --li-abricot-profond: #A14D2F;  /* boutons principaux, liens, focus — 5.6:1 sur surface */
  --li-abricot-clair: #FDD4C6;    /* fonds de badges, sélection — texte encre dessus */
  --li-abricot-nuit: #F69370;     /* symbole et accents sur fond encre */

  /* Neutres */
  --li-encre: #23211E;            /* texte principal */
  --li-encre-2: #55504A;          /* texte secondaire — 7.1:1 */
  --li-gris: #6B655D;             /* légendes, métadonnées — 5.2:1 */
  --li-filet-fort: #CFC7BB;       /* bordures de champs */
  --li-filet: #E4DED4;            /* séparateurs, bordures de cartes */
  --li-papier: #F6F2EC;           /* fond de page */
  --li-surface: #FDFBF8;          /* cartes, feuilles, modales */

  /* États */
  --li-succes: #2B7351;   --li-succes-fond: #D8F3E3;
  --li-attention: #9A6418; --li-attention-fond: #FDECD1;
  --li-erreur: #B33736;   --li-erreur-fond: #FFE3DF;
  --li-info: #34698C;     --li-info-fond: #DDEEFB;

  /* Typographie — une seule famille pour le français et l'arabe */
  --li-font: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --li-fs-display: 40px;  --li-lh-display: 1.1;   /* 600, -0.03em */
  --li-fs-titre: 28px;    --li-lh-titre: 1.2;     /* 600, -0.02em */
  --li-fs-sous-titre: 20px; --li-lh-sous-titre: 1.3; /* 500 */
  --li-fs-corps: 16px;    --li-lh-corps: 1.55;    /* 400 (300 pour les longs textes) */
  --li-fs-petit: 14px;    --li-lh-petit: 1.5;     /* 400 */
  --li-fs-legende: 12px;  --li-lh-legende: 1.4;   /* 500 */

  /* Formes */
  --li-r-xs: 6px;   /* badges, puces */
  --li-r-s: 10px;   /* champs, boutons */
  --li-r-m: 14px;   /* cartes */
  --li-r-l: 22px;   /* feuilles, modales */
  --li-r-pill: 999px;

  /* Espacements (base 4) */
  --li-e-1: 4px; --li-e-2: 8px; --li-e-3: 12px; --li-e-4: 16px;
  --li-e-5: 24px; --li-e-6: 32px; --li-e-7: 48px; --li-e-8: 64px;

  --li-ombre: 0 1px 2px rgb(35 33 30 / 0.06), 0 6px 20px rgb(35 33 30 / 0.06);
  --li-focus: 0 0 0 3px var(--li-surface), 0 0 0 5px var(--li-abricot-profond);
}

/* L'arabe se lit un peu plus petit à taille égale : on compense légèrement. */
:lang(ar), [dir="rtl"] { font-size: 1.04em; line-height: 1.65; letter-spacing: 0; }

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --li-papier: #1B1A18; --li-surface: #23211E; --li-encre: #F6F2EC;
    --li-encre-2: #CFC7BB; --li-gris: #A39B90; --li-filet: #3A3733; --li-filet-fort: #55504A;
    --li-abricot-profond: #F69370; --li-abricot: #F69370; --li-abricot-clair: #4A2C20;
  }
}