/* =========================================================================
   Le Naaba — Design Tokens
   Source of truth: sources/CHARTE_GRAPHIQUE_LE_NAABA.md (v3.0, mai 2026)

   Typography note:
   The official brand uses Futura for headings. Futura is a paid foundry font.
   This system substitutes Jost (Google Fonts) as the closest free equivalent —
   same geometric DNA, similar proportions. Replace --font-display with Futura
   wherever the user has a licensed copy installed.
   ========================================================================= */

/* Inter + Jost are enqueued from functions.php (naaba-google-fonts) so that
   WordPress controls the load order and OVH's page cache can see them.
   No @import here — it blocks rendering. */

/* Brand-licensed Futura — uploaded by Marc.
   Note: this is Futura Condensed Light, narrower + lighter than the
   standard Futura Bold the original PPTX uses. Falls back to Jost
   (geometric sans) and then to Trebuchet MS for any weight Futura
   Condensed Light doesn't carry. */
@font-face {
  font-family: 'Futura LN';
  src: url('fonts/futura-condensedlight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --naaba-red:        #9A1926;  /* Primary — titles, eyebrows, accents */
  --naaba-red-dark:   #7A0D18;  /* Hover / pressed variant */
  --naaba-red-soft:   #F5E8EA;  /* Card / block backgrounds */
  --naaba-orange:     #FF6B35;  /* Bonus / premium badge only */

  /* ---------- NEUTRALS ---------- */
  --ink:              #0A0A0A;  /* Body text */
  --muted:            #555555;  /* Secondary text, pagination */
  --rule:             #E8E8E8;  /* Separators, dividers */
  --paper:            #FFFFFF;  /* Page background */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:               var(--paper);
  --fg:               var(--ink);
  --fg-muted:         var(--muted);
  --accent:           var(--naaba-red);
  --accent-pressed:   var(--naaba-red-dark);
  --surface-soft:     var(--naaba-red-soft);
  --border:           var(--rule);
  --highlight:        var(--naaba-orange);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Futura LN', 'Jost', 'Futura', 'Futura PT', 'Trebuchet MS', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (mapped to print pt scale from charte) ----------
     Pt → px assuming 96 DPI base.  Carousels are 1080×1080 from 10"x10",
     so 1pt ≈ 1.5px at 1:1.  These are screen-reasonable defaults.        */
  --fs-eyebrow:   11px;   /* 11pt — UPPERCASE, tracked */
  --fs-pagination:11px;
  --fs-body-sm:   15px;
  --fs-body:      17px;
  --fs-body-lg:   20px;
  --fs-h3:        28px;
  --fs-h2:        36px;   /* slide title small */
  --fs-h1:        48px;   /* slide title medium */
  --fs-display:   62px;   /* cover slide max */

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-body:      1.5;

  --tracking-eyebrow: 0.34em;  /* ~4px @ 11pt */
  --tracking-pagination: 0.18em;
  --tracking-tight: -0.01em;

  /* ---------- SPACING ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- RADII ---------- */
  --radius-sm: 4px;    /* cards, soft blocks */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px; /* badges */

  /* ---------- BORDERS ---------- */
  --border-hair: 1px solid var(--rule);
  --border-accent-l: 6px solid var(--naaba-red); /* left-accent on cards */

  /* ---------- SHADOWS (used sparingly — brand is mostly flat) ---------- */
  --shadow-card: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);
  --shadow-pop:  0 12px 32px rgba(154,25,38,.18);
}

/* =========================================================================
   SEMANTIC TYPE ROLES
   Use these classes (or extend them) instead of redefining font-size everywhere.
   ========================================================================= */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--naaba-red);
}
.eyebrow::after {
  /* the 0.75" red bar that sits under every eyebrow */
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--naaba-red);
  margin-top: 10px;
}

.pagination {
  font-family: var(--font-body);
  font-size: var(--fs-pagination);
  letter-spacing: var(--tracking-pagination);
  color: var(--muted);
}

/* keep browsers from faking a bold of Futura Condensed Light when we
   only have a single 300-weight file. Falls through to Jost for bolds. */
:root, body { font-synthesis: none; }

.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--muted);
}
.lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* =========================================================================
   BADGE — orange "BONUS / PREMIUM" pill
   ========================================================================= */
.badge-bonus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  background: var(--naaba-orange);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
}

/* =========================================================================
   CARD — soft red block with red left-accent bar (used for "conséquence")
   ========================================================================= */
.card-soft {
  background: var(--surface-soft);
  border-left: var(--border-accent-l);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
}