/* MicroDC design tokens — Industrial/Schematic dark */
:root {
  --bg: oklch(0.16 0.008 240);
  --bg-1: oklch(0.19 0.008 240);
  --bg-2: oklch(0.22 0.008 240);
  --line: oklch(0.32 0.008 240);
  --line-2: oklch(0.42 0.008 240);
  --fg: oklch(0.94 0.008 80);
  --fg-2: oklch(0.78 0.008 80);
  --fg-3: oklch(0.58 0.008 80);
  --accent: #3b6bff;
  --accent-2: #3b6bff;
  --ok: oklch(0.78 0.14 150);
  --warn: oklch(0.80 0.14 60);
  --err: oklch(0.70 0.18 25);
  --btn-fg: oklch(0.18 0.01 80);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
}

[data-theme="light"] {
  --bg: oklch(0.98 0.004 80);
  --bg-1: oklch(0.96 0.004 80);
  --bg-2: oklch(0.93 0.004 80);
  --line: oklch(0.84 0.004 80);
  --line-2: oklch(0.72 0.004 80);
  --fg: oklch(0.18 0.008 240);
  --fg-2: oklch(0.36 0.008 240);
  --fg-3: oklch(0.52 0.008 240);
  --ok: oklch(0.52 0.14 150);
  --warn: oklch(0.62 0.14 60);
  --err: oklch(0.55 0.18 25);
  --btn-fg: oklch(0.99 0.004 80);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.mono { font-family: var(--mono); font-feature-settings: "zero" 1, "ss02" 1; letter-spacing: -0.01em; }
.serif { font-family: var(--serif); }
.tick { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }

/* schematic helpers */
.grid-bg {
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--line) 40%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--line) 40%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}
.grid-bg-fine {
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--line) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--line) 30%, transparent) 1px, transparent 1px);
  background-size: 8px 8px;
}
.crosshair::before, .crosshair::after {
  content: ""; position: absolute; background: var(--accent);
}
.crosshair::before { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); }
.crosshair::after  { left: 50%; top: -6px;  bottom: -6px; width: 1px;  transform: translateX(-50%); }

.reg-mark { width: 12px; height: 12px; position: relative; flex: 0 0 auto; }
.reg-mark::before, .reg-mark::after { content: ""; position: absolute; background: var(--fg-3); }
.reg-mark::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.reg-mark::after  { left: 50%; top: 0; bottom: 0; width: 1px;  transform: translateX(-50%); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 12px 18px; border: 1px solid var(--line-2); color: var(--fg);
  background: transparent; cursor: pointer; text-decoration: none;
  transition: all .15s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
  background: var(--accent); color: var(--btn-fg); border-color: var(--accent);
}
.btn-primary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.hairline { border-top: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }

/* ticker animation */
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track { display: flex; gap: 48px; animation: ticker-scroll 60s linear infinite; }

/* blink */
@keyframes blink { 0%, 60% { opacity: 1; } 70%, 100% { opacity: 0.2; } }
.blink { animation: blink 1.4s steps(2, end) infinite; }