/* ============================================================
   Kenpath theme for reveal.js
   Translated from /home/ubuntu/svara/design.md (V17 Developer-Warm)
   Light-mode only; warm white #FCFCFA canvas, Kenpath blue accent.
   ============================================================ */

/* ---------- Tokens (light mode only) ---------- */
:root {
  /* Surfaces */
  --bg:        #fcfcfa;
  --surface:   #ffffff;
  --ink:       #1a3a5c;
  --muted:     #5b7a96;
  --line:      #e2e8ee;
  --grid:      #eceff3;
  --plus:      #b8c4cf;

  /* Brand accent */
  --accent:        #2a6bb5;
  --accent-ink:    #1a4a7f;
  --accent-08:     rgba(42,107,181,0.08);
  --accent-soft:   rgba(42,107,181,0.18);

  /* Pastels (decoration only) */
  --pastel-lavender: #E5DEF6;
  --pastel-peach:    #FAE2CD;
  --pastel-mint:     #D5EFE0;
  --pastel-sky:      #D8E8F5;
  --pastel-blush:    #F5DEDC;

  /* Body / paragraph copy is slightly warmer than --muted */
  --copy: #3a3a3d;

  /* Spec-table zebra stripe */
  --stripe: #fafaf6;

  /* Section eyebrow accent rotation (per slide via --lbl-em) */
  --lbl-em: oklch(0.52 0.11 230); /* sky-deep default */

  /* Shadows */
  --shadow-soft:     0 1px 2px rgb(17 24 39 / 0.04),
                     0 4px 12px -4px rgb(17 24 39 / 0.06);
  --shadow-elevated: 0 4px 6px -2px rgb(17 24 39 / 0.05),
                     0 8px 24px -6px rgb(17 24 39 / 0.10);
  --shadow-glow:     0 6px 22px -8px rgba(42,107,181,0.28);

  --grain-opacity: 0.035;
}

/* ---------- Reveal.js base overrides ---------- */
.reveal-viewport,
.reveal {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

.reveal .slides {
  text-align: left;
}

/* Each slide gets a generous gutter; centred content via flex */
.reveal .slides > section,
.reveal .slides > section > section {
  padding: 80px 96px !important;
  height: 100%;
  box-sizing: border-box;
}

/* ---------- Typography ---------- */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-transform: none;
  line-height: 1.1;
  margin: 0;
}

.reveal h1 {
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.reveal h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.reveal h3 { font-size: 28px; line-height: 1.18; }
.reveal h4 { font-size: 21px; line-height: 1.2; }

.reveal p {
  color: var(--copy);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.reveal p.lede {
  font-size: 21px;
  line-height: 1.55;
  max-width: 56ch;
  color: var(--copy);
}

.reveal a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 0.15s ease;
}
.reveal a:hover { border-bottom-color: var(--accent); color: var(--accent-ink); }

.reveal strong, .reveal b { color: var(--ink); font-weight: 700; }

.mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-feature-settings: "ss01";
}

/* Tabular numerals for any live number */
.tnum { font-feature-settings: "tnum", "ss01"; }

/* ---------- Page layout primitives ---------- */
.slide-grid {
  display: grid;
  gap: 48px;
  width: 100%;
  height: 100%;
}

.slide-grid.two-col   { grid-template-columns: 1fr 1fr; }
.slide-grid.left-lede { grid-template-columns: 1.05fr 1fr; }

.slide-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.slide-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}

/* ---------- Eyebrow (+ NN / LABEL) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: "ss01";
}
.eyebrow em {
  color: var(--lbl-em);
  font-style: normal;
}
.eyebrow .plus-glyph { color: var(--muted); }

/* ---------- Section eyebrow accent rotation ---------- */
section[data-accent="sky"]      { --lbl-em: oklch(0.52 0.11 230); }
section[data-accent="peach"]    { --lbl-em: oklch(0.56 0.12 55);  }
section[data-accent="mint"]     { --lbl-em: oklch(0.52 0.11 165); }
section[data-accent="lavender"] { --lbl-em: oklch(0.52 0.10 295); }
section[data-accent="blush"]    { --lbl-em: oklch(0.55 0.10 15);  }

/* ---------- Brand mark (CSS square w/ punched centre) ---------- */
.brand-mark {
  width: 22px; height: 22px;
  background: var(--accent);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--bg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- Slide hairline frame ---------- */
.slide-frame {
  position: absolute;
  inset: 56px 72px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
  z-index: 0;
}
.slide-frame::before,
.slide-frame::after {
  content: "";
  position: absolute;
  top: -8px; bottom: -8px;
  width: 1px; background: var(--line);
}
.slide-frame::before { left: 0; }
.slide-frame::after  { right: 0; }

/* Slide number indicator (top-right, mono) */
.slide-num {
  position: absolute;
  top: 32px; right: 96px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  z-index: 5;
}

/* Top brand strip */
.slide-topbrand {
  position: absolute;
  top: 32px; left: 96px;
  z-index: 5;
}

/* ---------- Reveal.js controls / progress (themed) ---------- */
.reveal .controls {
  color: var(--accent);
}
.reveal .progress {
  background: rgba(0,0,0,0.04);
  height: 3px;
}
.reveal .progress span {
  background: var(--accent);
}

/* Print / PDF export adjustments */
@media print {
  .reveal .slides > section { padding: 64px 80px !important; }
  .slide-frame { inset: 48px 56px; }
}