/* TTS Reader v2 — Paper · Design Tokens
 * Drop into your stylesheet. All component CSS should reference these
 * variables; never hardcode hex values.
 */

:root {
  /* ── Color · light (default) ─────────────────────────────────────── */
  --paper-bg:         #f4ede0;
  --paper-bg-alt:     #ece3d2;
  --paper-card:       #faf5e9;
  --paper-ink:        #2b2519;
  --paper-ink-2:      #6b5f4a;
  --paper-ink-3:      #9c8e75;
  --paper-accent:     #a8472a;   /* sienna — can be re-themed */
  --paper-line:       #d9cdb3;
  --paper-line-soft:  #e6dcc4;

  /* ── Typography ──────────────────────────────────────────────────── */
  --paper-serif: "Iowan Old Style", "Palatino", "Palatino Linotype",
                 "Hoefler Text", "Fraunces", Georgia, serif;
  --paper-sans:  "Helvetica Neue", "Helvetica", "Arial",
                 -apple-system, system-ui, sans-serif;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --paper-screen-px:   22px;
  --paper-card-px:     20px;
  --paper-card-py:     18px;
  --paper-row-py:      14px;
  --paper-safe-top:    16px;
  --paper-safe-bottom: 26px;

  /* ── Borders ─────────────────────────────────────────────────────── */
  --paper-border:        1px solid var(--paper-line);
  --paper-border-soft:   1px solid var(--paper-line-soft);
  --paper-border-strong: 1.5px solid var(--paper-ink);

  /* ── Shadows ─────────────────────────────────────────────────────── */
  --paper-shadow-stack: 0 2px 0 var(--paper-ink-2);
  --paper-shadow-float: 0 8px 24px rgba(43, 37, 25, 0.18);

  /* ── Tracking ────────────────────────────────────────────────────── */
  --paper-track-eyebrow: 0.2em;
  --paper-track-button:  0.15em;
  --paper-track-meta:    0.05em;
  --paper-track-mono:    0.1em;
}

/* ── Dark paper (user-toggleable) ──────────────────────────────────── */
[data-paper-theme="dark"] {
  --paper-bg:         #1c1812;
  --paper-bg-alt:     #2a241a;
  --paper-card:       #251f15;
  --paper-ink:        #f0e6d2;
  --paper-ink-2:      #b8a988;
  --paper-ink-3:      #7a6e58;
  --paper-line:       #3a3225;
  --paper-line-soft:  #2e2820;
  --paper-shadow-stack: 0 2px 0 rgba(0, 0, 0, 0.6);
  --paper-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ── Accent palette (user-pickable) ────────────────────────────────── */
[data-paper-accent="sienna"] { --paper-accent: #a8472a; }
[data-paper-accent="wine"]   { --paper-accent: #7a3a52; }
[data-paper-accent="forest"] { --paper-accent: #3a5a3a; }
[data-paper-accent="navy"]   { --paper-accent: #2a4a72; }
[data-paper-accent="ochre"]  { --paper-accent: #7a5f1a; }

/* ── Reusable type classes ─────────────────────────────────────────── */
.paper-h1 {
  font-family: var(--paper-serif);
  font-size: 44px; font-weight: 400; line-height: 0.95;
  letter-spacing: 0; font-style: italic;
  margin: 0;
}
.paper-h2 {
  font-family: var(--paper-serif);
  font-size: 22px; font-weight: 500; line-height: 1.1;
  letter-spacing: 0; font-style: italic;
  margin: 0;
}
.paper-title-row {
  font-family: var(--paper-serif);
  font-size: 17px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0;
}
.paper-body {
  font-family: var(--paper-serif);
  font-size: 18px; line-height: 1.55;
  letter-spacing: 0;
  text-wrap: pretty;
}
.paper-author {
  font-family: var(--paper-sans);
  font-size: 11px; color: var(--paper-ink-2);
  font-style: italic;
}
.paper-eyebrow {
  font-family: var(--paper-sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--paper-track-eyebrow);
  text-transform: uppercase;
}
.paper-button-caps {
  font-family: var(--paper-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: var(--paper-track-button);
  text-transform: uppercase;
}
.paper-meta {
  font-family: var(--paper-sans);
  font-size: 10px; color: var(--paper-ink-3);
  letter-spacing: var(--paper-track-meta);
  font-variant-numeric: tabular-nums;
}
.paper-time {
  font-family: var(--paper-sans);
  font-size: 10px; color: var(--paper-ink-3);
  letter-spacing: var(--paper-track-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Reusable component skeletons ──────────────────────────────────── */
.paper-card {
  background: var(--paper-card);
  border: var(--paper-border);
  padding: var(--paper-card-py) var(--paper-card-px);
}
.paper-progress {
  height: 2px;
  background: var(--paper-line);
  position: relative;
}
.paper-progress > span {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--paper-accent);
}
.paper-btn-primary {
  background: var(--paper-ink);
  color: var(--paper-bg);
  border: none;
  padding: 16px 24px;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.paper-btn-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--paper-ink); color: var(--paper-bg);
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--paper-shadow-stack);
  cursor: pointer;
}
.paper-btn-play--small {
  width: 44px; height: 44px;
}