/* Feed design tokens — Palette "Paper" */

:root {
  /* ── Palette ── */
  --feed-bg:           #f3f5f7;
  --feed-panel:        #f9fafb;
  --feed-border:       rgba(20, 25, 40, 0.08);
  --feed-borderStrong: rgba(20, 25, 40, 0.16);
  --feed-ink:          #1a1f28;
  --feed-ink2:         #4a5160;
  --feed-ink3:         #7c8290;
  --feed-muted:        rgba(20, 25, 40, 0.5);
  --feed-accent:       #566073;
  --feed-accentSoft:   rgba(86, 96, 115, 0.10);
  --feed-onAccent:     #f9fafb;
  --feed-danger:       #a05050;

  /* ── Tone colours — feedback surfaces only; do not compose with each other ── */
  --info-bg: var(--feed-accentSoft);
  --info-fg: var(--feed-accent);
  --info-bd: var(--feed-border);
  --warn-bg: oklch(0.96 0.035 78);
  --warn-fg: oklch(0.40 0.10 70);
  --warn-bd: oklch(0.86 0.06 75);
  --err-bg:  oklch(0.965 0.025 25);
  --err-fg:  oklch(0.42 0.13 25);
  --err-bd:  oklch(0.86 0.07 25);

  /* ── Font families ── */
  --feed-font-serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --feed-font-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --feed-font-mono:  ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Consolas", monospace;
}

/* ── Typography utility classes ── */

/* Page H1 — Subscriptions / Settings title */
/* Serif | 28px | 500 | 1.1 | −0.02em */
.type-page-h1 {
  font-family: var(--feed-font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Article list section title */
/* Serif | 22px | 500 | 1.1 | −0.015em */
.type-list-section-title {
  font-family: var(--feed-font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Article H1 (reader) */
/* Serif | 36px | 500 | 1.12 | −0.02em */
.type-article-h1 {
  font-family: var(--feed-font-serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Article dek/excerpt in reader */
/* Serif italic | 18px | 400 | 1.45 | 0 */
.type-article-dek {
  font-family: var(--feed-font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Article body */
/* Serif | configurable (default 18px) | 400 | 1.65 | 0 */
.type-article-body {
  font-family: var(--feed-font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}

/* List item title */
/* Serif | 17px (15px compact) | 500 | 1.25 | −0.01em */
.type-list-title {
  font-family: var(--feed-font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Brand wordmark "Feed" */
/* Serif | 17px (16px mobile) | 500 | 1 | −0.01em */
.type-brand {
  font-family: var(--feed-font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Settings row label */
/* Sans | 14px | 500 | 1.4 | 0 */
.type-settings-label {
  font-family: var(--feed-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Settings row hint */
/* Sans | 12px | 400 | 1.45 | 0 */
.type-settings-hint {
  font-family: var(--feed-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Feed/folder list item */
/* Sans | 12.5px | 400 | 1.4 | 0 */
.type-feed-item {
  font-family: var(--feed-font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Nav item */
/* Sans | 13px | 500 | 1.4 | 0 */
.type-nav-item {
  font-family: var(--feed-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Article-list excerpt */
/* Sans | 12px | 400 | 1.4 | 0 */
.type-list-excerpt {
  font-family: var(--feed-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Section eyebrow / uppercase label */
/* Sans | 10–11px | 500 | 1 | 0.06–0.10em, uppercase */
.type-eyebrow {
  font-family: var(--feed-font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Time/min-read */
/* Sans | 10.5–12px | 400 | 1 | 0, tabular-nums */
.type-time {
  font-family: var(--feed-font-sans);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Folder name in sidebar */
/* Sans | 10px | 500 | 1 | 0.1em, uppercase, ink3 */
.type-folder-label {
  font-family: var(--feed-font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--feed-ink3);
}

/* ── Code block styling (reader body) ── */

/* Block-level code: <pre> wrapping <code> */
[data-reader-body] pre {
  background: var(--feed-panel);
  border: 1px solid var(--feed-border);
  border-radius: 4px;
  padding: 12px 16px;
  overflow-x: auto;
  white-space: pre;
  font-family: var(--feed-font-mono);
  font-size: 0.875em;
  line-height: 1.5;
  margin: 1em 0;
}

/* All code/samp/kbd elements: monospace font */
[data-reader-body] code,
[data-reader-body] samp,
[data-reader-body] kbd {
  font-family: var(--feed-font-mono);
  font-size: 0.875em;
}

/* Inline code (not inside pre) — subtle background pill */
[data-reader-body] :not(pre) > code,
[data-reader-body] :not(pre) > samp,
[data-reader-body] :not(pre) > kbd {
  background: var(--feed-panel);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--feed-border);
}

/* kbd gets a slightly raised look */
[data-reader-body] :not(pre) > kbd {
  box-shadow: 0 1px 0 var(--feed-border);
}