:root {
  /* Background */
  --color-bg-primary: #0b0c13;
  --color-bg-secondary: #0d0e17;
  --color-bg-tertiary: #0a0b12;
  --color-bg-elevated: #13141f;

  /* Border */
  --color-border-default: #151825;
  --color-border-subtle: #1c2035;

  /* Text */
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-text-muted: #475569;
  --color-text-disabled: #3b4252;

  /* Accent */
  --color-accent-blue: #3b82f6;
  --color-accent-blue-light: #60a5fa;
  --color-accent-cyan: #06b6d4;

  /* Status */
  --color-status-success: #22c55e;
  --color-status-error: #ef4444;
  --color-status-warning: #f59e0b;
  --color-status-info: #a78bfa;

  /* Typography */
  --font-family-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', monospace;
  --font-size-xs: 8px;
  --font-size-sm: 10px;
  --font-size-md: 12px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-xxl: 18px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-0: 0px;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 10px;
  --spacing-6: 12px;
  --spacing-7: 14px;
  --spacing-8: 16px;
  --spacing-10: 20px;
  --spacing-12: 24px;

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-xxl: 12px;
  --radius-full: 16px;
  --border-thin: 1px;
  --border-medium: 1.5px;
  --border-thick: 2px;

  /* Shadows */
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-viewport: 0 0 0 1px rgba(59, 130, 246, 0.5);

  /* Z-index */
  --z-dropdown: 100;
  --z-tooltip: 200;
  --z-modal: 1000;
}

/* PDF text layer — pdf.js TextLayer overlay. Rendered absolutely on top of
   the canvas; spans carry transparent color so glyphs remain visual-only on
   the canvas while selection / copy still operate on the DOM text. */
.pdf-text-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  user-select: text;
  line-height: 1;
  opacity: 1;
  /* pdf.js expects a `--scale-factor` CSS var for font sizing inside spans. */
  --scale-factor: 1;
}

.pdf-text-layer span,
.pdf-text-layer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.pdf-text-layer ::selection {
  background: rgba(59, 130, 246, 0.4);
  color: transparent;
}

.pdf-text-layer .pdf-find-match {
  background: rgba(245, 158, 11, 0.35);
  border-radius: 2px;
}

.pdf-text-layer .pdf-find-match-current {
  background: rgba(245, 158, 11, 0.7);
}

/* PDF link overlay — transparent clickable rectangles positioned over each
   pdf.js link annotation. We host our own buttons (not pdf.js's annotation
   layer anchors) so the click handler can intercept navigation and route the
   URL through clipboard + audit instead of launching a browser. */
.pdf-link-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pdf-link-layer button {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  outline-offset: 2px;
}

.pdf-link-layer button:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.8);
}

.pdf-link-layer button:hover {
  background: rgba(59, 130, 246, 0.15);
}

/* Slice index slider — Radiant-style position indicator (no progress fill).
   Custom div-based slider (not native range) for pixel-precise control. */
.medio-slice-slider-wrap {
  position: absolute;
  right: 8px;
  top: 30px;
  bottom: 12px;
  width: 14px;
  z-index: 20;
  cursor: pointer;
  touch-action: none;
}

.medio-slice-slider-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-border-default);
  border-radius: 3px;
  pointer-events: none;
}

.medio-slice-slider-thumb {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--color-accent-blue);
  border: 1px solid var(--color-bg-secondary);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition:
    background 0.12s,
    transform 0.12s;
}

.medio-slice-slider-wrap:hover .medio-slice-slider-thumb {
  filter: brightness(1.15);
}

.medio-slice-slider-wrap:active .medio-slice-slider-thumb {
  transform: scale(1.05);
}