@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #000000;
  --fg:     #ffffff;
  --sep:    #1c1c1c;
  --muted:  #777777;
  --card:   #0a0a0a;
  --img-bg: #161616;
  --grid:   8px;
}

[data-theme="light"] {
  --bg:     #ffffff;
  --fg:     #000000;
  --sep:    #e2e2e2;
  --muted:  #767676;
  --card:   #fafafa;
  --img-bg: #f0f0f0;
}

html { scroll-behavior: smooth; color-scheme: dark light; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.25s, color 0.25s;
  overflow-x: hidden;
}

.mono { font-family: 'Space Mono', monospace; }
.lbl {
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600; color: var(--muted);
}

/* Focus indicators — respects monochrome system */
:focus-visible {
  outline: 1.5px solid var(--fg);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--sep); }

/* Nav logo — theme-aware */
.nav-logo-dark  { display: block; }
.nav-logo-light { display: none; }
[data-theme="light"] .nav-logo-dark  { display: none; }
[data-theme="light"] .nav-logo-light { display: block; }

/* Hero frame — theme-aware image switching */
.hero-img-dark  { display: block; }
.hero-img-light { display: none; }
[data-theme="light"] .hero-img-dark  { display: none; }
[data-theme="light"] .hero-img-light { display: block; }

/* QR watermark: white wrapper in dark mode (no filter), black wrapper in light mode (invert to white) */
:root          { --qr-filter: none; }
[data-theme="light"] { --qr-filter: invert(1); }

/* ─── Responsive ───────────────────────────────── */
.r-nav-hamburger { display: none; }

@media (max-width: 1023px) {
  .r-px           { padding-left: 24px !important; padding-right: 24px !important; }
  .r-grid-3       { grid-template-columns: repeat(2, 1fr) !important; }
  .r-footer-grid  { grid-template-columns: 1fr 1fr !important; }
  .r-footer-brand { grid-column: 1 / -1 !important; }
}

@media (max-width: 639px) {
  .r-logo-suffix  { display: none !important; }
  .r-px           { padding-left: 16px !important; padding-right: 16px !important; }
  .r-col-1        { grid-template-columns: 1fr !important; }
  .r-grid-3       { grid-template-columns: 1fr !important; }
  .r-footer-grid  { grid-template-columns: 1fr !important; }
  .r-footer-brand { grid-column: auto !important; }
  .r-footer-bar   { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .r-hero-frame   { order: -1; max-width: 100% !important; }
  .r-mh-auto      { min-height: auto !important; }
  .r-py-sm        { padding-top: 48px !important; padding-bottom: 48px !important; }
  .r-gap-sm       { gap: 32px !important; }
  .r-cta-stack    { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .r-nav-links    { display: none !important; }
  .r-nav-hamburger { display: flex !important; align-items: center; }
}