/* ==========================================================================
   TPL Deck Tokens — Editorial flavor for presentations
   ==========================================================================
   Use this for slide decks. For website / product UI, use colors_and_type.css
   (in assets/) which carries the corporate palette.

   This file is a self-contained token set: paste into a new deck and it
   establishes the full visual language: colors, type, chrome, hairlines.
   ========================================================================== */

/* ---------- Fonts (re-declare so this file is portable) ------------------ */

@font-face { font-family: "Sofia Sans"; font-weight: 500; font-style: normal;
  src: url("fonts/SofiaSans-Medium.ttf")     format("truetype"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 600; font-style: normal;
  src: url("fonts/SofiaSans-SemiBold.ttf")   format("truetype"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 700; font-style: normal;
  src: url("fonts/SofiaSans-Bold.ttf")       format("truetype"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 700; font-style: italic;
  src: url("fonts/SofiaSans-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 800; font-style: normal;
  src: url("fonts/SofiaSans-ExtraBold.ttf")  format("truetype"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 900; font-style: normal;
  src: url("fonts/SofiaSans-Black.ttf")      format("truetype"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 400; font-style: normal;
  src: url("fonts/SofiaSans-Regular.ttf")    format("truetype"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 400; font-style: italic;
  src: url("fonts/SofiaSans-Italic.ttf")     format("truetype"); font-display: swap; }


/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* Core palette — editorial, scaled for 1920×1080 slides */
  --ink:        #0E0E0F;   /* near-black foreground */
  --ink-soft:   #1a1a1a;   /* hairline / decorative */
  --paper:      #F4EFE6;   /* warm editorial cream — DEFAULT slide bg */
  --paper-2:    #EAE3D5;   /* one shade darker, for nested cards */
  --red:        #D2372B;   /* punchy editorial red — accent only */
  --red-deep:   #8A1C14;   /* darker red for hover/press, not slides */
  --steel:      #3C4A54;   /* deep steel — rare secondary accent */

  /* Typography */
  --font-sans:    "Sofia Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Sofia Sans", system-ui, sans-serif;

  /* Slide canvas */
  --slide-w:    1920px;
  --slide-h:    1080px;
  --frame-pad:  140px 100px 120px; /* top / sides / bottom */
  --frame-pad-cover: 100px;        /* cover + quote slides */

  /* Type scale — display first, body second */
  --t-mega:      460px;  /* cover bg numeral, exceptional */
  --t-d1:        172px;  /* cover h1 */
  --t-d2:        140px;  /* hero headline */
  --t-d3:        120px;  /* section headline */
  --t-d4:        96px;   /* large headline */
  --t-d5:        68px;   /* subhead */

  --t-stat-xl:   210px;  /* hero pull-quote number */
  --t-stat-l:    96px;
  --t-stat-m:    64px;
  --t-stat-s:    44px;

  --t-lead-xl:   32px;   /* paragraph lead */
  --t-lead-l:    28px;
  --t-lead-m:    26px;
  --t-lead-s:    22px;

  --t-eyebrow:   18px;   /* uppercase label */
  --t-chrome:    20px;
  --t-overline:  13px;   /* tiny ALL CAPS, .22em tracking */

  /* Letter-spacing (tracked) */
  --tr-display:  -0.035em;  /* big headlines */
  --tr-stat:     -0.03em;   /* big numerals */
  --tr-eyebrow:  0.28em;    /* eyebrows */
  --tr-chrome:   0.22em;    /* chrome labels */
  --tr-overline: 0.20em;

  /* Hairlines */
  --rule-major:  2px;       /* bordering hero rules */
  --rule-minor:  1.5px;     /* chart axes, secondary */
  --rule-grid:   1px;       /* table dividers (use opacity .2 on ink) */

  /* No radii — the deck uses hard right angles. These tokens exist for any
     embedded UI artifacts (e.g. an inline browser screenshot). */
  --radius-card: 0;

  /* Motion (used for interactive web reuse, not the deck itself) */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-base:    220ms;
}

/* ---------- Base reset (deck context) ------------------------------------ */

html, body {
  margin: 0;
  padding: 0;
  background: #000;                /* letterbox color outside the slide */
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
deck-stage { background: #000; }

/* ---------- Slide skeleton ----------------------------------------------- */

section.slide {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv01";
  position: relative;
  overflow: hidden;
}
section.slide.dark { background: var(--ink);  color: var(--paper); }
section.slide.red  { background: var(--red);  color: #fff; }

.frame {
  position: absolute; inset: 0;
  padding: var(--frame-pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ---------- Chrome ------------------------------------------------------- */

.chrome {
  position: absolute; inset: 0;
  pointer-events: none;
  padding: 56px 72px;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-weight: 700;
  font-size: var(--t-chrome);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chrome .num         { font-weight: 900; font-size: 22px; letter-spacing: 0.02em; }
.chrome .num em      { font-style: normal; color: var(--red); margin-right: 10px; }
.chrome .right       { display: flex; gap: 24px; align-items: center; }
.chrome .right .dot  { width: 8px; height: 8px; background: var(--red); }

.slide.dark .chrome .num,
.slide.dark .chrome .right { color: var(--paper); }
.slide.red  .chrome .num,
.slide.red  .chrome .right { color: #fff; }
.slide.red  .chrome .num em { color: #fff; opacity: .55; }
.slide.red  .chrome .right .dot { background: #fff; }

.wordmark {
  position: absolute; right: 72px; bottom: 48px;
  font-weight: 900; font-size: 18px; letter-spacing: 0.18em;
  color: var(--ink); opacity: .55;
}
.slide.dark .wordmark { color: var(--paper); opacity: .55; }
.slide.red  .wordmark { color: #fff; opacity: .75; }

/* ---------- Type tokens (deck classes) ----------------------------------- */

.display    { font-family: var(--font-display); font-weight: 900; line-height: .92; letter-spacing: var(--tr-display); }
.headline-d2 { font-weight: 900; font-size: var(--t-d2); line-height: .9;  letter-spacing: -0.035em; margin: 0; }
.headline-d3 { font-weight: 900; font-size: var(--t-d3); line-height: .9;  letter-spacing: -0.035em; margin: 0; }
.headline-d4 { font-weight: 900; font-size: var(--t-d4); line-height: .95; letter-spacing: -0.025em; margin: 0; }
.headline-d5 { font-weight: 900; font-size: var(--t-d5); line-height: .95; letter-spacing: -0.025em; margin: 0; }

.lead-xl    { font-weight: 500; font-size: var(--t-lead-xl); line-height: 1.35; }
.lead       { font-weight: 500; font-size: var(--t-lead-m);  line-height: 1.4;  }
.lead-s     { font-weight: 500; font-size: var(--t-lead-s);  line-height: 1.4;  }

.eyebrow {
  font-weight: 800;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  color: var(--red);
}
.slide.red .eyebrow { color: #fff; opacity: .75; }

.overline {
  font-weight: 900;
  font-size: var(--t-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
}
.slide.dark .overline { color: var(--paper); }
.slide.red  .overline { color: #fff; opacity: .8; }

.kicker { color: var(--red); font-weight: 900; }            /* the period at end of headlines */
.dot-end::after { content: "."; color: var(--red); }        /* helper: <span class="dot-end">Inflection Point</span> */

/* Hairlines */
.rule        { height: var(--rule-major); background: var(--ink); border: 0; margin: 0; }
.rule-minor  { height: var(--rule-minor); background: var(--ink); border: 0; margin: 0; }
.slide.dark .rule, .slide.dark .rule-minor { background: var(--paper); }
.slide.red  .rule, .slide.red  .rule-minor { background: #fff; }

/* ---------- Stat / KPI patterns ------------------------------------------ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.stat-grid .cell {
  padding: 36px 28px 28px;
  border-right: 1px solid rgba(14,14,15,.2);
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stat-grid .cell:last-child { border-right: 0; }
.stat-grid .k { font-weight: 900; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.stat-grid .v { font-weight: 900; font-size: 56px; line-height: .95; letter-spacing: -.02em; margin-top: auto; }
.stat-grid .v small { display: block; font-size: 18px; font-weight: 500; opacity: .6; margin-top: 8px; letter-spacing: 0; }

/* ---------- Pillar card -------------------------------------------------- */

.pillar {
  background: var(--ink); color: var(--paper);
  padding: 56px 52px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 480px;
}
.pillar.red { background: var(--red); color: #fff; }
.pillar .big {
  font-weight: 900; font-size: 90px; line-height: .95; letter-spacing: -.025em;
}
.pillar .num-xl {
  position: absolute; right: -30px; bottom: -80px;
  font-weight: 900; font-size: 380px; line-height: .8;
  opacity: .08; letter-spacing: -.05em; color: #fff;
  pointer-events: none;
}
.pillar .row {
  display: flex; justify-content: space-between;
  border-top: 1.5px solid rgba(255,255,255,.3);
  padding-top: 16px; margin-top: 20px;
  font-weight: 700; font-size: 18px;
}
.pillar .row .k { opacity: .6; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.pillar .row .v { text-align: right; font-weight: 800; }

/* ---------- Pin markers (for maps & diagrams) ---------------------------- */

.pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--red);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(210,55,43,0.2);
}
.pin.dim { opacity: .4; box-shadow: 0 0 0 4px rgba(210,55,43,0.12); }

.marker-num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--ink); color: var(--paper);
  font-weight: 900; font-size: 15px; letter-spacing: .02em;
  box-shadow: 0 0 0 6px var(--paper);
}
.marker-num.active { background: var(--red); color: #fff; }