@import './tokens.css';

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

html, body, #root {
  height: 100%;
  width: 100%;
}

body {
  background: var(--bg-void);
  color: var(--text-hi);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-width: 1280px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
}

a {
  color: var(--amber);
  text-decoration: none;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text-hi);
  border-radius: 4px;
  padding: 6px 10px;
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--amber-dim);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-lo); }

/* Utility classes */
.text-hi { color: var(--text-hi); }
.text-mid { color: var(--text-mid); }
.text-lo { color: var(--text-lo); }
.text-amber { color: var(--amber); }
.text-good { color: var(--good); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }

.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }

/* Type badge pills */
.type-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.type-badge.galaxy     { background: var(--type-galaxy); color: #fff; }
.type-badge.emission_nebula { background: var(--type-emission); color: #fff; }
.type-badge.planetary_nebula { background: var(--type-planetary); color: #fff; }
.type-badge.snr        { background: var(--type-snr); color: #fff; }
.type-badge.globular_cluster { background: var(--type-globular); color: #fff; }
.type-badge.open_cluster { background: var(--type-open); color: #111; }
.type-badge.reflection_nebula { background: var(--type-reflection); color: #fff; }
.type-badge.dark_nebula { background: var(--type-dark); color: var(--text-mid); }
.type-badge.nebula     { background: var(--teal); color: #fff; }

/* Quality chips */
.quality-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.quality-chip.keeper  { background: var(--good); color: #fff; }
.quality-chip.needs_more { background: var(--blue); color: #fff; }
.quality-chip.rejected { background: var(--danger); color: #fff; }
.quality-chip.pending  { background: var(--muted); color: var(--text-mid); }

/* Filter pills */
.filter-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
}
.filter-pill.sv220  { background: rgba(155, 89, 182, 0.3); color: #c39dde; border: 1px solid rgba(155,89,182,0.4); }
.filter-pill.c2     { background: rgba(77, 157, 224, 0.3); color: #8cbee8; border: 1px solid rgba(77,157,224,0.4); }
.filter-pill.sv260  { background: rgba(232, 131, 42, 0.3); color: #e8a870; border: 1px solid rgba(232,131,42,0.4); }
.filter-pill.uvir   { background: rgba(61, 186, 114, 0.3); color: #7dd1a1; border: 1px solid rgba(61,186,114,0.4); }