/* ZER◎ public site: two designs on one set of tokens.
   "black" (default): the minimal splash. "gold": the obsidian-and-gold ledger look of the dashboard.
   The choice is stored per visitor in localStorage("zero-theme") and applied by theme.js before first paint. */
:root {
  color-scheme: dark;
  --bg: #07080a; --bg-2: #0c0e11; --panel: #101317; --panel-2: #141820; --line: #1c2128; --line-2: #273039;
  --fg: #e8e6df; --fg-2: #b9b6ad; --dim: #8a8f98; --faint: #5c626b;
  --accent: #14f195; --accent-2: #0fbf76; --accent-ink: #05140d; --accent-rgb: 20, 241, 149;
  --red: #ff5c5c; --red-rgb: 255, 92, 92; --amber: #f2b94b; --amber-rgb: 242, 185, 75; --blue: #6aa9ff;
  --up: #14f195; --down: #ff5c5c;
  --bg-rgb: 7, 8, 10;
  --f-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: var(--f-ui);
  --f-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --radius: 10px; --radius-sm: 6px;
  --mark-weight: 800; --mark-tracking: .08em;
}
:root[data-theme="gold"] {
  --bg: #070605; --bg-2: #0b0908; --panel: #0e0c09; --panel-2: #14110d; --line: rgba(226, 186, 98, .16); --line-2: rgba(226, 186, 98, .34);
  --fg: #f5eedd; --fg-2: #d0c5ac; --dim: #978b73; --faint: #675e4c;
  --accent: #ecc66b; --accent-2: #d3a142; --accent-ink: #17100a; --accent-rgb: 236, 198, 107;
  --red: #e2635f; --red-rgb: 226, 99, 95; --amber: #e3a95a; --amber-rgb: 227, 169, 90; --blue: #b1a0d6;
  --up: #8fd6a8; --down: #e2635f;
  --bg-rgb: 7, 6, 5;
  --f-display: "Noe Display", Boska, "Bodoni MT", Didot, "Times New Roman", serif;
  --f-ui: "Söhne", Switzer, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Berkeley Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
  --radius: 4px; --radius-sm: 3px;
  --mark-weight: 700; --mark-tracking: .22em;
}
:root[data-theme="gold"] body {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(214, 164, 64, .11), transparent 62%),
    radial-gradient(900px 520px at 96% 2%, rgba(214, 164, 64, .06), transparent 60%),
    radial-gradient(1200px 800px at 50% 112%, rgba(110, 72, 18, .11), transparent 60%),
    var(--bg);
}
:root[data-theme="gold"] body::before { /* film grain keeps the blacks rich instead of flat */
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the wordmark: ZER + a drawn bullseye standing in for the O */
.mark { font-family: var(--f-display); font-weight: var(--mark-weight); letter-spacing: var(--mark-tracking); display: inline-flex; align-items: center; gap: .04em; color: var(--fg); }
:root[data-theme="gold"] .mark { color: var(--accent); }
.mark .o { position: relative; display: inline-block; width: .78em; height: .78em; border-radius: 50%; border: .085em solid currentColor; box-sizing: border-box; margin: 0 .04em; }
.mark .o::after { content: ""; position: absolute; inset: .11em; border-radius: 50%; background: var(--accent); }
:root[data-theme="gold"] .mark .o::after { background: var(--accent); box-shadow: 0 0 14px rgba(236, 198, 107, .45); }

/* the design switch */
.theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); }
.theme-switch button { font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: transparent; border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }