/* Spoted Crypto layer — loaded after tokens.css, main.css and snapholo.css.
   Values come from the approved Figma mockup (Spotedcrypto — News theme mockup, 2026-11-04): Newsreader headlines, Roboto text, bitcoin orange accent. */
:root {
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --body-font-family: var(--font-sans);
  --heading-font-family: var(--font-display);
  --heading-font-weight: 600;
  --heading-letter-spacing: -0.01em;
  --color-text: #0f172a;
  --color-text-secondary: #5b6577;
  --color-text-muted: #5b6577;
  --color-border: #e3e7ee;
  --color-border-strong: #cbd2dc;
  --color-surface: #ffffff;
  --color-surface-sunken: #f6f7f9;
  --color-bg: #ffffff;
  --color-brand-action-fill: #f7931a;
  --color-brand-action-on: #111111;
  --color-brand-link-text: #9a5300;
  --color-accent: #9a5300;
  --color-accent-soft: #fff2df;
  --color-accent-fill: #f7931a;
  --color-accent-line: #f7931a;
  --mint: #f7931a;
  --site-gutter: 16px;
  --site-content-width: 1200px;
  --container-width: 1200px;
}
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); }
/* tokens.css sets `:lang(en) { --font-sans: …; font-family: var(--font-sans) }` on every element, so these must be :lang(en)-scoped to win. */
:lang(en) { --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
:lang(en) :is(h1, h2, h3, h4), :lang(en).sc-wordmark, :lang(en) .sc-wordmark { font-family: var(--font-display); }

/* Top bar */
.s-skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 8px 12px; background: var(--color-text); color: #fff; border-radius: 6px; }
.s-skip:focus { top: 8px; }
.sc-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.sc-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--site-content-width); margin: 0 auto; padding: 14px var(--site-gutter); min-height: 64px; box-sizing: content-box; }
.sc-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.sc-logo img { height: 28px; width: auto; }
.sc-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--color-brand-action-fill); flex: none; }
.sc-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.01em; }
.sc-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.sc-nav-link, .sc-search { color: var(--color-text); text-decoration: none; }
.sc-search { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.sc-nav-link:hover, .sc-search:hover { color: var(--color-brand-link-text); }
.sc-subscribe { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 6px; background: var(--color-brand-action-fill); color: var(--color-brand-action-on); font-weight: 600; font-size: 14px; text-decoration: none; }
.sc-subscribe:hover { opacity: .9; }
@media (max-width: 760px) {
  .sc-nav-link, .sc-search span { display: none; }
  .sc-nav { gap: 16px; }
  .sc-wordmark { font-size: 20px; }
}
/* Category tabs: active underline in accent */
.s-news-tabs a[aria-current="page"]::after { background: var(--color-brand-action-fill); }

/* Chips, links, buttons */
.s-card .s-tags .s-tag { background: var(--color-accent-soft); color: var(--color-accent); }
.s-entry-content a { color: var(--color-brand-link-text); }
.s-btn { background: var(--color-brand-action-fill); color: var(--color-brand-action-on); }

/* Footer */
.sc-footer { margin-top: 56px; border-top: 1px solid var(--color-border); background: var(--color-surface-sunken); color: var(--color-text-secondary); font-size: 13px; }
.sc-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; max-width: var(--site-content-width); margin: 0 auto; padding: 28px var(--site-gutter); }
.sc-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sc-footer a { color: inherit; text-decoration: none; }
.sc-footer a:hover { color: var(--color-text); }