/* Design tokens lifted from the seeded Luxedo house styleguide
   (plans/core/frontend/styleguide/styleguide.html). Fonts and logos are this
   tactical's own copy, carried into src/static/. */

@font-face {
  font-family: "Archivo Black Local";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Local";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/inter.woff2") format("woff2");
}

:root {
  --bg-stage: #0a0a0a;
  --fg-signal: #f5f5f5;
  --gold-stadium: #f5a623;
  --gold-deep: #c97a0e;
  --gold-light: #ffd27a;
  --gray-3: #666;
  --gray-4: #999;
  --panel: #121016;
  --panel-2: #17141c;
  --hairline: #2a2730;
  --ink-mute: #9a94a6;
  --danger: #ff6b6b;
  --font-display: "Archivo Black Local", Impact, Anton, sans-serif;
  --font-body: "Inter Local", ui-sans-serif, system-ui, sans-serif;
  --gold-grad: linear-gradient(120deg, var(--gold-light) 0%, var(--gold-stadium) 45%, var(--gold-deep) 100%);
  --maxw: 900px;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-stage);
  color: var(--fg-signal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

::selection { background: rgba(245, 166, 35, 0.28); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

header.topbar {
  border-bottom: 1px solid var(--hairline);
  background: var(--deep-black, #050505);
}
header.topbar .bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.topbar .logo { height: 26px; display: block; }
header.topbar nav { display: flex; align-items: center; gap: 16px; }
header.topbar .who { color: var(--ink-mute); font-size: 14px; }

main { padding: 48px 0 96px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.3px; }
h1 { font-size: 34px; margin: 0 0 8px; }
h1 .grad {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede { color: var(--ink-mute); margin: 0 0 28px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px;
}

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: #1a1200;
  background: var(--gold-grad);
}
.btn:hover { filter: brightness(1.05); }
.btn.secondary { background: transparent; color: var(--fg-signal); border-color: var(--hairline); }
.btn.secondary:hover { border-color: var(--gold-stadium); }

table.leads { width: 100%; border-collapse: collapse; }
table.leads th, table.leads td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--hairline); }
table.leads th { color: var(--gray-4); font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }
table.leads td { color: var(--fg-signal); }
table.leads tr:last-child td { border-bottom: none; }
.muted { color: var(--gray-3); }

.empty { color: var(--ink-mute); padding: 28px 0; text-align: center; }

form.lead-form { display: grid; gap: 16px; max-width: 480px; }
form.lead-form label { display: block; font-size: 13px; color: var(--gray-4); margin-bottom: 6px; letter-spacing: 0.4px; }
form.lead-form input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--fg-signal);
  font-family: var(--font-body);
  font-size: 15px;
}
form.lead-form input:focus { outline: none; border-color: var(--gold-stadium); }
.form-actions { display: flex; gap: 12px; margin-top: 8px; }

.error {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid var(--danger);
  color: #ffd0d0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.login-card { max-width: 420px; margin: 8vh auto 0; text-align: center; }
.login-card .mark { height: 48px; margin-bottom: 24px; }
.login-card p { color: var(--ink-mute); }