@import url("fonts.css");

/* ZaeNET design system v2 — black, cyan, yellow, red.
   Cyan = action / live / OK.  Yellow = money / highlight / warning.  Red = failed / danger / alarm.
   Rule: components use role tokens only; raw hex lives in this block. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #030405;
  --bg-band: #07090B;
  --surface: #0B0E11;
  --surface-2: #12161A;
  --surface-sunken: #050708;
  --line: #182026;
  --line-strong: #243039;
  --ink: #F1F7F8;
  --ink-2: #A7B5BB;
  --ink-3: #74848B;
  --brand: #21E6F5;          /* cyan */
  --brand-deep: #0A3A40;
  --signal: #21E6F5;         /* primary actions, focus, active nav */
  --on-signal: #001215;
  --signal-soft: rgba(33, 230, 245, .12);
  --gold: #FFD23F;           /* money and highlights */
  --gold-soft: rgba(255, 210, 63, .12);
  --alarm: #FF3B4E;          /* brand red */
  --ok: #21E6F5;   --ok-soft: rgba(33, 230, 245, .12);
  --warn: #FFD23F; --warn-soft: rgba(255, 210, 63, .13);
  --bad: #FF4D5E;  --bad-soft: rgba(255, 59, 78, .14);
  --chart-1: #21E6F5; --chart-2: #FF3B4E; --chart-3: #FFD23F; --chart-grid: #141B20; --chart-axis: #74848B;
  --glow: 0 0 0 1px rgba(33, 230, 245, .35), 0 8px 30px -8px rgba(33, 230, 245, .45);
  --shadow-1: 0 1px 0 rgba(255,255,255,.035) inset, 0 10px 30px -14px rgba(0,0,0,.9);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -40px rgba(0,0,0,1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F7F8;
  --bg-band: #EDF1F3;
  --surface: #FFFFFF;
  --surface-2: #F1F4F6;
  --surface-sunken: #E9EEF1;
  --line: #DFE6EA;
  --line-strong: #C9D3D9;
  --ink: #05080A;
  --ink-2: #33434B;
  --ink-3: #56666E;
  --brand: #007C8A;
  --brand-deep: #00525C;
  --signal: #00707D;
  --on-signal: #FFFFFF;
  --signal-soft: rgba(0, 112, 125, .10);
  --gold: #8F6400;
  --gold-soft: rgba(204, 150, 0, .12);
  --alarm: #D10F28;
  --ok: #00707D;   --ok-soft: rgba(0, 112, 125, .10);
  --warn: #8F6400; --warn-soft: rgba(204, 150, 0, .12);
  --bad: #C8102E;  --bad-soft: rgba(200, 16, 46, .09);
  --chart-1: #0097A7; --chart-2: #E0243B; --chart-3: #C99700; --chart-grid: #E6ECEF; --chart-axis: #56666E;
  --glow: 0 0 0 1px rgba(0, 112, 125, .35), 0 8px 24px -10px rgba(0, 112, 125, .35);
  --shadow-1: 0 1px 2px rgba(5,8,10,.06), 0 8px 24px -16px rgba(5,8,10,.25);
  --shadow-2: 0 30px 60px -32px rgba(5,8,10,.35);
}

:root {
  --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* radius follows hierarchy: controls < panels < showcase */
  --r-control: 8px;
  --r-panel: 14px;
  --r-show: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display; the attribute must still win */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--on-signal); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--signal); color: var(--on-signal); padding: 8px 14px; border-radius: var(--r-control); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- logo lockup ---------- */
.zlogo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.zlogo svg { width: 34px; height: 34px; flex: none; }
.zlogo b { font: 700 21px/1 var(--font-display); letter-spacing: -0.03em; }
.zlogo b span { font-weight: 500; color: var(--signal); letter-spacing: 0.02em; }

/* ---------- buttons ---------- */
.btn {
  --_bg: var(--surface-2); --_fg: var(--ink); --_bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--_bd); border-radius: var(--r-control);
  background: var(--_bg); color: var(--_fg);
  font: 600 15px/1 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --_bd: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn--primary { --_bg: var(--signal); --_fg: var(--on-signal); --_bd: var(--signal); }
.btn--primary { box-shadow: 0 0 0 0 transparent; }
.btn--primary:hover { --_bg: color-mix(in srgb, var(--signal) 86%, #fff); --_bd: var(--_bg); box-shadow: var(--glow); }
:root[data-theme="light"] .btn--primary:hover { --_bg: var(--brand-deep); }
.btn--ghost { --_bg: transparent; --_bd: transparent; }
.btn--ghost:hover { --_bg: var(--surface-2); --_bd: var(--line); }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- form fields ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field > .label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.input {
  width: 100%; min-height: 46px; padding: 0 14px;
  background: var(--surface-sunken); border: 1px solid var(--line-strong); border-radius: var(--r-control);
  color: var(--ink); font-size: 16px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--brand); }
.input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.hint { font-size: 13.5px; color: var(--ink-3); }
.error-text { font-size: 13.5px; color: var(--bad); }
select.input { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---------- status ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 3px 9px 3px 8px; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--ok { color: var(--ok); background: var(--ok-soft); }
.status--warn { color: var(--warn); background: var(--warn-soft); }
.status--bad { color: var(--bad); background: var(--bad-soft); }
.status--idle { color: var(--ink-3); background: var(--surface-2); }

.notice { padding: 12px 14px; border-radius: var(--r-control); font-size: 14.5px; border: 1px solid transparent; }
.notice--bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.notice--ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}