/* ==========================================================================
   PANOSTEO — Design tokens (charte graphique v1.3, palette Corticale)
   Préfixe po-. Minéral est un accent graphique : jamais une couleur de texte.
   ========================================================================== */

:root {
  /* ---- Palette Corticale (valeurs brutes, jamais utilisées directement) ---- */
  --po-corticale: #0F4C5C;
  --po-corticale-deep: #0A3542;
  --po-corticale-pale: #E4EDEF;
  --po-corticale-trait: #CBDCE0;
  --po-encre: #14171B;
  --po-ardoise: #5C6670;
  --po-mineral: #C08A3E;
  --po-os: #FBF8F3;
  --po-spongieux: #F4EEE4;
  --po-trame: #E2DACD;
  --po-trabecule: #D3C9B8;
  --po-surface: #FFFFFF;
  --po-vert: #1E7E45;
  --po-ambre: #B07410;
  --po-rouge: #B02418;
  --po-bleu: #2E5AAC;

  /* Triplets RVB pour la composition alpha : rgb(var(--x-rgb) / .12) */
  --po-corticale-rgb: 15 76 92;
  --po-corticale-deep-rgb: 10 53 66;
  --po-corticale-trait-rgb: 203 220 224;
  --po-os-rgb: 251 248 243;
  --po-encre-rgb: 20 23 27;
  --po-mineral-rgb: 192 138 62;

  /* ---- Alias sémantiques (contexte clair) ---- */
  --po-bg: var(--po-os);
  --po-bg-alt: var(--po-spongieux);
  --po-bg-structure: var(--po-corticale-pale);
  --po-surface-1: var(--po-surface);
  --po-surface-2: var(--po-spongieux);
  --po-text: var(--po-encre);
  --po-text-2: var(--po-ardoise);
  --po-text-title: var(--po-corticale);
  --po-text-on-brand: #FFFFFF;
  --po-link: var(--po-corticale);
  --po-accent: var(--po-mineral);            /* GRAPHIQUE UNIQUEMENT */
  --po-border: var(--po-trame);
  --po-border-strong: var(--po-trabecule);
  --po-focus: var(--po-corticale);
  --po-btn-bg: var(--po-corticale);
  --po-btn-fg: #FFFFFF;
  --po-btn-bg-hover: var(--po-corticale-deep);
  --po-btn2-fg: var(--po-corticale);
  --po-btn2-border: var(--po-corticale);
  --po-ill-stroke: var(--po-corticale);
  --po-ill-soft: rgb(var(--po-corticale-rgb) / .12);
  --po-ill-faint: var(--po-trame);
  --po-status-ok: var(--po-vert);
  --po-status-wait: var(--po-ambre);
  --po-status-risk: var(--po-rouge);
  --po-status-data: var(--po-bleu);

  /* ---- Espacements (base 4 px) ---- */
  --po-s-1: .25rem;
  --po-s-2: .5rem;
  --po-s-3: .75rem;
  --po-s-4: 1rem;
  --po-s-5: 1.5rem;
  --po-s-6: 2rem;
  --po-s-7: 3rem;
  --po-s-8: 4rem;
  --po-s-9: 6rem;
  --po-s-10: 8rem;
  --po-section-y: clamp(4rem, 2rem + 6vw, 8rem);
  --po-gutter: clamp(1rem, 4vw, 2rem);
  --po-container: 1160px;
  --po-container-narrow: 760px;
  --po-container-wide: 1320px;
  --po-header-h: 80px;

  /* ---- Rayons ---- */
  --po-r-1: 6px;
  --po-r-2: 10px;
  --po-r-3: 16px;
  --po-r-4: 24px;
  --po-r-pill: 999px;

  /* ---- Ombres teintées Corticale (jamais noir pur, adaptées au fond Os) ---- */
  --po-shadow-1: 0 1px 2px rgb(var(--po-encre-rgb) / .04), 0 2px 8px -2px rgb(var(--po-corticale-rgb) / .10);
  --po-shadow-2: 0 2px 4px rgb(var(--po-encre-rgb) / .04), 0 12px 32px -12px rgb(var(--po-corticale-rgb) / .22);
  --po-shadow-3: 0 24px 64px -24px rgb(var(--po-corticale-rgb) / .35);

  /* ---- Mouvement ---- */
  --po-t-fast: .18s;
  --po-t-base: .42s;
  --po-t-slow: .9s;
  --po-t-draw: 1.4s;
  --po-ease: cubic-bezier(.22, .61, .36, 1);
  --po-ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --po-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --po-stagger: 80ms;

  /* ---- Couches ---- */
  --po-z-field: 0;
  --po-z-content: 1;
  --po-z-header: 50;
  --po-z-progress: 60;
  --po-z-drawer: 70;
  --po-z-skip: 100;

  /* ---- Familles ---- */
  --po-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --po-font-body: "Hanken Grotesk", Arial, Helvetica, sans-serif;
  --po-font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* ---- Échelle typographique (mobile first) ---- */
  --po-fs-display: clamp(2.375rem, 1.5rem + 3vw, 3.6rem);
  --po-fs-h1: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --po-fs-h2: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  --po-fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --po-fs-h4: 1.0625rem;
  --po-fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --po-fs-body: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --po-fs-small: .875rem;
  --po-fs-caption: .8125rem;
  --po-fs-cartouche: clamp(.6875rem, .65rem + .15vw, .75rem);
  --po-fs-stat: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   Thème sombre de zone (hero, clôture, pied de page, en-tête sur le hero).
   Les composants héritent des alias : aucun modificateur « on-dark » requis.
   -------------------------------------------------------------------------- */
.po-dark {
  --po-bg: var(--po-corticale-deep);
  --po-bg-alt: rgb(var(--po-os-rgb) / .04);
  --po-bg-structure: rgb(var(--po-os-rgb) / .08);
  --po-surface-1: rgb(var(--po-os-rgb) / .06);
  --po-surface-2: rgb(var(--po-os-rgb) / .04);
  --po-text: var(--po-os);
  --po-text-2: var(--po-corticale-trait);
  --po-text-title: var(--po-os);
  --po-link: var(--po-os);
  --po-border: rgb(var(--po-corticale-trait-rgb) / .18);
  --po-border-strong: rgb(var(--po-corticale-trait-rgb) / .32);
  --po-focus: var(--po-os);
  --po-btn-bg: var(--po-os);
  --po-btn-fg: var(--po-corticale-deep);
  --po-btn-bg-hover: #FFFFFF;
  --po-btn2-fg: var(--po-os);
  --po-btn2-border: rgb(var(--po-corticale-trait-rgb) / .55);
  --po-ill-stroke: var(--po-corticale-trait);
  --po-ill-soft: rgb(var(--po-os-rgb) / .06);
  --po-ill-faint: rgb(var(--po-corticale-trait-rgb) / .22);
  --po-shadow-1: none;
  --po-shadow-2: none;
  color: var(--po-text);
  background: var(--po-bg);
  color-scheme: dark;
}