/* ──────────────────────────────────────────────────────────
   AP Agent — shared design tokens
   Loaded by both /static/index.html and /static/admin.html.
   Changes here affect both pages — do not duplicate values
   in page-level <style> blocks; reference the variables.
   ────────────────────────────────────────────────────────── */

:root {
  /* Brand palette */
  --brand-primary:        #5854e0;
  --brand-primary-hover:  #4a46d4;
  --brand-primary-active: #3d39c2;
  --brand-primary-soft:   #eeedfb;
  --brand-primary-ring:   rgba(88, 84, 224, 0.18);
  --brand-primary-ink:    #2e2a96;

  --brand-secondary:      #5496e0;
  --brand-secondary-soft: #eaf2fc;
  --brand-secondary-ink:  #1a3c7a;

  --brand-accent:         #9e54e0;
  --brand-accent-soft:    #f4ebfc;
  --brand-accent-ink:     #5a2a8c;

  /* Semantic / status (kept; status colors carry meaning) */
  --success:      #34c759;
  --success-soft: #e8f8ee;
  --success-ink:  #1a5c2a;

  --warning:      #f5c400;
  --warning-soft: #fff3cd;
  --warning-ink:  #7a5600;

  --danger:       #ff3b30;
  --danger-soft:  #ffeef0;
  --danger-ink:   #7a0000;

  /* Neutrals (aligned to processor page) */
  --bg:            #f0f0f5;
  --surface:       #fff;
  --surface-muted: #fafafa;
  --border:        #e0e0e0;
  --border-soft:   #e8e8e8;
  --border-faint:  #f0f0f0;
  --ink:           #1d1d1f;
  --ink-muted:     #6e6e73;
  --ink-faint:     #8e8e93;
  --ink-dim:       #c7c7cc;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-pill: 20px;
}

/* ── Header (shared) ── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
header h1 { font-size: 18px; font-weight: 600; }
header .subtitle { font-size: 13px; color: var(--ink-muted); }
header .divider { color: var(--ink-dim); }
header a.admin-link {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
header a.admin-link:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-ink);
  border-color: var(--brand-primary-soft);
}

/* ── Card reveal animation (used by both pages) ── */
@keyframes stepReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}