/* IDM Pilot Deck — design tokens & base */

:root {
  /* Palette */
  --ink: #0A1F17;            /* deepest near-black green */
  --emerald: #0F3D2E;        /* brand primary */
  --emerald-2: #16513D;      /* hover/accent */
  --paper: #F4F1EA;          /* warm off-white */
  --paper-2: #EAE5DA;        /* secondary surface */
  --rule: #D6CFC0;           /* hairline on paper */
  --rule-dark: rgba(244, 241, 234, 0.18); /* hairline on dark */
  --muted: #6B6657;          /* secondary text on paper */
  --muted-dark: rgba(244, 241, 234, 0.62); /* secondary text on emerald */
  --brass: oklch(0.72 0.08 80);    /* restrained accent */
  --brass-soft: oklch(0.85 0.045 80);

  /* Type */
  --f-display: "IBM Plex Serif", "Times New Roman", Georgia, serif;
  --f-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Density — overwritten by tweak */
  --d-pad-x: 120px;
  --d-pad-y: 96px;
  --d-h1: 96px;
  --d-h2: 64px;
  --d-h3: 40px;
  --d-body: 26px;
  --d-small: 18px;
  --d-label: 13px;
  --d-gap: 28px;
}

[data-density="spacious"] {
  --d-pad-x: 144px; --d-pad-y: 112px;
  --d-h1: 112px; --d-h2: 72px; --d-h3: 44px;
  --d-body: 28px; --d-small: 19px; --d-label: 13px;
  --d-gap: 36px;
}
[data-density="info"] {
  --d-pad-x: 96px; --d-pad-y: 72px;
  --d-h1: 80px; --d-h2: 52px; --d-h3: 34px;
  --d-body: 22px; --d-small: 16px; --d-label: 12px;
  --d-gap: 20px;
}

/* ─────────── Palette presets ─────────── */
/* Default (emerald) is in :root above. */

/* Royal / dark blue */
[data-palette="blue"] {
  --ink:        #06162D;                  /* deepest near-black blue */
  --emerald:    #102D5A;                  /* brand primary (royal) */
  --emerald-2:  #1A3D75;
  --paper:      #EEF1F7;                  /* cool off-white */
  --paper-2:    #DDE3EE;                  /* secondary surface */
  --rule:       #C2CADB;
  --rule-dark:  rgba(238, 241, 247, 0.18);
  --muted:      #5B6478;
  --muted-dark: rgba(238, 241, 247, 0.62);
  --brass:      oklch(0.72 0.085 78);     /* warm gold accent */
  --brass-soft: oklch(0.85 0.055 80);
}

/* Sand / camel */
[data-palette="sand"] {
  --ink:        #241A0E;                  /* warm dark espresso */
  --emerald:    #8A6A3E;                  /* brand primary (camel) */
  --emerald-2:  #A07F50;
  --paper:      #F4ECDC;                  /* warm cream */
  --paper-2:    #E7DBC2;                  /* deeper sand */
  --rule:       #C9B997;
  --rule-dark:  rgba(244, 236, 220, 0.22);
  --muted:      #7A6A4F;
  --muted-dark: rgba(244, 236, 220, 0.7);
  --brass:      oklch(0.74 0.095 50);     /* terracotta accent */
  --brass-soft: oklch(0.87 0.055 60);
}

html, body { background: #000; }
deck-stage { background: #000; }

section.slide {
  width: 1920px;
  height: 1080px;
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  font-feature-settings: "ss01", "ss02", "cv11";
}

/* Surfaces */
section.slide.emerald { background: var(--emerald); color: var(--paper); }
section.slide.ink     { background: var(--ink);     color: var(--paper); }
section.slide.paper-2 { background: var(--paper-2); color: var(--ink);   }

/* Typography primitives */
.display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--d-h1);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.display em { font-weight: 400; font-style: italic; }
.h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--d-h2);
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h2 em { font-weight: 400; font-style: italic; }
.h3 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: var(--d-h3);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--d-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.body {
  font-family: var(--f-sans);
  font-size: var(--d-body);
  line-height: 1.4;
  font-weight: 400;
  text-wrap: pretty;
}
.lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: calc(var(--d-h3) * 1.0);
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.small {
  font-family: var(--f-sans);
  font-size: var(--d-small);
  line-height: 1.45;
  color: var(--muted);
}
.emerald .small, .ink .small { color: var(--muted-dark); }
.mono {
  font-family: var(--f-mono);
  font-size: var(--d-label);
  letter-spacing: 0.04em;
}

/* Layout shell — content padding */
.frame {
  position: absolute;
  inset: 0;
  padding: var(--d-pad-y) var(--d-pad-x);
  display: flex;
  flex-direction: column;
}

/* Top chrome — mono row across every slide */
.chrome-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 52px;
  margin-bottom: 56px;
}
.chrome-top .mono { color: var(--muted); }
.emerald .chrome-top .mono, .ink .chrome-top .mono { color: var(--muted-dark); }
/* Right-aligned slide title in top chrome — more prominent than other chrome text */
.chrome-top .slide-title {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.emerald .chrome-top .slide-title,
.ink .chrome-top .slide-title { color: var(--paper); }
.paper-2 .chrome-top .slide-title { color: var(--ink); }
.chrome-top .rule {
  height: 1px;
  background: var(--rule);
}
.emerald .chrome-top .rule, .ink .chrome-top .rule { background: var(--rule-dark); }

/* Bottom chrome */
.chrome-bot {
  position: absolute;
  left: var(--d-pad-x);
  right: var(--d-pad-x);
  bottom: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  height: 28px;
}
.chrome-bot .rule {
  height: 1px;
  background: var(--rule);
}
.emerald .chrome-bot .rule, .ink .chrome-bot .rule { background: var(--rule-dark); }
.chrome-bot .mono { color: var(--muted); }
.emerald .chrome-bot .mono, .ink .chrome-bot .mono { color: var(--muted-dark); }

/* Wordmark — uses currentColor */
.wordmark { display: inline-flex; align-items: center; height: 48px; }
.wordmark svg { display: block; height: 100%; width: auto; }

/* Diamond motif (from logo's 'i' dot) */
.diamond {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  background: currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  margin: 0 0.3em;
}

/* 8-point rosette — pure CSS, two squares rotated */
.rosette {
  position: relative;
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: middle;
}
.rosette::before,
.rosette::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.rosette::after { transform: rotate(45deg); }

/* Page number "01 / 10" */
.pageno { font-family: var(--f-mono); font-size: var(--d-label); letter-spacing: 0.06em; }
.pageno b { font-weight: 500; }

/* Numbered list — compliance / process */
.steps {
  display: grid;
  gap: var(--d-gap);
}
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.emerald .step, .ink .step { border-top-color: var(--rule-dark); }
.step-no {
  font-family: var(--f-mono);
  font-size: var(--d-small);
  font-weight: 500;
  padding-top: 6px;
}
.step h4 {
  font-family: var(--f-sans);
  font-size: calc(var(--d-h3) * 0.7);
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.step p {
  font-family: var(--f-sans);
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
  color: var(--muted);
}
.emerald .step p, .ink .step p { color: var(--muted-dark); }

/* Two-column compare */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  flex: 1;
  min-height: 0;
}

/* Bullets — simple, no glyph clutter */
.bul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 14px;
}
.bul li {
  position: relative;
  padding-left: 24px;
  font-family: var(--f-sans);
  font-size: var(--d-small);
  line-height: 1.45;
}
.bul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* Card / panel */
.card {
  border: 1px solid var(--rule);
  padding: 32px;
  background: rgba(255,255,255,0.4);
}
.emerald .card, .ink .card {
  border-color: var(--rule-dark);
  background: rgba(255,255,255,0.025);
}

/* Tag chip */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: var(--d-label);
  letter-spacing: 0.06em;
}
.emerald .tag, .ink .tag { border-color: var(--rule-dark); }

/* ─── Star bleed motif (corner ornament for hero / divider slides) ─── */
.star-bleed {
  position: absolute;
  width: 1100px; height: 1100px;
  color: var(--brass-soft);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.star-bleed svg { width: 100%; height: 100%; display: block; }
.star-bleed.br { right: -260px; bottom: -260px; }
.star-bleed.tl { left:  -300px; top:    -300px; }
.star-bleed.tr { right: -300px; top:    -300px; }
.star-bleed.bl { left:  -260px; bottom: -260px; }

/* Small star-stamp ornament — for inline use as a separator */
.star-stamp {
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: middle;
  color: var(--brass-soft);
}
.star-stamp svg { width: 100%; height: 100%; display: block; }

/* Ensure frame content sits above the star bleed */
.frame { z-index: 1; }

/* Repeating diamond pattern strip — used on dividers */
.pattern-strip {
  height: 8px;
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  opacity: 0.22;
  width: 100%;
}

/* Big numeric label */
.big-no {
  font-family: var(--f-display);
  font-size: 200px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 400;
}

/* Image placeholder (we don't have imagery) */
.imgph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(15,61,46,0.06) 0 1px,
      transparent 1px 12px);
  border: 1px solid var(--rule);
}
.imgph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Brief slide (page 1 of the file — internal, not part of pitch) */
.brief {
  background: var(--paper);
  color: var(--ink);
}

/* Print sizing for PDF export */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
}