/* ── Shared design system ─────────────────────────────────────────────────────
   Tokens, reset, and components used by every page.
   Page-specific styles live in index.css / admin.css, loaded after this file. */

:root {
  /* Colors */
  --bg:           #0b0f14;
  --surface:      #131820;
  --border:       #2a3d50;
  --grid:         #1f2a36;   /* background grid lines — dimmer than --border */
  --accent:       #00e5c8;
  --accent2:      #005f54;
  --accent-hover: #00ffd9;
  --text:         #d4e8e4;
  --muted:        #7a9aaa;
  --ghost:        #a8c4cc;   /* ghost-button label text */
  --danger:       #ff4d6d;
  --warn:         #f5a623;

  /* Typography */
  --mono: 'JetBrains Mono', monospace;
}

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

/* ── Page base ── */
body {
  background: var(--bg); color: var(--text); font-family: var(--mono);
  min-height: 100vh; padding: 2rem; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.35; pointer-events: none; z-index: 0;
}

footer {
  position: relative; z-index: 1; font-family: var(--mono);
  font-size: 0.65rem; color: var(--muted); text-align: center;
}

/* ── Buttons ──
   .btn-ghost   — bordered, transparent; pages set size via their own class
   .btn-primary — solid accent; pages set size via their own class */
.btn-ghost {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--ghost); font-family: var(--mono); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.btn-ghost:hover    { border-color: var(--accent); color: var(--accent); }
.btn-ghost:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-primary {
  background: var(--accent); border: none; border-radius: 3px;
  color: #000; font-family: var(--mono); font-weight: 700; cursor: pointer;
  transition: background 0.15s, transform 0.1s; white-space: nowrap;
}
.btn-primary:hover    { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; background: var(--accent); }