/* Shared stylesheet for zozohq.com — design tokens, fonts, and the small set
   of component rules reused byte-for-byte across all six pages (wordmark,
   button base, footer links, and the .ph placeholder treatment). Nav and
   footer markup/layout stay page-local by design — see CLAUDE.md issue #1185. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --zz-bg-base: #0b0d11;
  --zz-bg-surface: #12151d;
  --zz-bg-surface-2: #161b24;
  --zz-bg-elevated: #1c222d;
  --zz-bg-inset: #08090c;
  --zz-bg-hover: #1a202b;
  --zz-border-subtle: #1c222d;
  --zz-border: #272e3a;
  --zz-border-strong: #39424f;
  --zz-text-primary: #e9ecf1;
  --zz-text-secondary: #a8afbd;
  --zz-text-tertiary: #6c7686;
  --zz-text-inverse: #0b0d11;
  --zz-accent: #3b82f6;
  --zz-accent-hover: #5c97ff;
  --zz-accent-soft: rgba(59, 130, 246, 0.14);
  --zz-accent-border: rgba(59, 130, 246, 0.38);
  --zz-accent-text: #8fbaff;
  --zz-focus-ring: rgba(59, 130, 246, 0.5);
  --zz-placeholder: #f5a524;
  --zz-placeholder-bg: rgba(245, 165, 36, 0.12);
  --zz-success: #34d399;
  --zz-success-soft: rgba(52, 211, 153, 0.14);
  --zz-success-text: #7ee7c0;
  --zz-warn: #f5a524;
  --zz-warn-soft: rgba(245, 165, 36, 0.14);
  --zz-warn-text: #f7c565;
  --zz-warn-border: rgba(245, 165, 36, 0.38);
  --zz-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --zz-font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--zz-bg-base);
  color: var(--zz-text-secondary);
  font-family: var(--zz-font-sans);
  font-size: 15px;
}
p { margin: 0 0 12px; }
a { color: var(--zz-accent); }
.mono { font-family: var(--zz-font-mono); }

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--zz-font-mono);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--zz-text-primary);
  text-decoration: none;
}
.wordmark .dot {
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--zz-accent);
  margin-left: 0.14em;
  box-shadow: 0 0 10px var(--zz-accent-border);
}

.btn {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 5px;
}
.btn:hover { background: #1a202b; border-color: var(--zz-accent-border); }
.btn-primary { background: var(--zz-accent); color: var(--zz-text-inverse); }
.btn-primary:hover { background: var(--zz-accent-hover); }

footer.site a { color: var(--zz-text-tertiary); }

.ph {
  color: var(--zz-placeholder);
  background: var(--zz-placeholder-bg);
  border: 1px dashed rgba(245, 165, 36, 0.5);
  border-radius: 4px;
  padding: 0 5px;
  font-family: var(--zz-font-mono);
  font-size: 0.92em;
  white-space: nowrap;
}