/* Complai Ecosystem Deck — Design tokens & shared styles */

:root {
  /* Greyscale — warm ink on bone */
  --bone:        #f4f1ea;
  --bone-2:      #ece8df;
  --bone-3:      #e0dbcf;
  --paper:       #faf8f3;
  --rule:        #d6d1c3;
  --rule-2:      #c2bcae;
  --ink:         #1a1815;
  --ink-2:       #2c2924;
  --ink-3:       #4a4640;
  --ink-4:       #6b665d;
  --ink-5:       #8c8678;
  --ink-6:       #a8a293;

  /* The single accent — reserved for Quorum and Quorum alone */
  --quorum:      #c5631e;     /* sodium amber */
  --quorum-2:    #e08038;
  --quorum-3:    #f4a866;
  --quorum-deep: #8a4214;

  /* Slate tonal shift — Quorum slide background only */
  --slate:       #1d1f23;
  --slate-2:     #25272b;
  --slate-3:     #34373c;
  --slate-bone:  #d8d3c5;
  --slate-bone-dim: #8b867a;

  /* Type */
  --sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  font-feature-settings: 'ss01', 'cv11', 'kern';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

deck-stage {
  background: #0a0908;
}

/* ── Slide chrome ─────────────────────────────────────────── */

.slide {
  width: 1920px;
  height: 1080px;
  background: var(--bone);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 88px 120px;
}

.slide.dark {
  background: var(--slate);
  color: var(--slate-bone);
}

/* Hairline frame inside every slide — quiet architectural cue */
.slide::after {
  content: "";
  position: absolute;
  inset: 56px 56px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.slide.dark::after {
  border-color: rgba(216, 211, 197, 0.12);
}
.slide.no-frame::after { display: none; }

/* Slide header chrome — quiet running header */
.slide-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}
.slide.dark .slide-header { color: var(--slate-bone-dim); }

.slide-header .left { display: flex; gap: 32px; }
.slide-header .right { display: flex; gap: 32px; }

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.wordmark .lm-svg {
  height: 22px;
  width: auto;
  display: block;
  overflow: visible;
}
.slide.dark .wordmark { color: var(--slate-bone); }
.wordmark .complai-mark {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}
.wordmark .complai-mark .c-arc { stroke: var(--ink); }
.wordmark .complai-mark .c-link { stroke: var(--ink); }
.slide.dark .wordmark .complai-mark .c-arc { stroke: var(--quorum); }
.slide.dark .wordmark .complai-mark .c-link { stroke: var(--quorum-2); }

.slide-number {
  font-variant-numeric: tabular-nums;
}

/* Slide body container */
.slide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* ── Type scale ───────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 32px;
}
.slide.dark .eyebrow { color: var(--slate-bone-dim); }

h1.title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 88px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 1500px;
}
.slide.dark h1.title { color: var(--slate-bone); }

h2.section {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 1400px;
}
.slide.dark h2.section { color: var(--slate-bone); }
h2.section em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  color: var(--ink-2);
}
.slide.dark h2.section em { color: var(--slate-bone-dim); }

h3.h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

p.lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  max-width: 1300px;
  text-wrap: pretty;
}
.slide.dark p.lede { color: var(--slate-bone); }

p.body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 1200px;
  text-wrap: pretty;
}

p.small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-3);
}

em.italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.mono { font-family: var(--mono); font-feature-settings: 'zero', 'ss02'; }
.tabular { font-variant-numeric: tabular-nums; }

/* Numbers as typography */
.huge-num {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 200px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.big-num {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ── Utility ──────────────────────────────────────────────── */

.rule {
  height: 1px;
  background: var(--rule);
  width: 100%;
}
.rule-thick {
  height: 1px;
  background: var(--ink-4);
  width: 100%;
}
.slide.dark .rule { background: rgba(216, 211, 197, 0.18); }

.label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.slide.dark .label { color: var(--slate-bone-dim); }

.accent { color: var(--quorum); }
.accent-2 { color: var(--quorum-2); }

.spacer-grow { flex: 1; }

/* Print — one slide per page */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  body { background: white; }
  deck-stage { background: white; }
}