/* Humirai — design tokens (charte Sillage / Mosaïque)
   Repris du design system fourni dans design_handoff_site_humirai_v3/_ds/ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Marque */
  --hum-logo-from: #2FB3A2;
  --hum-logo-to: #C58A2E;

  /* Sillage (site) */
  --sillage-ink: #1F3D33;
  --sillage-ink-deep: #122721;
  --sillage-cream: #E8E1CE;
  --sillage-paper: #FBFAF6;
  --sillage-paper-alt: #F1EEE4;
  --sillage-gold: #C58A2E;
  --sillage-text: #5A6259;
  --sillage-text-faint: #9A9589;
  --sillage-rule: #E4E0D4;
  --sillage-on-ink: #F5F1E8;
  --sillage-on-ink-soft: rgba(245, 241, 232, .72);
  --sillage-on-ink-faint: rgba(245, 241, 232, .6);
  --sillage-on-ink-rule: rgba(245, 241, 232, .14);
  --sillage-on-cream: #6E6350;
  --sillage-on-cream-faint: #8C7B58;
  --sillage-on-cream-rule: #CFC9B8;

  /* Mosaïque (démos applicatives) */
  --app-bg: #F4F6F5;
  --app-surface: #FFFFFF;
  --app-surface-alt: #F1F4F2;
  --app-ink: #0E3B34;
  --app-text: #5A6864;
  --app-text-faint: #8A9591;
  --app-rule: #E2E7E5;
  --app-rule-soft: #F0F3F1;
  --app-teal: #2E8C7A;

  /* États sémantiques */
  --state-success: #2F7D5B;
  --state-success-bg: #E4F0E6;
  --state-success-rule: #BEDCC6;
  --state-watch: #B0741C;
  --state-watch-bg: #F6EBD6;
  --state-watch-rule: #E6CFA4;
  --state-alert: #A83A22;
  --state-alert-bg: #F6E2DC;
  --state-alert-rule: #E5BCAF;

  /* Typographie */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-signature: "Instrument Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --track-display: -.03em;
  --track-display-tight: -.035em;
  --track-label: .16em;
  --track-label-wide: .2em;
  --track-label-tight: .14em;

  --leading-display: 1.05;
  --leading-title: 1.14;
  --leading-body: 1.65;
  --leading-body-tight: 1.55;

  /* Formes */
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-panel: 20px;
  --radius-panel-sm: 18px;
  --radius-pill: 999px;
  --radius-sillage-accent: 14px 66px 14px 14px;
  --radius-sillage-accent-alt: 76px 14px 14px 14px;

  --shadow-panel: 0 12px 32px rgba(14, 59, 52, .08);
  --shadow-float: 0 30px 80px rgba(14, 59, 52, .16);

  --site-max: 1440px;
  --site-gutter: clamp(20px, 5vw, 56px);
}