/* ==========================================================================
   bonhome.ch — Design tokens
   Palette NCS 2026 · Teal + Terracotta + Sauge + Bleu d'encre
   Version 1.0 — avril 2026
   ========================================================================== */

:root {
  /* ── Couleurs — surfaces ────────────────────────────────────────────────── */
  --bh-paper:         #F7F4EE;   /* fond principal (pages) */
  --bh-paper-soft:    #EFEAE0;   /* fond sections alternées */
  --bh-paper-sunk:    #E6E0D4;   /* fond cartes enfoncées / inputs */
  --bh-paper-raised:  #FDFBF6;   /* cartes élevées / modals */

  /* ── Couleurs — encres (texte) ──────────────────────────────────────────── */
  --bh-ink:           #1E2A44;   /* Bleu d'encre — titres, corps principal */
  --bh-ink-soft:      #4A5568;   /* sous-titres, labels */
  --bh-ink-mute:      #6B7280;   /* métadonnées, captions */
  --bh-ink-disabled:  #9AA3B2;

  /* ── Couleurs — ancres de marque (Palette 04 · NCS 2026) ───────────────── */
  --bh-teal:          #2A6670;   /* Teal profond — ancre · CTA · chevron wordmark */
  --bh-teal-deep:     #1A4650;   /* Label · texte appuyé · hover/pressed */
  --bh-teal-soft:     #CEDFE1;   /* Teal soft — fond bulles Lou */
  --bh-teal-tint:     #E3EEEE;   /* fond sub-section */

  --bh-sage:          #8FA780;   /* Vert sauge — nature · tags · chevron sur dark */
  --bh-sage-deep:     #5F7360;
  --bh-sage-soft:     #C2D1B3;
  --bh-sage-tint:     #E7EDDD;

  --bh-terracotta:    #C96A44;   /* Signal (≤ 1/écran) · point wordmark sur dark */
  --bh-terracotta-deep: #9A4F30;
  --bh-terracotta-soft: #E8B9A3;
  --bh-terracotta-tint: #F5DDCE;

  /* ── Couleurs — lignes & séparateurs ────────────────────────────────────── */
  --bh-line:          #D4CEC2;   /* borders standards */
  --bh-line-soft:     #E0DBD0;   /* borders subtils */
  --bh-line-strong:   #B8B0A1;

  /* ── Couleurs — feedback états ──────────────────────────────────────────── */
  --bh-success:       #4F6A58;   /* = sage-deep */
  --bh-warning:       #C79A3E;
  --bh-error:         #9A4530;   /* = terracotta-deep */
  --bh-info:          #2A6670;   /* = teal */

  /* ── Couleurs sémantiques (recommandé d'utiliser ces alias) ─────────────── */
  --bh-bg:            var(--bh-paper);
  --bh-bg-alt:        var(--bh-paper-soft);
  --bh-bg-sunk:       var(--bh-paper-sunk);
  --bh-bg-raised:     var(--bh-paper-raised);
  --bh-text:          var(--bh-ink);
  --bh-text-soft:     var(--bh-ink-soft);
  --bh-text-mute:     var(--bh-ink-mute);
  --bh-border:        var(--bh-line);
  --bh-border-soft:   var(--bh-line-soft);

  --bh-brand:         var(--bh-teal);         /* ancre principale */
  --bh-brand-deep:    var(--bh-teal-deep);
  --bh-brand-soft:    var(--bh-teal-soft);
  --bh-brand-tint:    var(--bh-teal-tint);

  --bh-accent:        var(--bh-terracotta);   /* signal, highlight */
  --bh-accent-soft:   var(--bh-terracotta-soft);

  --bh-signature:     var(--bh-sage);         /* chevron wordmark uniquement */

  /* ── Typographie ───────────────────────────────────────────────────────── */
  --bh-font-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --bh-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bh-font-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Échelle typo — mobile first, scalable via clamp */
  --bh-text-xs:       clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12–13 */
  --bh-text-sm:       clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14–15 */
  --bh-text-base:     clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);       /* 16–17 */
  --bh-text-md:       clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);     /* 18–20 */
  --bh-text-lg:       clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem);       /* 20–24 */
  --bh-text-xl:       clamp(1.5rem, 1.4rem + 0.6vw, 2rem);           /* 24–32 */
  --bh-text-2xl:      clamp(2rem, 1.8rem + 1vw, 2.75rem);            /* 32–44 */
  --bh-text-3xl:      clamp(2.5rem, 2.2rem + 1.6vw, 3.75rem);        /* 40–60 */
  --bh-text-display:  clamp(3rem, 2.4rem + 3vw, 5.5rem);             /* 48–88 */

  /* Poids */
  --bh-weight-light:   300;
  --bh-weight-regular: 400;
  --bh-weight-medium:  500;
  --bh-weight-semibold: 600;

  /* Interlignage */
  --bh-leading-tight:  1.15;
  --bh-leading-snug:   1.3;
  --bh-leading-normal: 1.5;
  --bh-leading-relaxed: 1.65;

  /* Letter-spacing — les serifs Fraunces aiment être serrés */
  --bh-track-tight:   -0.035em;   /* wordmark, titres display */
  --bh-track-snug:    -0.02em;    /* titres h1/h2 */
  --bh-track-normal:  0;
  --bh-track-wide:    0.05em;
  --bh-track-caps:    0.12em;     /* labels ALL CAPS */

  /* ── Espacements (échelle 4pt) ──────────────────────────────────────────── */
  --bh-space-0:       0;
  --bh-space-1:       0.25rem;   /* 4  */
  --bh-space-2:       0.5rem;    /* 8  */
  --bh-space-3:       0.75rem;   /* 12 */
  --bh-space-4:       1rem;      /* 16 */
  --bh-space-5:       1.5rem;    /* 24 */
  --bh-space-6:       2rem;      /* 32 */
  --bh-space-7:       3rem;      /* 48 */
  --bh-space-8:       4rem;      /* 64 */
  --bh-space-9:       6rem;      /* 96 */
  --bh-space-10:      8rem;      /* 128 */

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --bh-radius-xs:     4px;
  --bh-radius-sm:     8px;
  --bh-radius-md:     12px;
  --bh-radius-lg:     20px;
  --bh-radius-xl:     28px;
  --bh-radius-pill:   999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --bh-shadow-xs:     0 1px 2px rgba(30, 42, 68, 0.04);
  --bh-shadow-sm:     0 2px 8px rgba(30, 42, 68, 0.06);
  --bh-shadow-md:     0 6px 20px rgba(30, 42, 68, 0.08);
  --bh-shadow-lg:     0 16px 40px rgba(30, 42, 68, 0.12);
  --bh-shadow-inset:  inset 0 1px 2px rgba(30, 42, 68, 0.06);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --bh-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --bh-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --bh-duration-fast:    140ms;
  --bh-duration-base:    240ms;
  --bh-duration-slow:    420ms;

  /* ── Breakpoints (valeurs de référence — à utiliser en @media) ─────────── */
  --bh-bp-sm:         480px;
  --bh-bp-md:         768px;
  --bh-bp-lg:         1024px;
  --bh-bp-xl:         1280px;
  --bh-bp-2xl:        1536px;

  /* ── Z-index ───────────────────────────────────────────────────────────── */
  --bh-z-base:        0;
  --bh-z-raised:      10;
  --bh-z-dropdown:    100;
  --bh-z-overlay:     200;
  --bh-z-modal:       300;
  --bh-z-toast:       400;

  /* ── Focus ring ────────────────────────────────────────────────────────── */
  --bh-focus-ring:    0 0 0 3px rgba(42, 102, 112, 0.35);   /* teal translucide */
}

/* ── Dark mode (optionnel, pour plus tard) ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root.bh-auto-dark {
    --bh-paper:         #111A22;
    --bh-paper-soft:    #162028;
    --bh-paper-sunk:    #0D151C;
    --bh-paper-raised:  #1C2731;
    --bh-ink:           #E8E4DB;
    --bh-ink-soft:      #B8B0A1;
    --bh-ink-mute:      #8A8477;
    --bh-line:          #2A3641;
    --bh-line-soft:     #1F2A33;
  }
}

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--bh-font-sans);
  font-size: 16px;
  line-height: var(--bh-leading-normal);
  color: var(--bh-text);
  background: var(--bh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-feature-settings: "ss01" on, "ss02" on;   /* Fraunces stylistic alternates */
}

h1, h2, h3, h4 {
  font-family: var(--bh-font-serif);
  font-weight: var(--bh-weight-light);
  letter-spacing: var(--bh-track-snug);
  line-height: var(--bh-leading-tight);
  color: var(--bh-ink);
  margin: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  max-width: 65ch;
}

a {
  color: var(--bh-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--bh-duration-fast) var(--bh-ease-out);
}
a:hover { color: var(--bh-brand-deep); }

:focus-visible {
  outline: none;
  box-shadow: var(--bh-focus-ring);
  border-radius: var(--bh-radius-xs);
}

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.bh-wordmark {
  font-family: var(--bh-font-serif);
  font-weight: var(--bh-weight-regular);
  font-variation-settings: "opsz" 144;
  letter-spacing: var(--bh-track-tight);
  color: var(--bh-ink);
}

.bh-label-caps {
  font-family: var(--bh-font-sans);
  font-size: var(--bh-text-xs);
  font-weight: var(--bh-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--bh-track-caps);
  color: var(--bh-ink-soft);
}

.bh-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--bh-space-5);
}
@media (min-width: 768px) {
  .bh-container { padding-inline: var(--bh-space-7); }
}