/* ============================================================
   PORTFOLIO DESIGN SYSTEM — tokens.css
   All shared variables and base component styles.
   Load this before any template stylesheet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Work+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ── Custom properties ─────────────────────────────────────── */
:root {
  /* Slide geometry */
  --slide-aspect:       16 / 9;
  --slide-radius:       0px;
  --radius-control:     4px;
  --radius-pill:        999px;
  --border-accent-width: 1px;
  --slide-border-color: #D8D8D4;
  --slide-padding:      28px;       /* outer margin — all regions align to this */

  /* Spacing scale */
  --sp-1:  6px;
  --sp-2:  10px;
  --sp-3: 14px;
  --sp-4: 20px;
  --sp-5: 28px;

  /* Inter-region gap / intra-region stack */
  --gap-region: 20px;
  --gap-stack:   8px;

  /* Type families */
  --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type ramp */
  --type-eyebrow-size:   10px;
  --type-eyebrow-weight: 500;
  --type-eyebrow-ls:     0.045em;
  --type-eyebrow-lh:     1.2;

  --type-title-size:     27px;    /* stays between 20–29px; override per context */
  --type-title-weight:   400;
  --type-title-lh:       1.08;

  --type-body-size:      12px;
  --type-body-lh:        1.55;

  --type-caption-size:   9.5px;
  --type-caption-weight: 400;
  --type-caption-lh:     1.45;

  --type-mini-size:      8px;
  --type-mini-ls:        0.06em;

  /* Editorial component roles */
  --type-section-size:   22px;
  --type-page-title-size: 38px;
  --type-page-title-mobile-size: 26px;
  --type-nav-size:       13px;
  --type-prose-size:     15px;
  --type-quote-size:     16px;

  /* Color palette — one accent, rest greyscale */
  --color-accent:         #287E91;
  --color-accent-dim:     rgba(40, 126, 145, 0.06);
  --color-accent-border:  rgba(40, 126, 145, 0.26);

  --color-bg:             #FFFFFF;
  --color-surface:        #F6F6F3;
  --color-surface-dark:   #18181B;
  --color-surface-mid:    #27272A;

  --color-border:         #C9C9C4;
  --color-border-light:   #E2E2DE;

  --color-text:           #3E3E3C;
  --color-text-secondary: #666662;
  --color-muted:          #8B8B86;

  --color-live:           #287E91;

  /* UI state roles — used by the deck's illustrative mockups */
  --color-positive:       #2F9E73;
  --color-negative:       #C55252;
  --color-warning:        #C78800;
  --color-dark-bg:        #0F0F11;
  --color-dark-panel:     #18181B;
  --color-dark-line:      rgba(255, 255, 255, 0.08);
  --color-dark-muted:     rgba(255, 255, 255, 0.45);
  --color-dark-subtle:    rgba(255, 255, 255, 0.25);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Slide frame ────────────────────────────────────────────── */
.slide {
  position: relative;
  aspect-ratio: var(--slide-aspect);
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--slide-border-color);
  border-radius: var(--slide-radius);
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--color-text);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Type utilities ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-ls);
  line-height: var(--type-eyebrow-lh);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.slide-title {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.body-text {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
}

.caption-text {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}

.mini-label {
  font-family: var(--font-sans);
  font-size: var(--type-mini-size);
  font-weight: 500;
  letter-spacing: var(--type-mini-ls);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ── Editorial primitives for scrollable pages ─────────────── */
.section-label,
.cs-intro-label,
.cs-goal__label,
.cs-section-eyebrow,
.cs-sub,
.cs-use-case__role,
.idx-card__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-mini-size);
  font-weight: 600;
  letter-spacing: var(--type-mini-ls);
  line-height: var(--type-eyebrow-lh);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.rule-heading {
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-2);
}

.editorial-entry,
.idx-card {
  border-top: 1px solid var(--color-border);
  text-decoration: none;
}

.slide-number {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--slide-padding);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-mini-ls);
  color: var(--color-muted);
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================================
   COMPONENT: short-frame
   Fixed-ratio media container. Content letterboxes to fit;
   native proportions are never stretched.
   Usage: wrap <img>, <video>, or <iframe> in .short-frame.
   ============================================================ */
.short-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--slide-radius);
  /* Width/height or flex-grow comes from the parent context */
}

.short-frame > img,
.short-frame > video,
.short-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  border: none;
  display: block;
}

/* ── frame-label: optional wayfinding tag inside .short-frame ── */
/* Low-visual-weight corner label for state/version cues ("v1", "before", etc.) */
.frame-label {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.48);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

/* ============================================================
   COMPONENT: outcome-block
   Accent-bordered callout: one large metric + one support line.
   When not present in HTML, it leaves no empty space.
   ============================================================ */
.outcome-block {
  border-top: 1px solid var(--color-accent);
  border-left: 0;
  background: transparent;
  border-radius: 0;
  padding: var(--sp-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.outcome-block__figure {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

.outcome-block__support {
  font-size: var(--type-caption-size);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-secondary);
}

/* ── .quote modifier: pull-quote in place of large metric ── */
/* The decorative " mark (::before) preserves the visual anchor
   that the large number provides in the base variant — same
   size, weight, and accent color so the two feel like siblings. */
.outcome-block.quote {
  gap: var(--sp-2);
}

.outcome-block.quote .outcome-block__figure {
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-text);
  letter-spacing: 0;
}

.outcome-block.quote .outcome-block__figure::before {
  content: '\201C';
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  line-height: 0.8;
  color: var(--color-accent);
  letter-spacing: 0;
  margin-bottom: 5px;
}

/* ============================================================
   COMPONENT: footer-credit
   Bottom-right attribution. Position: absolute within .slide.
   ============================================================ */
.footer-credit {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--slide-padding);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 9px;
  line-height: 1;
  color: var(--color-muted);
  letter-spacing: 0.03em;
  pointer-events: none;
}

.footer-credit a {
  color: inherit;
  text-decoration: none;
  pointer-events: all;
}

.footer-credit a:hover {
  color: var(--color-text-secondary);
}

.footer-credit__sep {
  opacity: 0.35;
  user-select: none;
}

/* ============================================================
   DECK WRAPPER — screen scroll view
   ============================================================ */
.deck {
  background: var(--color-surface);
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 100vh;
}

body {
  background: var(--color-surface);
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   PRINT
   Each .slide breaks to its own page.
   Assumes @page landscape with zero margin (user controls this
   in print dialog or via @page below).
   ============================================================ */
@media print {
  @page {
    size: landscape;
    margin: 0;
  }

  body,
  .deck {
    background: none;
    padding: 0;
    gap: 0;
    margin: 0;
  }

  .slide {
    width: 100vw;
    height: 100vh;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    page-break-after: always;
    break-after: page;
  }

  .slide:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }

  .slide-number { display: none; }

  /* Kill the live-dot pulse for print */
  @keyframes pulse-dot { from {} to {} }
}