/* ============================================================
   SPE Connect — Direction artistique (Brand Book, Mai 2026)
   Polices auto-hébergées + jetons de couleur de la marque.
   ============================================================ */

/* ── Typographies de marque ────────────────────────────────── */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/FunnelDisplay-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/FunnelDisplay-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/FunnelDisplay-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/IBMPlexSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexMono-Medium.ttf') format('truetype');
}

/* ── Jetons de marque ───────────────────────────────────────── */
:root {
  /* Palette principale */
  --forest:        #1A3733;   /* base sombre, fonds, actions primaires */
  --moss:          #2D5F58;   /* secondaire */
  --sage:          #8FB5B0;   /* secondaire clair */
  --stone-light:   #B0AFA3;   /* neutre */
  --volt:          #D4FF00;   /* accent UNIQUE : CTA, indicateurs, actifs */
  --volt-deep:     #B9E000;   /* accent au survol (lisibilité) */

  /* Surfaces & neutres */
  --surface-green: #F2F7F6;   /* fond clair principal (remplace le blanc pur) */
  --surface-warm:  #F5F5F3;   /* fond clair alternatif */
  --graphite:      #141210;   /* texte foncé */
  --graphite-mid:  #2C2C2A;
  --stone:         #888780;   /* texte secondaire */
  --white:         #FFFFFF;

  /* Lignes / contours */
  --border:        #D9E2DF;
  --border-strong: #BBCdc8;

  /* Statuts fonctionnels (harmonisés à la palette) */
  --ok:        #2D5F58;  --ok-bg:     #E7F0EE;
  --warn:      #9A6A12;  --warn-bg:   #F5EEDD;
  --danger:    #A8392C;  --danger-bg: #F4E6E3;

  /* Typo */
  --font-display: 'Funnel Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --radius:    12px;
  --radius-sm: 8px;
}

/* ── Réglages typographiques de base (Brand Book §2.2) ──────── */
h1, h2, h3, .display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  color: var(--forest);
}
h1 { font-weight: 700; letter-spacing: -0.025em; }