/* mecattaf.dev theme overrides — loaded after site.css.
   Fonts: Hanken Grotesk (body — free OFL lookalike for tomtunguz.com's Maison Neue)
   + Spectral (headings). Both loaded from Google Fonts.
   Light = the base "paper" theme. Dark = catppuccin-noir (from ~/.config/nvim). */

/* --- fonts: universal (both themes) --- */
:root {
  --body-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ui-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono-font: 'JetBrains Mono', 'SFMono-Regular', 'SF Mono', ui-monospace, monospace;
  --serif-font: 'Spectral', Georgia, 'Times New Roman', serif;

  /* catppuccin-noir tokens (consumed only in dark contexts below) */
  --n-page: #000000; --n-paper: #060708; --n-panel: #0e1013; --n-border: #20242b; --n-shadow: rgba(0,0,0,.6); --n-rule: #16181d;
  --n-ink: #EAECF0; --n-muted: #818898; --n-faint: #5b606b;
  --n-accent: #70B8FF; --n-accent-h: #9fccff; --n-sel: #1f3a55;
  --n-pill: #14171c; --n-code-inline: #14171c;
  --n-ctrl: #0a0c0f; --n-ctrl-ph: #6c7280; --n-focus: #70B8FF; --n-focus-ring: rgba(112,184,255,.25);
  --n-pop: #0a0c0f; --n-pop-head: #101317; --n-pop-hover: #14181d; --n-pop-shadow: rgba(0,0,0,.7);
  --n-vis-bg: #18130c; --n-vis-border: #4a3a22; --n-vis-text: #FBAD60;
  --n-code-bg: #0c0e11; --n-code-lang: #818898; --n-quote-border: #45475a; --n-quote-text: #D3D7DE;
  --n-st-disc-bg: #10210f; --n-st-disc-bd: #305a32; --n-st-disc-tx: #9BE963;
  --n-st-pub-bg: #0c1e2e; --n-st-pub-bd: #2a5276; --n-st-pub-tx: #70B8FF;
  --n-st-impl-bg: #103021; --n-st-impl-bd: #3a7a4f; --n-st-impl-tx: #5EEDED;
  --n-st-aband-bg: #2a1416; --n-st-aband-bd: #5a2a30; --n-st-aband-tx: #F47B85;
}

/* headings = Spectral (serif), body = Maison Neue (via --body-font) */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.rfc-hero h1, .index-header h1, .index-content h2 {
  font-family: var(--serif-font);
  letter-spacing: -0.012em;
}

/* tighten over-tracked uppercase labels, esp. the "MECATTAF RFCS" kicker */
.rfc-kicker { letter-spacing: 0.045em; font-size: 0.78rem; }
.list-head > div, .rfc-meta-row dt, .index-search-hint, .rfc-toc-title { letter-spacing: 0.06em; }

/* --- dark = catppuccin-noir. Mirrors site.css gating exactly. --- */
:root[data-theme='dark'] {
  color-scheme: dark;
  --page-bg: var(--n-page); --paper-bg: var(--n-paper); --panel-bg: var(--n-panel);
  --paper-border: var(--n-border); --paper-shadow: var(--n-shadow); --rule: var(--n-rule);
  --ink: var(--n-ink); --muted: var(--n-muted); --faint: var(--n-faint); --prose-lead: var(--n-ink); --search-excerpt: var(--n-muted);
  --accent: var(--n-accent); --accent-hover: var(--n-accent-h); --selection: var(--n-sel);
  --pill-bg: var(--n-pill); --inline-code-bg: var(--n-code-inline);
  --control-bg: var(--n-ctrl); --control-placeholder: var(--n-ctrl-ph); --focus-border: var(--n-focus); --focus-ring: var(--n-focus-ring);
  --popover-bg: var(--n-pop); --popover-head-bg: var(--n-pop-head); --popover-hover-bg: var(--n-pop-hover); --popover-shadow: var(--n-pop-shadow);
  --visibility-bg: var(--n-vis-bg); --visibility-border: var(--n-vis-border); --visibility-text: var(--n-vis-text);
  --code-block-bg: var(--n-code-bg); --code-language: var(--n-code-lang); --blockquote-border: var(--n-quote-border); --blockquote-text: var(--n-quote-text);
  --tweet-bg: var(--n-code-bg); --tweet-border: var(--n-border); --tweet-avatar-border: var(--n-border); --tweet-avatar-bg: var(--n-pill); --tweet-rule: var(--n-border); --tweet-oembed-bg: var(--n-pop-head);
  --state-draft-bg: var(--n-pill); --state-draft-border: var(--n-border); --state-draft-text: var(--n-muted);
  --state-discussion-bg: var(--n-st-disc-bg); --state-discussion-border: var(--n-st-disc-bd); --state-discussion-text: var(--n-st-disc-tx);
  --state-published-bg: var(--n-st-pub-bg); --state-published-border: var(--n-st-pub-bd); --state-published-text: var(--n-st-pub-tx);
  --state-implemented-bg: var(--n-st-impl-bg); --state-implemented-border: var(--n-st-impl-bd); --state-implemented-text: var(--n-st-impl-tx);
  --state-abandoned-bg: var(--n-st-aband-bg); --state-abandoned-border: var(--n-st-aband-bd); --state-abandoned-text: var(--n-st-aband-tx);
  --index-internal-bg: var(--n-panel); --index-internal-hover-bg: var(--n-pop-hover); --index-internal-border: var(--n-border); --index-internal-ring: var(--n-focus-ring);
  --index-confidential-bg: #14100f; --index-confidential-hover-bg: #1a1412; --index-confidential-border: #3a2622; --index-confidential-ring: rgba(244,123,133,.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --page-bg: var(--n-page); --paper-bg: var(--n-paper); --panel-bg: var(--n-panel);
    --paper-border: var(--n-border); --paper-shadow: var(--n-shadow); --rule: var(--n-rule);
    --ink: var(--n-ink); --muted: var(--n-muted); --faint: var(--n-faint); --prose-lead: var(--n-ink); --search-excerpt: var(--n-muted);
    --accent: var(--n-accent); --accent-hover: var(--n-accent-h); --selection: var(--n-sel);
    --pill-bg: var(--n-pill); --inline-code-bg: var(--n-code-inline);
    --control-bg: var(--n-ctrl); --control-placeholder: var(--n-ctrl-ph); --focus-border: var(--n-focus); --focus-ring: var(--n-focus-ring);
    --popover-bg: var(--n-pop); --popover-head-bg: var(--n-pop-head); --popover-hover-bg: var(--n-pop-hover); --popover-shadow: var(--n-pop-shadow);
    --visibility-bg: var(--n-vis-bg); --visibility-border: var(--n-vis-border); --visibility-text: var(--n-vis-text);
    --code-block-bg: var(--n-code-bg); --code-language: var(--n-code-lang); --blockquote-border: var(--n-quote-border); --blockquote-text: var(--n-quote-text);
    --tweet-bg: var(--n-code-bg); --tweet-border: var(--n-border); --tweet-avatar-border: var(--n-border); --tweet-avatar-bg: var(--n-pill); --tweet-rule: var(--n-border); --tweet-oembed-bg: var(--n-pop-head);
    --state-draft-bg: var(--n-pill); --state-draft-border: var(--n-border); --state-draft-text: var(--n-muted);
    --state-discussion-bg: var(--n-st-disc-bg); --state-discussion-border: var(--n-st-disc-bd); --state-discussion-text: var(--n-st-disc-tx);
    --state-published-bg: var(--n-st-pub-bg); --state-published-border: var(--n-st-pub-bd); --state-published-text: var(--n-st-pub-tx);
    --state-implemented-bg: var(--n-st-impl-bg); --state-implemented-border: var(--n-st-impl-bd); --state-implemented-text: var(--n-st-impl-tx);
    --state-abandoned-bg: var(--n-st-aband-bg); --state-abandoned-border: var(--n-st-aband-bd); --state-abandoned-text: var(--n-st-aband-tx);
    --index-internal-bg: var(--n-panel); --index-internal-hover-bg: var(--n-pop-hover); --index-internal-border: var(--n-border); --index-internal-ring: var(--n-focus-ring);
    --index-confidential-bg: #14100f; --index-confidential-hover-bg: #1a1412; --index-confidential-border: #3a2622; --index-confidential-ring: rgba(244,123,133,.18);
  }
}

/* inline code in the palette's peach (dark only; light keeps its default) */
:root[data-theme='dark'] .prose :not(pre) > code { color: #FBAD60; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .prose :not(pre) > code { color: #FBAD60; } }