/* ==========================================================================
   Cap Sénégal — Design tokens « Terre Ferme »
   Implémentation : CSS pur, à charger avant le thème.
   Namespace : --cs-*  (classes : .cs-*)
   Contrastes vérifiés WCAG AA sur fond --cs-bg et --cs-surface.
   ========================================================================== */

:root {

  /* ----- Couleurs · fonds ------------------------------------------------ */
  --cs-bg:            #F4EDE0;  /* fond de page (sable) */
  --cs-surface:       #FFFCF5;  /* cartes, encadrés, zone de lecture */
  --cs-surface-alt:   #EBDFC8;  /* chips nav, fonds légers, zébrures */
  --cs-dark:          #241C13;  /* bandes structurelles foncées */
  --cs-footer:        #1E1710;  /* footer */

  /* ----- Couleurs · texte ------------------------------------------------ */
  --cs-text:          #241C13;  /* texte courant        — 13.9:1 sur surface */
  --cs-text-2:        #5C4E38;  /* extraits, chapô      —  7.6:1 */
  --cs-text-3:        #6F5F43;  /* méta, légendes       —  6.0:1 */
  --cs-text-inv:      #F9F1E4;  /* texte sur fonds foncés */
  --cs-text-inv-2:    #CBBB9C;  /* texte secondaire sur fonds foncés */

  /* ----- Couleurs · accents ---------------------------------------------- */
  --cs-accent:        #9C4A12;  /* ocre primaire (structure, rubriques) — 6.0:1 sur surface */
  --cs-accent-hover:  #7E3A0C;  /* hover / focus de l'accent */
  --cs-accent-soft:   #C9752F;  /* ocre clair : UNIQUEMENT sur fonds foncés — 4.9:1 sur --cs-dark */
  --cs-blue:          #2A6478;  /* bleu Atlantique : liens dans le texte — 6.4:1 */
  --cs-blue-hover:    #1F4E5F;

  /* ----- Couleurs · bordures & états ------------------------------------- */
  --cs-border:        #DACBAF;  /* filets, bordures de cartes */
  --cs-border-strong: #241C13;  /* filets appuyés */
  --cs-focus-ring:    #2A6478;  /* outline: 2px solid, offset 2px */

  /* ----- Typographie ------------------------------------------------------
     Titres  : Newsreader (Google Fonts, opsz 6..72, wght 400–700)
     Corps   : Work Sans  (Google Fonts, wght 400–700)               */
  --cs-font-serif:    'Newsreader', 'Iowan Old Style', Georgia, serif;
  --cs-font-sans:     'Work Sans', 'Segoe UI', system-ui, sans-serif;

  /* Échelle typographique (ratio ~1.25, base 16px) */
  --cs-fs-xs:    0.75rem;   /* 12px — kickers rubrique, mentions */
  --cs-fs-sm:    0.8438rem; /* 13.5px — méta, légendes, footer */
  --cs-fs-base:  1rem;      /* 16px — corps de texte */
  --cs-fs-md:    1.125rem;  /* 18px — chapô, corps article (desktop) */
  --cs-fs-lg:    1.3125rem; /* 21px — titres de cartes, h3 */
  --cs-fs-xl:    1.75rem;   /* 28px — h2, titres de sections */
  --cs-fs-2xl:   2.5rem;    /* 40px — h1 article, titre hero */
  --cs-fs-disp:  3.25rem;   /* 52px — wordmark, en-têtes de rubrique */

  --cs-lh-tight: 1.15;      /* grands titres */
  --cs-lh-snug:  1.3;       /* titres de cartes */
  --cs-lh-body:  1.65;      /* texte courant */

  --cs-ls-kicker: 0.16em;   /* letter-spacing des kickers uppercase */

  /* ----- Espacements (base 4px) ------------------------------------------ */
  --cs-sp-1:  0.25rem;   /*  4px */
  --cs-sp-2:  0.5rem;    /*  8px */
  --cs-sp-3:  0.75rem;   /* 12px */
  --cs-sp-4:  1rem;      /* 16px */
  --cs-sp-5:  1.5rem;    /* 24px */
  --cs-sp-6:  2rem;      /* 32px */
  --cs-sp-7:  3rem;      /* 48px */
  --cs-sp-8:  4rem;      /* 64px */

  /* ----- Rayons ----------------------------------------------------------- */
  --cs-r-0:    0;        /* cartes, images, tableaux : angles vifs */
  --cs-r-sm:   4px;      /* champs de formulaire */
  --cs-r-pill: 999px;    /* chips de nav, champ recherche */

  /* ----- Ombres ----------------------------------------------------------- */
  --cs-shadow-sm: 0 1px 2px rgba(36, 28, 19, 0.06);
  --cs-shadow-md: 0 4px 16px rgba(36, 28, 19, 0.10);

  /* ----- Navigation mobile (panneau burger) ------------------------------- */
  --cs-scrim:        rgba(36, 28, 19, 0.45);  /* voile derrière le panneau */
  --cs-nav-panel-w:  310px;                    /* largeur du panneau */
  --cs-nav-item-h:   46px;                     /* hauteur d'item (cible ≥44px) */
  --cs-transition:   200ms ease;               /* transitions UI (panneau, hover) */

  /* ----- Mise en page ------------------------------------------------------ */
  --cs-content-max: 1184px;  /* largeur utile desktop */
  --cs-article-max: 720px;   /* colonne de lecture */
  --cs-sidebar-w:   320px;
  /* Breakpoints (repère, non exploitables en var) : 880px / 680px */
}

/* --------------------------------------------------------------------------
   Règles d'usage (pour le dev)
   - Le texte courant est TOUJOURS --cs-text sur --cs-bg ou --cs-surface.
     L'ocre ne sert jamais de fond derrière du texte de lecture.
   - --cs-accent : kickers de rubrique, filets épais, borders top de cartes,
     boutons. Hover → --cs-accent-hover.
   - --cs-blue : liens dans le corps de texte uniquement. Hover → underline
     + --cs-blue-hover.
   - --cs-accent-soft : réservé aux fonds --cs-dark / --cs-footer.
   - Focus clavier : outline: 2px solid var(--cs-focus-ring); outline-offset: 2px;
   - Panneau burger (.cs-nav-panel) : transform: translateX(-100%) fermé,
     translateX(0) + .is-open ; transition transform var(--cs-transition).
     Scrim (.cs-nav-scrim) : opacity 0→1, même durée, pointer-events none/auto.
     Respecter prefers-reduced-motion: reduce → transition: none.
   -------------------------------------------------------------------------- */