/* Shared theme layer: Retro Typewriter is Moiety's one and only theme
   (Light/Dark archived 2026-08-09 -- see
   docs/superpowers/specs/2026-08-09-retro-mode-everywhere-design.md).
   Every in-scope page hardcodes <html data-theme="retro"> and links this
   file; there is no toggle and no JS involved in applying it.

   Paths below are relative to this file's own URL, not the page's, so they
   resolve correctly even when this file is fetched through the Netlify
   proxy at /moiety/static/css/theme.css (the proxy only rewrites absolute
   /static paths inside text/html responses, never inside a .css file's own
   body — see project_moiety_proxy_path_gotcha).

   The top-level rule below deliberately uses `html[data-theme="retro"]`,
   not the bare attribute selector `[data-theme="retro"]`: a page's own
   inline <style> (loaded after this <link>) still defines its own :root{}
   for non-color properties (--radius, etc.), and a bare `:root`/attribute
   selector has the exact same specificity (0,1,0) as `[data-theme="retro"]`
   -- a tie that source order would resolve in the *page's* favor, silently
   overriding these values back to the old light palette. `html[...]` adds
   a type selector, bumping specificity to (0,1,1), which wins regardless
   of load order. This was a real, confirmed bug (compare.html's pricing
   table and login's card both stayed on the old light colors) before this
   fix. */
@font-face {
  font-family: "Special Elite";
  src: url("../fonts/special-elite-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cutive Mono";
  src: url("../fonts/cutive-mono.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

html[data-theme="retro"] {
  --bg: #F1E8D3;
  --surface: #F7F0DE;
  --primary: #2E2A22;
  --accent: #8B3A25;
  --accent-light: rgba(139,58,37,0.14);
  --muted: #6E6656;
  --border: #DCD1B0;
  --card: #F7F0DE;
  --withdraw: #8B3A25;
  --deposit: #5C6A34;
  --withdraw-bg: rgba(139,58,37,0.10);
  --deposit-bg: rgba(92,106,52,0.12);
  --withdraw-vivid: #A6432A;
  --deposit-vivid: #6E7D3E;
  --font-ui: "Cutive Mono", ui-monospace, monospace;
  --font-mono: "Cutive Mono", ui-monospace, monospace;
}
html[data-theme="retro"] body {
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(60,42,22,0.06) 29px 30px);
}
html[data-theme="retro"] h1, html[data-theme="retro"] h2, html[data-theme="retro"] h3,
html[data-theme="retro"] .wt-title {
  font-family: "Special Elite", var(--font-ui);
}
html[data-theme="retro"] header, html[data-theme="retro"] nav {
  background: rgba(241,232,211,0.85);
}
html[data-theme="retro"] ::selection {
  background: rgba(139,58,37,0.25);
}

/* Color emoji glyphs (glossy multi-color, OS-rendered) read as jarringly
   modern against the sepia/typewriter palette -- no CSS `color` can touch
   them, so this desaturates + warms them via filter instead. Tuned against
   real emoji at real sizes (see docs/superpowers/specs/2026-08-09-retro-mode-everywhere-design.md):
   full grayscale alone looked cold/mismatched against the warm cream
   background; this keeps a faint sepia cast so icons read as "aged
   illustration" rather than "grayscale photo." Scoped to known icon/emoji
   wrapper classes (not applied blindly to text) so accent-colored text
   elsewhere is never affected. */
html[data-theme="retro"] .page-icon,
html[data-theme="retro"] .detail-icon,
html[data-theme="retro"] .scan-icon,
html[data-theme="retro"] .icon,
html[data-theme="retro"] .search-icon,
html[data-theme="retro"] .dropdown-icon,
html[data-theme="retro"] .f-icon,
html[data-theme="retro"] .compare-section-icon,
html[data-theme="retro"] .login-icon,
html[data-theme="retro"] .feed-icon,
html[data-theme="retro"] .cat-icon,
html[data-theme="retro"] .cat-emoji-row,
html[data-theme="retro"] .celebrate-emoji,
html[data-theme="retro"] .wt-emoji,
html[data-theme="retro"] .emoji,
html[data-theme="retro"] .chip-emoji,
html[data-theme="retro"] .cat-emoji-chip,
html[data-theme="retro"] .emoji-pick-btn,
html[data-theme="retro"] .home-recent-emoji,
html[data-theme="retro"] .goal-emoji-picker,
html[data-theme="retro"] .goal-emoji,
html[data-theme="retro"] .rank-emoji,
html[data-theme="retro"] .nav-brand span,
html[data-theme="retro"] .footer-brand,
html[data-theme="retro"] .alert-bell,
html[data-theme="retro"] .scan-compact-opt,
html[data-theme="retro"] .sheet-reactions,
html[data-theme="retro"] #new-cat-emoji-btn {
  filter: grayscale(0.85) sepia(0.3) brightness(0.92) contrast(1.05);
}
