/* =================================================================
   P3F — Colors & Type
   --------------------------------------------------------------- */

/* Type — Poppins (display + body) shipped locally from /fonts; JetBrains Mono
   (overlines, page numbers, meta) loaded from Google Fonts. Poppins is the
   primary brand face from the P3F PowerPoint template; JetBrains Mono pairs
   with it for the "console / tag" overline + meta voice the M13 deck establishes. */

:root {
  /* =========================================================
     COLOR — BACKGROUNDS (dark-first; P3F decks ship dark)
     ========================================================= */
  --p3f-bg:           #1E1E1E;   /* Base canvas */
  --p3f-bg-2:         #161616;   /* Deeper, recessed surfaces */
  --p3f-bg-card:      #232323;   /* Cards on bg                */
  --p3f-bg-elev:      #2A2A2A;   /* Elevated / hover surface   */

  /* =========================================================
     COLOR — INK (text + iconography)
     ========================================================= */
  --p3f-ink:          #FFFFFF;
  --p3f-ink-2:        rgba(255,255,255,0.72);   /* Secondary body */
  --p3f-ink-3:        rgba(255,255,255,0.48);   /* Tertiary / meta */
  --p3f-ink-4:        rgba(255,255,255,0.24);   /* Hairlines text */
  --p3f-ink-on-light: #1E1E1E;
  --p3f-ink-on-light-2: #4A4A4A;
  --p3f-ink-on-light-3: #929292;

  /* =========================================================
     COLOR — RULES, BORDERS, DIVIDERS
     ========================================================= */
  --p3f-rule:         rgba(255,255,255,0.12);
  --p3f-rule-2:       rgba(255,255,255,0.30);
  --p3f-rule-strong:  rgba(255,255,255,0.60);

  /* =========================================================
     COLOR — PRIMARY BRAND (magenta / "P3F pink")
     The dominant accent. Used for overlines, hero blocks, key
     emphasis. Sampled directly from the P3F logo.
     ========================================================= */
  --p3f-magenta:        #DA1C5C;
  --p3f-magenta-deep:   #91226D;   /* hero blocks, dark accent */
  --p3f-magenta-soft:   rgba(218,28,92,0.14);
  --p3f-magenta-glow:   rgba(218,28,92,0.32);

  /* =========================================================
     COLOR — SECONDARY PALETTE (from the multi-gradient logo)
     Use ONE secondary accent per surface — they are categorical
     colors, not a scale. Reach for them when magenta isn't
     enough, e.g. tagging segments, illustration tints.
     ========================================================= */
  --p3f-orange:       #F05A28;   /* fire / signal       */
  --p3f-orange-deep:  #BE1E2D;
  --p3f-amber:        #F6821E;
  --p3f-gold:         #FFCA07;   /* "In progress" pill */
  --p3f-lime:         #C7DB3F;   /* mid-deck highlight  */
  --p3f-green:        #6ABC45;   /* org / division      */
  --p3f-teal:         #00A69C;
  --p3f-cyan:         #00ADEE;
  --p3f-blue:         #1B75BB;
  --p3f-purple:       #652D90;

  /* =========================================================
     COLOR — SEMANTIC (status / data viz)
     ========================================================= */
  --p3f-ok:           #4FB286;   /* success / supported */
  --p3f-warn:         #E0B341;   /* caution / partial   */
  --p3f-bad:          rgba(255,255,255,0.22); /* "not supported", on dark */
  --p3f-error:        #E84F4F;
  --p3f-info:         var(--p3f-cyan);

  /* =========================================================
     TYPE — FAMILIES
     ========================================================= */
  --p3f-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p3f-font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p3f-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* =========================================================
     TYPE — SCALE (16:9 slides at 1920×1080 reference; resize
     proportionally for product UI — see /ui_kits)
     ========================================================= */
  --p3f-fs-hero:      116px;   /* Title slide hero      */
  --p3f-fs-h1:        72px;    /* Section title         */
  --p3f-fs-h1-sm:     60px;
  --p3f-fs-h2:        48px;
  --p3f-fs-h3:        32px;
  --p3f-fs-lead:      30px;
  --p3f-fs-body:      24px;
  --p3f-fs-body-sm:   20px;
  --p3f-fs-caption:   16px;
  --p3f-fs-meta:      14px;    /* JetBrains Mono caps   */
  --p3f-fs-tag:       12px;    /* mono overlines, tags  */

  /* =========================================================
     TYPE — WEIGHT
     ========================================================= */
  --p3f-fw-light:     300;
  --p3f-fw-regular:   400;
  --p3f-fw-medium:    500;
  --p3f-fw-semibold:  600;
  --p3f-fw-bold:      700;
  --p3f-fw-black:     800;

  /* =========================================================
     TYPE — LETTER SPACING
     Display sizes lean tight; mono overlines lean wide.
     ========================================================= */
  --p3f-ls-display:   -0.025em;
  --p3f-ls-title:     -0.022em;
  --p3f-ls-tight:     -0.01em;
  --p3f-ls-normal:    0;
  --p3f-ls-meta:      0.15em;
  --p3f-ls-overline:  0.22em;

  /* =========================================================
     LAYOUT — SLIDE GEOMETRY
     ========================================================= */
  --p3f-slide-w:      1920px;
  --p3f-slide-h:      1080px;
  --p3f-pad-x:        168px;
  --p3f-pad-y:        128px;

  /* =========================================================
     SPACING — Used across decks and product surfaces.
     Decks tend to use the LARGE end; product UIs the small end.
     ========================================================= */
  --p3f-space-1:      4px;
  --p3f-space-2:      8px;
  --p3f-space-3:      12px;
  --p3f-space-4:      16px;
  --p3f-space-5:      24px;
  --p3f-space-6:      32px;
  --p3f-space-7:      48px;
  --p3f-space-8:      64px;
  --p3f-space-9:      96px;
  --p3f-space-10:     128px;

  /* =========================================================
     RADIUS — P3F leans hard on geometric sharpness. Pills are
     used for status; cards are restrained (14px); chips are
     fully rounded.
     ========================================================= */
  --p3f-radius-0:     0;        /* Hero blocks, banners */
  --p3f-radius-sm:    6px;      /* small chips, inputs  */
  --p3f-radius-md:    10px;
  --p3f-radius-lg:    14px;     /* CARDS (canonical)    */
  --p3f-radius-xl:    20px;
  --p3f-radius-pill:  999px;    /* status pills, badges */

  /* =========================================================
     ELEVATION — kept extremely flat on dark surfaces; the
     system relies on hairline rules + soft contrast rather
     than drop shadow.
     ========================================================= */
  --p3f-shadow-0:     none;
  --p3f-shadow-1:     0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.25);
  --p3f-shadow-2:     0 8px 28px rgba(0,0,0,0.45);
  --p3f-glow-magenta: 0 0 0 1px var(--p3f-magenta), 0 0 32px var(--p3f-magenta-glow);

  /* =========================================================
     MOTION — fast, no bounces. Cubic-out for entrances.
     ========================================================= */
  --p3f-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --p3f-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --p3f-dur-fast:     120ms;
  --p3f-dur-base:     200ms;
  --p3f-dur-slow:     320ms;
}

/* =================================================================
   SEMANTIC TYPOGRAPHY — opt-in classes for elements.
   Match the deck system shipped in /slides + /ui_kits.
   --------------------------------------------------------------- */

.p3f-hero {
  font-family: var(--p3f-font-display);
  font-weight: var(--p3f-fw-bold);
  font-size:   var(--p3f-fs-hero);
  line-height: 1.02;
  letter-spacing: var(--p3f-ls-display);
  color: var(--p3f-ink);
  margin: 0;
}

.p3f-h1 {
  font-family: var(--p3f-font-display);
  font-weight: var(--p3f-fw-bold);
  font-size:   var(--p3f-fs-h1);
  line-height: 1.05;
  letter-spacing: var(--p3f-ls-title);
  color: var(--p3f-ink);
  margin: 0;
}

.p3f-h2 {
  font-family: var(--p3f-font-display);
  font-weight: var(--p3f-fw-semibold);
  font-size:   var(--p3f-fs-h2);
  line-height: 1.1;
  letter-spacing: var(--p3f-ls-tight);
  color: var(--p3f-ink);
  margin: 0;
}

.p3f-h3 {
  font-family: var(--p3f-font-display);
  font-weight: var(--p3f-fw-semibold);
  font-size:   var(--p3f-fs-h3);
  line-height: 1.15;
  letter-spacing: var(--p3f-ls-tight);
  color: var(--p3f-ink);
  margin: 0;
}

.p3f-lead {
  font-family: var(--p3f-font-body);
  font-weight: var(--p3f-fw-regular);
  font-size:   var(--p3f-fs-lead);
  line-height: 1.4;
  color: var(--p3f-ink-2);
  margin: 0;
}

.p3f-body {
  font-family: var(--p3f-font-body);
  font-weight: var(--p3f-fw-regular);
  font-size:   var(--p3f-fs-body);
  line-height: 1.5;
  color: var(--p3f-ink-2);
  margin: 0;
}

.p3f-caption {
  font-family: var(--p3f-font-body);
  font-weight: var(--p3f-fw-regular);
  font-size:   var(--p3f-fs-caption);
  line-height: 1.4;
  color: var(--p3f-ink-3);
  margin: 0;
}

/* "Sur-titre" — overline, the signature P3F voice element.
   Mono, uppercase, magenta dot prefix, wide letter-spacing. */
.p3f-overline {
  font-family: var(--p3f-font-mono);
  font-weight: var(--p3f-fw-medium);
  font-size:   var(--p3f-fs-meta);
  letter-spacing: var(--p3f-ls-overline);
  text-transform: uppercase;
  color: var(--p3f-magenta);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.p3f-overline::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--p3f-magenta);
  border-radius: 50%;
}

/* Mono meta — page numbers, footer "CONFIDENTIEL · 2026", etc. */
.p3f-meta {
  font-family: var(--p3f-font-mono);
  font-weight: var(--p3f-fw-regular);
  font-size:   var(--p3f-fs-meta);
  letter-spacing: var(--p3f-ls-meta);
  text-transform: uppercase;
  color: var(--p3f-ink-3);
}

/* Tag — small mono, often used for numbered list markers (01, 02, 03) */
.p3f-tag {
  font-family: var(--p3f-font-mono);
  font-weight: var(--p3f-fw-medium);
  font-size:   var(--p3f-fs-tag);
  letter-spacing: var(--p3f-ls-overline);
  text-transform: uppercase;
  color: var(--p3f-magenta);
}

/* =================================================================
   BASE — applied when this file is imported into a page.
   --------------------------------------------------------------- */
html, body {
  background: var(--p3f-bg);
  color: var(--p3f-ink);
  font-family: var(--p3f-font-body);
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: common-ligatures;
  text-wrap: pretty;
}