/* zcore — base: reset, variables, body, scrollbar, typography utils */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bg: #0a0a0b;
  --bg-card: #111113;
  --bg-card-hover: #18181b;
  --bg-input: #1a1a1e;
  --bg-modal: #111113;
  --border: #27272a;
  --border-focus: rgba(255, 114, 0, 0.45);
  --text: #e4e4e7;
  --text-muted: #71717a;
  --text-dim: #52525b;
  --accent: #ff7200;
  --accent-bright: #ff9233;
  --danger: #dc2626;
  --danger-muted: #7f1d1d;
  --success: #22c55e;
  --success-muted: #14532d;
  --warning: #eab308;
  --warning-muted: #713f12;
  --bg-elevated: #16161a;
  --accent-dim: rgba(255, 114, 0, 0.1);
  --brand-orange: #ff7200;
  --brand-grey: #545454;
  --radius: 6px;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-body: "IBM Plex Sans", "DM Sans", sans-serif;
  --header-height: 90px;
  --footer-height: 40px;
}
html {
  font-size: 13px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-focus);
}

/* ===== focus ring (accessibility) ===== */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ===== typography utilities ===== */
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.text-right {
  text-align: right;
}
.text-danger {
  color: var(--danger);
}
.text-success {
  color: var(--success);
}
.text-warning {
  color: var(--warning);
}
.text-muted {
  color: var(--text-muted);
}
.text-dim {
  color: var(--text-dim);
}
.text-accent {
  color: var(--accent);
}
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}