/* ─── shared.css ───────────────────────────────────────────────────────────
   Design tokens and components shared across all Arbour frontend pages.
   Load this before any page-specific stylesheet.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Design tokens ─── */
:root {
  /* Backgrounds */
  --bg:        #0a0e0f;
  --surface:   #12181a;
  --surface-2: #161e20;
  --line:      #1f2b2c;

  /* Text */
  --text:   #e9eeec;
  --dim:    #7c8a86;
  --dimmer: #4d5a57;

  /* Accent */
  --teal:  #38bdf8;
  --amber: #d4a843;

  /* Badge / status colours */
  --verified:   #e8b339;
  --conditional: #ef5b5b;
  --flagged:    #c41e3a;
  --sensitive:  #c41e3a;

  /* Verdict palette */
  --verdict-pass:             #22c55e;
  --verdict-pass-bg:          rgba(34,197,94,0.08);
  --verdict-pass-border:      rgba(34,197,94,0.25);
  --verdict-conditional:      #f59e0b;
  --verdict-conditional-bg:   rgba(245,158,11,0.08);
  --verdict-conditional-border: rgba(245,158,11,0.25);
  --verdict-fail:             #ef4444;
  --verdict-fail-bg:          rgba(239,68,68,0.08);
  --verdict-fail-border:      rgba(239,68,68,0.25);

  /* Typography */
  --display: 'Fraunces', serif;
  --body:    'Space Grotesk', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--body); }
.hidden { display: none !important; }

/* ─── Logo ─── */
.logo {
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

/* ─── Buttons ─── */
.btn-primary {
  background: var(--teal);
  color: var(--bg);
  font-weight: 500;
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s;
  border: none;
}
.btn-primary:hover { background: #7cd4fb; }

.btn-secondary {
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: 3px;
  font-family: var(--mono);
  transition: border-color .2s, color .2s;
  background: transparent;
}
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

/* ─── Form elements ─── */
input, textarea, select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 4px;
  font-family: var(--body);
  font-size: 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--teal);
}
input::placeholder, textarea::placeholder { color: var(--dimmer); }

/* ─── Status pills / badges ─── */
.status-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
}
.status-pill.pass,   .badge.pass    { color: var(--verdict-pass);        background: var(--verdict-pass-bg); }
.status-pill.fail,   .badge.fail    { color: var(--verdict-fail);        background: var(--verdict-fail-bg); }
.status-pill.partial, .status-pill.error { color: var(--verdict-conditional); background: var(--verdict-conditional-bg); }
.status-pill.not_run, .status-pill.out_of_scope_refusal { color: var(--dim); background: rgba(124,138,134,0.1); }

.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.badge.verified    { color: var(--verified);    background: rgba(232,179,57,0.12); }
.badge.flagged     { color: var(--flagged);     background: rgba(196,30,58,0.12); }
.badge.unvalidated, .badge.untested, .badge.proposed { color: var(--dim); background: rgba(124,138,134,0.12); }
.badge.agreed, .badge.negotiating, .badge.testing    { color: var(--teal); background: rgba(56,189,248,0.12); }

/* ─── Mono utility ─── */
.mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
}

/* ─── Scroll reveal ─── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─── Pulse animation ─── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }