/* =========================================================
   PROOF · Brand tokens
   Source of truth for color, type, and spacing on the marketing
   site and product chrome. Drop into the global CSS layer.
   ========================================================= */

:root {
  /* ---------- Color ---------- */

  /* Ink (primary foreground / lens + handle) */
  --proof-ink:        #16161A;
  --proof-ink-80:    rgba(22, 22, 26, 0.80);
  --proof-ink-60:    rgba(22, 22, 26, 0.60);
  --proof-ink-30:    rgba(22, 22, 26, 0.30);

  /* Off-white (canvas / on-dark foreground) */
  --proof-paper:      #FBFAF7;
  --proof-paper-2:    #F6F5F2;  /* page background */
  --proof-paper-3:    #ECE8DE;  /* hairlines, cards */

  /* Teal accent (waveform bars / focus / links) */
  --proof-teal:       #20B2CC;          /* brighter sRGB */
  --proof-teal-oklch: oklch(0.72 0.12 200);
  --proof-teal-12:    rgba(32, 178, 204, 0.12);
  --proof-teal-24:    rgba(32, 178, 204, 0.24);

  /* Semantic */
  --proof-bg:         var(--proof-paper-2);
  --proof-surface:    var(--proof-paper);
  --proof-fg:         var(--proof-ink);
  --proof-fg-muted:   var(--proof-ink-60);
  --proof-border:     var(--proof-paper-3);
  --proof-accent:     var(--proof-teal);
  --proof-focus:      var(--proof-teal);

  /* ---------- Type ---------- */
  --proof-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --proof-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Wordmark presets */
  --proof-wordmark-weight:  800;
  --proof-wordmark-tracking: -0.045em;

  /* ---------- Radii / shadow ---------- */
  --proof-radius-sm: 6px;
  --proof-radius-md: 12px;
  --proof-radius-lg: 20px;
  --proof-radius-pill: 999px;

  --proof-shadow-1: 0 1px 2px rgba(22,22,26,0.06);
  --proof-shadow-2: 0 8px 24px rgba(22,22,26,0.10);
}

/* Dark surface variant (apply to a container, not :root, to scope) */
[data-theme="dark"] {
  --proof-bg:       var(--proof-ink);
  --proof-surface:  #1F1F23;
  --proof-fg:       var(--proof-paper);
  --proof-fg-muted: rgba(251, 250, 247, 0.65);
  --proof-border:   rgba(251, 250, 247, 0.12);
}

/* =========================================================
   Wordmark helper
   <span class="proof-wordmark">PROOF</span>
   ========================================================= */
.proof-wordmark {
  font-family: var(--proof-font-sans);
  font-weight: var(--proof-wordmark-weight);
  letter-spacing: var(--proof-wordmark-tracking);
  line-height: 0.9;
  color: var(--proof-fg);
}

/* Lockup (mark + wordmark) */
.proof-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.proof-lockup .proof-mark { flex: none; }

/* Focus ring (use on interactive elements) */
.proof-focus-ring:focus-visible {
  outline: 2px solid var(--proof-focus);
  outline-offset: 2px;
}

/* Paywall blur teaser */
.paywall-blur {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.paywall-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0.75rem;
  z-index: 10;
}