/* Trustco IT Asset Auctions — design tokens
   Primary: #2596be (Trustco blue) — everything else derived to sit quietly around it. */

:root {
  --tc-primary: #2596be;
  --tc-primary-dark: #1c7397;
  --tc-primary-darker: #14586f;
  --tc-primary-light: #e7f4f9;
  --tc-primary-tint: #cfe9f2;

  --tc-ink: #10222b;
  --tc-slate: #55707c;
  --tc-slate-light: #8aa0a9;

  --tc-amber: #e2a63a;   /* closing-soon urgency */
  --tc-amber-light: #fbf1de;
  --tc-green: #2f9e6e;   /* sold / winning */
  --tc-green-light: #e7f6ef;
  --tc-red: #d64545;     /* outbid / withdrawn */

  --tc-surface: #f5f8f9;
  --tc-card: #ffffff;
  --tc-border: #dfe8ec;

  --tc-radius: 10px;
  --tc-font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --tc-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --tc-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--tc-font-body);
  background: var(--tc-surface);
  color: var(--tc-ink);
}

h1, h2, h3, h4, .tc-display {
  font-family: var(--tc-font-display);
  letter-spacing: -0.01em;
}

.tc-mono { font-family: var(--tc-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .875rem;
  padding: .625rem 1.15rem;
  border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.tc-btn:active { transform: translateY(1px); }
.tc-btn-primary { background: var(--tc-primary); color: #fff; }
.tc-btn-primary:hover { background: var(--tc-primary-dark); }
.tc-btn-primary:disabled { background: #a9c7d3; cursor: not-allowed; }
.tc-btn-outline { background: #fff; color: var(--tc-primary); border: 1px solid var(--tc-primary); }
.tc-btn-outline:hover { background: var(--tc-primary-light); }
.tc-btn-ghost { background: transparent; color: var(--tc-slate); }
.tc-btn-ghost:hover { background: #eef3f4; color: var(--tc-ink); }
.tc-btn-danger { background: #fff; color: var(--tc-red); border: 1px solid #f0c6c6; }
.tc-btn-danger:hover { background: #fdf1f1; }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

/* ---------- Asset-tag signature motif ----------
   Lot cards read like a physical decommission tag: a perforated
   strip along the top holding the lot number + category, torn
   away from the item photo beneath it. */
.tc-tag {
  position: relative;
  background: var(--tc-ink);
  color: #fff;
  padding: .5rem .9rem;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--tc-radius) var(--tc-radius) 0 0;
}
.tc-tag::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255,255,255,.35) 50%, transparent 0%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}
.tc-tag .lot-no {
  font-family: var(--tc-font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--tc-primary-tint);
}

.tc-card {
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tc-card:hover {
  box-shadow: 0 10px 24px -12px rgba(16,34,43,.18);
  border-color: var(--tc-primary-tint);
  transform: translateY(-2px);
}

/* ---------- Countdown / digital display ---------- */
.tc-countdown {
  font-family: var(--tc-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.tc-countdown.tc-urgent { color: var(--tc-red); }
.tc-countdown.tc-soon { color: var(--tc-amber); }

/* ---------- Badges ---------- */
.tc-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  ring: 1px;
}

/* ---------- Header ---------- */
.tc-header {
  background: linear-gradient(180deg, var(--tc-ink) 0%, #16303c 100%);
}

/* ---------- Barcode strip decoration ---------- */
.tc-barcode {
  height: 22px;
  background: repeating-linear-gradient(
    90deg,
    var(--tc-ink) 0px, var(--tc-ink) 2px,
    transparent 2px, transparent 4px,
    var(--tc-ink) 4px, var(--tc-ink) 5px,
    transparent 5px, transparent 9px,
    var(--tc-ink) 9px, var(--tc-ink) 12px,
    transparent 12px, transparent 14px
  );
  opacity: .12;
}

/* ---------- Scrollbar refinement for admin tables ---------- */
.tc-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.tc-scroll::-webkit-scrollbar-thumb { background: var(--tc-primary-tint); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}