/* =========================================================
   Artefact × Bouygues Telecom — Deck System
   Single source of truth for design tokens.
   ========================================================= */

:root {
  /* ---------- Brand colors ---------- */
  --navy-900: #0F2A3F;   /* darkest navy — body text */
  --navy-800: #002244;   /* primary Artefact navy */
  --navy-700: #25465F;   /* secondary heading */
  --navy-600: #1F3A52;   /* hover state for navy buttons */

  --blue-700: #003F7A;   /* Bouygues blue, darker */
  --blue-600: #0055A4;   /* Bouygues blue (signature) */
  --blue-500: #2E73B8;   /* Bouygues blue, lighter / chart */

  --cyan-600: #2FA6C2;   /* Bouygues cyan, darker */
  --cyan-500: #50BFDA;   /* Bouygues cyan (signature) */
  --cyan-200: #BFE7F0;   /* Bouygues cyan tint, backgrounds */

  --orange-600: #C84A0A; /* press state */
  --orange-500: #EA5B0F; /* emphasis / arrows */
  --orange-200: #FBD9C2; /* orange tint */

  --green-700: #0A6E47;
  --green-600: #0E8C5C;  /* success / "OUI" */
  --green-200: #BFE4D2;

  --red-600: #C53030;    /* errors */

  /* ---------- Neutral scale ---------- */
  --slate-900: #1A1F26;
  --slate-800: #2C353F;
  --slate-700: #4C5862;
  --slate-600: #6F7D8B;  /* muted text */
  --slate-500: #7E8B97;  /* captions */
  --slate-400: #9AA7B4;  /* "non" state, disabled */
  --slate-300: #C2CAD2;  /* dividers, lighter */
  --slate-200: #D8DEE5;  /* borders, dividers */
  --slate-100: #ECEFF3;  /* hover surface */
  --slate-50:  #F4F6F9;  /* card / panel background */
  --white:     #FFFFFF;
  --black:     #000000;

  /* ---------- Semantic ---------- */
  --bg:           var(--white);
  --bg-surface:   var(--slate-50);
  --bg-inverse:   var(--navy-800);

  --fg:           var(--navy-900);    /* body */
  --fg-muted:     var(--slate-600);
  --fg-subtle:    var(--slate-500);
  --fg-inverse:   var(--white);

  --border:       var(--slate-200);
  --border-strong:var(--slate-300);
  --border-navy:  var(--navy-800);

  --accent:       var(--orange-500);  /* emphasis */
  --link:         var(--blue-600);
  --success:      var(--green-600);
  --danger:       var(--red-600);

  /* ---------- Typography ---------- */
  /* Source decks use Arial. We keep Arial as the primary so PPTX exports render identically. */
  --font-sans: Arial, Helvetica, "Liberation Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Slide-scale type. 1920×1080 baseline; scale with parent transform. */
  --fs-cover:        72px;  /* cover slide hero */
  --fs-section:      56px;  /* section divider */
  --fs-h1:           32px;  /* slide title */
  --fs-h2:           24px;  /* slide title (default) */
  --fs-h3:           20px;  /* card / column heading */
  --fs-eyebrow:      14px;  /* uppercase label */
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-tiny:         10px;
  --fs-stat:         60px;  /* big % numbers */
  --fs-stat-sm:      40px;

  --lh-tight:        1.15;
  --lh-snug:         1.3;
  --lh-normal:       1.45;
  --lh-loose:        1.6;

  --fw-regular:      400;
  --fw-medium:       500;
  --fw-bold:         700;

  --tracking-eyebrow: 0.06em;
  --tracking-tight:   -0.01em;

  /* ---------- Radii ---------- */
  --radius-xs:  2px;   /* tags */
  --radius-sm:  4px;   /* cards, buttons */
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-pill: 999px; /* status pills, % chips */

  /* ---------- Shadow (used sparingly) ---------- */
  --shadow-card:   0 2px 8px rgba(0, 34, 68, 0.08);
  --shadow-popout: 0 8px 24px rgba(0, 34, 68, 0.12);

  /* ---------- Spacing scale (8px base) ---------- */
  --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;

  /* ---------- Slide dimensions ---------- */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --slide-margin: 64px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
}

/* =========================================================
   Element defaults — use these by default.
   ========================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--navy-900);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); }

p { margin: 0; line-height: var(--lh-normal); }

strong, b { font-weight: var(--fw-bold); color: var(--navy-900); }

small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

/* =========================================================
   Utility classes used across the slide kit.
   ========================================================= */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--navy-800);
}

.eyebrow--accent { color: var(--orange-500); }
.eyebrow--muted  { color: var(--slate-600); }

.divider-line {
  height: 1px;
  background: var(--slate-200);
  border: 0;
  margin: 0;
}

.divider-line--navy   { background: var(--navy-800); }
.divider-line--accent { background: var(--orange-500); height: 2px; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  background: var(--slate-100);
  color: var(--navy-800);
}

.tag--navy   { background: var(--navy-800); color: var(--white); }
.tag--accent { background: var(--orange-500); color: var(--white); }
.tag--cyan   { background: var(--cyan-500);  color: var(--navy-900); }

.pill-stat {
  display: inline-flex;
  align-items: baseline;
  padding: 2px 12px 4px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  background: var(--navy-800);
  color: var(--white);
}

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

.card--surface { background: var(--slate-50); }
.card--navy    { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }
.card--navy h1, .card--navy h2, .card--navy h3, .card--navy h4 { color: var(--white); }
.card--callout { background: var(--bg); box-shadow: var(--shadow-card); border-color: var(--slate-100); }