/* ═══════════════════════════════════════════════════════════════════════════
   FaceCheck Platform — Base Styles
   Reset, typography foundation, legacy layout utilities.
   tokens.css + components.css are injected by shell.js (shell pages)
   or loaded via <link> on standalone pages (landing, about).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Root defaults (overridden by tokens.css when loaded) ─────────────────── */
:root {
  /* Fallbacks only — tokens.css is the source of truth. Kept in sync so the
     cascade is identical whether tokens.css loads before or after this file. */
  --bg:            var(--color-bg,            #09090b);
  --surface:       var(--color-bg-surface,    #111113);
  --surface2:      var(--color-bg-overlay,    #222226);
  --border:        var(--color-border-default,#34343c);
  --border-subtle: var(--color-border-subtle, #26262b);
  --accent:        var(--color-brand,         #6366f1);
  --accent-strong: var(--color-brand-strong,  #5b57ee);
  --accent-dim:    var(--color-brand-subtle,  rgba(99,102,241,0.10));
  --success:       var(--color-success,       #22c55e);
  --success-text:  var(--color-success-text,  #4ade80);
  --warning-text:  var(--color-warning-text,  #fbbf24);
  --error:         var(--color-danger,        #ef4444);
  --error-text:    var(--color-danger-text,   #f87171);
  --text:          var(--color-text-primary,  #f4f4f5);
  --text-muted:    var(--color-text-secondary,#a1a1aa);
  --text-faint:    var(--color-text-tertiary, #858591);
  --radius:        var(--radius-lg,            8px);
  --shadow:        var(--shadow-md,            0 4px 12px rgba(0,0,0,.45));
  --font:          var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif);
  --mono:          var(--font-mono, 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace);
}

/* ── HTML / Body ──────────────────────────────────────────────────────────── */
html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base, 0.875rem);
  line-height: var(--leading-normal, 1.5);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display, var(--font));
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-tight, 1.2);
  color: var(--text);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { line-height: var(--leading-relaxed, 1.65); }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--mono);
  font-size: 0.85em;
}

/* ── Legacy header (upload/detect pages, pre-shell) ──────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.015em;
}
.logo-icon { font-size: 1.4rem; }
.logo-badge {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  background: var(--accent-dim);
  color: var(--color-brand-text);
  padding: .15rem .4rem;
  border-radius: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.header-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.online  { background: var(--success); box-shadow: 0 0 0 3px var(--color-success-subtle); }
.status-dot.offline { background: var(--error); }

/* ── Legacy nav ───────────────────────────────────────────────────────────── */
.nav { display: flex; gap: 1rem; }
.nav-link {
  font-size: .85rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: 5px;
  transition: color .15s;
}
.nav-link:hover, .nav-link.active { color: var(--text); }

/* ── Legacy layout ────────────────────────────────────────────────────────── */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
  letter-spacing: -.01em;
}

/* ── Drop zone (legacy upload pages) ─────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  user-select: none;
  color: var(--text-muted);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--color-brand-subtle);
}
.drop-zone:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.drop-zone p { font-size: .9rem; }
.drop-zone strong { color: var(--accent); }
.drop-hint { margin-top: .35rem; font-size: .75rem; color: var(--text-muted); }

/* ── Preview (legacy) ─────────────────────────────────────────────────────── */
.preview-container {
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.preview-container img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.preview-meta {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ── Buttons (shared) ─────────────────────────────────────────────────────────
   Dimensions mirror components.css `.btn` via the same tokens so the two
   button layers can't drift. Fallbacks keep this correct if tokens.css is
   somehow not loaded. Consolidating the two layers fully is a Phase 3 task. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 6px);
  height: var(--btn-height-md, 36px);
  padding: var(--btn-padding-md, 0 16px);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  font-family: var(--font);
  font-size: var(--text-base, .875rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .12s, background .12s, border-color .12s, box-shadow .12s, transform .08s;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.btn:focus-visible { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand-ring); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

.btn-primary  { background: var(--accent-strong); color: var(--color-text-inverse); }
.btn-primary:hover:not(:disabled) { background: var(--color-brand-hover); opacity: 1; }

.btn-secondary { background: var(--surface2, #222); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--border); }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--surface2, #222); color: var(--text); }

.btn-danger { background: rgba(239,68,68,.12); color: var(--error-text); border-color: rgba(239,68,68,.2); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.2); }

.btn-ok   { background: var(--color-success-subtle, rgba(34,197,94,.12)); color: var(--success-text); border-color: rgba(34,197,94,.2); }
.btn-warn { background: var(--color-warning-subtle, rgba(245,158,11,.12)); color: var(--warning-text); border-color: rgba(245,158,11,.2); }

.btn-sm { height: 30px; padding: 0 12px; font-size: .8125rem; }
.btn-xs { height: 24px; padding: 0 8px;  font-size: .6875rem; border-radius: 0; }
.btn-lg { height: 42px; padding: 0 20px; font-size: 1rem; border-radius: 0; }
.btn-xl { height: 50px; padding: 0 24px; font-size: 1rem; font-weight: 700; border-radius: 0; }

/* ── Table (legacy + shared base) ────────────────────────────────────────── */
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.table-wrapper { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
thead th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 .75rem;
  height: 36px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr { transition: background .1s; cursor: pointer; }
tbody tr:hover { background: rgba(255,255,255,.03); }
tbody td {
  padding: 0 .75rem;
  height: 44px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
.empty-row {
  text-align: center;
  padding: 3rem !important;
  color: var(--text-muted);
  font-size: .85rem;
}
.total-count {
  margin-top: .75rem;
  font-size: .75rem;
  color: var(--text-muted);
  text-align: right;
}

/* ── Response card ────────────────────────────────────────────────────────── */
.response-card pre {
  font-family: var(--mono);
  font-size: .78rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--success);
}

/* ── Form error ───────────────────────────────────────────────────────────── */
.form-error {
  color: var(--error-text);
  font-size: .82rem;
  padding: .4rem 0;
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: var(--mono); }
.required { color: var(--error-text); }
.hint { font-size: .8rem; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* ── Field wrapper ────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="email"],
.field input[type="date"],
.field input[type="number"],
.field input[type="search"],
.field select,
.field textarea,
.search-input,
.filter-select {
  padding: 0 .8rem;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: .875rem;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.field textarea {
  height: auto;
  padding: .5rem .8rem;
  resize: vertical;
  min-height: 72px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus,
.filter-select:focus {
  border-color: var(--color-border-focus);
  box-shadow: none;
}

.field input::placeholder,
.field textarea::placeholder,
.search-input::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

/* ── Badge base ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .2rem .5rem;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-active   { background: var(--color-success-subtle, rgba(34,197,94,.12)); color: var(--color-success-text, #4ade80); }
.badge-expired  { background: var(--color-danger-subtle, rgba(239,68,68,.12));  color: var(--error-text); }
.badge-frozen   { background: var(--color-frozen-subtle, rgba(96,165,250,.10)); color: var(--color-frozen, #60a5fa); }
.badge-inactive { background: var(--color-bg-overlay, rgba(161,161,170,.1));    color: var(--color-text-secondary, #71717a); }

/* ── Link ─────────────────────────────────────────────────────────────────── */
.link { color: var(--accent); cursor: pointer; text-decoration: underline; }