/* MarginDeck site: shared tokens, type, header, footer and buttons.
   Dark is the default (it matches the app's Lime theme); light follows the system setting.
   Page-specific rules live in home.css, guides.css, release-notes.css and the legal pages. */
@font-face { font-family:"Geist"; src:url("/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root {
  color-scheme: dark light;
  --bg:#0c0d10; --surface:#111216; --surface-2:#16181d; --line:#24262c; --line-soft:#1c1e23;
  --text:#ecedef; --sub:#a3a7b0; --muted:#8b8f98; --faint:#6f737c;
  --accent:#c5f24a; --accent-ink:#0c0d10; --accent-text:#c5f24a; --negative:#ff9f7a;
  --header-bg:rgba(12,13,16,.86); --shadow:none;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,"PingFang SC",monospace;
  --wrap:1200px; --gutter:40px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f6f6f3; --surface:#ffffff; --surface-2:#efefea; --line:#dcdcd5; --line-soft:#e7e7e1;
    --text:#111215; --sub:#464951; --muted:#5b5f68; --faint:#80838b;
    --accent:#c5f24a; --accent-ink:#111215; --accent-text:#4a6500; --negative:#b0431f;
    --header-bg:rgba(246,246,243,.88);
  }
}

* { box-sizing:border-box; }
html { scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
:lang(zh) body, body:lang(zh) { line-height:1.75; }
a { color:var(--text); text-underline-offset:4px; text-decoration-thickness:1px; }
a:hover { color:var(--accent-text); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
img { max-width:100%; }
.skip { position:fixed; top:-100px; left:20px; z-index:60; padding:10px 14px; border-radius:10px; background:var(--surface); color:var(--text); }
.skip:focus { top:12px; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.mono, .eyebrow { font-family:var(--mono); }
.eyebrow { margin:0 0 20px; color:var(--muted); font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.eyebrow.accent { color:var(--accent-text); }
.tail { color:var(--faint); }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border:0; border-radius:999px; background:var(--accent); color:var(--accent-ink); font:600 16px/1 var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer; }
.button:hover { color:var(--accent-ink); filter:brightness(1.06); }
.button svg { flex-shrink:0; }
.button.small { min-height:38px; padding:0 16px; font-size:14px; font-weight:500; background:var(--text); color:var(--bg); }
.button.small:hover { color:var(--bg); }
.button.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.button.ghost:hover { border-color:var(--sub); color:var(--text); }

/* Header */
.site-header { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line-soft); background:var(--header-bg); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); }
.site-header .header-inner { display:flex; align-items:center; gap:28px; max-width:var(--wrap); min-height:64px; margin:0 auto; padding:0 var(--gutter); }
.site-header .brand { display:flex; align-items:center; gap:10px; color:var(--text); font-size:16px; font-weight:600; text-decoration:none; }
.site-header .brand svg { display:block; }
.site-header .nav-links { display:flex; align-items:center; gap:26px; margin-left:auto; }
.site-header .nav-links > a:not(.button):not(.language-switcher), .site-header .mobile-links > a { color:var(--sub); font-size:14px; text-decoration:none; white-space:nowrap; }
.site-header .nav-links > a:not(.button):not(.language-switcher):hover, .site-header .mobile-links > a:hover { color:var(--text); }
.site-header a[aria-current] { color:var(--text) !important; }
.site-header .language-switcher { color:var(--sub); font-size:14px; text-decoration:none; white-space:nowrap; }
.site-header .language-switcher:hover { color:var(--text); }
.site-header .mobile-links { display:none; }

/* Footer */
.site-footer { border-top:1px solid var(--line-soft); margin-top:24px; }
.site-footer .footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 32px; max-width:var(--wrap); margin:0 auto; padding:36px var(--gutter) 56px; color:var(--muted); font-size:14px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:10px 22px; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--text); }

/* Shared blocks */
.rule-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rule-list > li { border-bottom:1px solid var(--line); }
.rule-list a { display:flex; justify-content:space-between; gap:24px; padding:18px 0; text-decoration:none; }
.rule-list a::after { content:"→"; color:var(--faint); }
.rule-list a:hover::after { color:var(--accent-text); }
.faq > div { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary { cursor:pointer; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--faint); font-family:var(--mono); }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin:12px 0 0; color:var(--sub); }

@media (max-width:860px) {
  :root { --gutter:20px; }
  .site-header .header-inner { min-height:58px; gap:16px; }
  .site-header .nav-links { gap:16px; }
  .site-header .nav-links > a:not(.button):not(.language-switcher) { display:none; }
  .site-header .mobile-links { display:flex; gap:18px; overflow-x:auto; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter) 12px; }
  .site-header .mobile-links > a { font-size:13px; }
  .site-footer .footer-inner { flex-direction:column; }
}