/* ==========================================================================
   SABDA INTERNATIONAL — tokens.css
   Variables partagées site public + back-office (/admin/).
   Palette : cahier des charges §4. Ne pas modifier sans mettre à jour l'admin.
   Compatibilité : les variables CSS sont utilisées avec un fallback littéral
   dans base.css / site.css pour les navigateurs sans support (Android 4.x).
   ========================================================================== */
:root {
  /* --- Couleurs (cahier §4) --- */
  --c-ivoire: #F7F3ED;        /* fond principal */
  --c-sable: #E2D7C8;         /* fond secondaire, bordures douces */
  --c-charbon: #1E0C0D;       /* texte principal */
  --c-brun: #3A2321;          /* texte secondaire, titres */
  --c-terre: #401215;         /* accent principal (boutons, liens actifs) */
  --c-indigo: #401215;        /* accent secondaire (liens, focus) */
  --c-foret: #7A5A52;         /* accent tertiaire (succès, stock) */
  --c-or: #B08A5A;            /* détail, avec parcimonie (filets, badges) */

  /* --- Dérivés (mélanges des couleurs ci-dessus, pas de nouvelle teinte) --- */
  --c-ivoire-2: #EFE3D6;      /* ivoire légèrement plus dense (cartes, zébrage) */
  --c-sable-2: #EFE3D6;       /* sable clair (fonds de sections) */
  --c-sable-3: #B08A5A;       /* sable foncé (bordures marquées) */
  --c-terre-2: #7A2A2F;       /* terre cuite survol */
  --c-terre-3: #EFE3D6;       /* terre cuite très clair (alertes douces) */
  --c-terre-text: #7A2A2F;    /* terre cuite assombrie pour TEXTE petit sur ivoire/sable (AA ≥ 4.5 ; #401215 = 4.27 seulement) */
  --c-indigo-2: #1E0C0D;      /* indigo survol */
  --c-foret-2: #EFE3D6;       /* vert forêt très clair (succès fond) */
  --c-brun-2: #7A5A52;        /* brun atténué (texte discret) */
  --c-blanc: #EFE3D6;
  --c-erreur: #7A2A2F;        /* erreur : terre cuite assombrie (contraste AA) */
  --c-erreur-bg: #EFE3D6;

  /* --- Texte --- */
  --t-primary: var(--c-charbon);
  --t-secondary: var(--c-brun);
  --t-muted: var(--c-brun-2);
  --t-inverse: var(--c-blanc);   /* texte sur fond terre cuite : blanc = 4.84 (AA), ivoire = 4.27 (insuffisant) */

  /* --- Typographie --- */
  --f-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-sans: "Jost", "Futura", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */
  --fs-4xl: 3.75rem;   /* 60px */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;
  --lh-loose: 1.75;

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

  --ls-caps: 0.12em;   /* lettrage des petites capitales */

  /* --- Espacements (échelle 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --gutter: 1rem;              /* marge latérale mobile (16px) */
  --gutter-lg: 2.5rem;
  --container: 76rem;          /* 1216px */
  --container-narrow: 46rem;   /* 736px : colonnes de lecture */

  /* --- Rayons --- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* --- Ombres (très douces : lumière naturelle) --- */
  --sh-sm: 0 1px 2px rgba(30,12,13, 0.06);
  --sh-md: 0 4px 12px rgba(30,12,13, 0.08);
  --sh-lg: 0 12px 32px rgba(30,12,13, 0.12);

  /* --- Bordures --- */
  --bd: 1px solid var(--c-sable);
  --bd-strong: 1px solid var(--c-sable-3);

  /* --- Mouvement (transitions ≤ 200 ms uniquement) --- */
  --tr-fast: 120ms ease-out;
  --tr-base: 180ms ease-out;

  /* --- Hauteurs fixes --- */
  --h-header: 64px;            /* v3 : en-tête UNE ligne (mobile) */
  --h-header-lg: 92px;         /* v3 : ≤ 96 px desktop */
  --h-header-compact: 56px;    /* v3 : réduit au défilement */
  --h-logo: 48px;
  --h-logo-lg: 64px;
  --h-control: 44px;           /* cible tactile minimale */

  /* --- Z-index --- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}