/* ==========================================================================
   V3 · Quiet Aurora Design System (Solid & Consistent Surfaces)
   Palette:
     Black   #030407  (Deep canvas background)
     Ink     #15172A  (Solid card & container surface)
     Slate   #1E213A  (Solid secondary badge & hover surface)
     Aurora  #6FE3D6  (Primary action pills & status indicators)
     Mist    #ECEBFF  (Typography & high-contrast secondary pills)
   Typography:
     Hanken Grotesk — Light (300) for headlines/hero numbers, Regular (400) / Medium (500) for UI
   ========================================================================== */

:root {
  --qa-black: #030407;
  --qa-ink: #15172A;
  --qa-slate: #1E213A;
  --qa-aurora: #6FE3D6;
  --qa-mist: #ECEBFF;
  --qa-mist-muted: rgba(236, 235, 255, 0.68);
  --qa-mist-subtle: rgba(236, 235, 255, 0.52);
  --qa-border: rgba(236, 235, 255, 0.12);
  --qa-border-strong: rgba(236, 235, 255, 0.24);
}

html, body {
  background-color: var(--qa-black);
  color: var(--qa-mist);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Headlines & Hero Metrics: Hanken Grotesk Light (300) */
.qa-headline {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: var(--qa-mist);
}

.qa-metric {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.qa-overline {
  font-size: 0.6875rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--qa-mist-subtle);
  font-weight: 500;
}

/* Surfaces & Cards — Solid #15172A Ink */
.qa-card,
.qa-glass-indigo {
  background-color: #15172A;
  border: 1px solid var(--qa-border);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(3, 4, 7, 0.55);
}

/* Pill Buttons — Solid Quiet Aurora */
.btn-aurora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--qa-aurora);
  color: var(--qa-black);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.625rem 1.35rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn-aurora:hover {
  background-color: #85ebe0;
  transform: translateY(-1px);
}

.btn-mist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--qa-mist);
  color: var(--qa-black);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.625rem 1.35rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn-mist:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #15172A;
  color: var(--qa-mist);
  font-weight: 400;
  font-size: 0.8125rem;
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--qa-border-strong);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-ghost:hover {
  background-color: #1E213A;
  border-color: var(--qa-aurora);
  color: #ffffff;
}

/* Inputs & Selects — Solid High-Contrast Surface */
.qa-input {
  background-color: #0B0D18 !important;
  border: 1.5px solid rgba(236, 235, 255, 0.30) !important;
  border-radius: 12px;
  padding: 0.625rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 400;
  color: #ECEBFF !important;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.qa-input:hover {
  border-color: rgba(236, 235, 255, 0.48) !important;
  background-color: #101322 !important;
}
.qa-input::placeholder {
  color: rgba(236, 235, 255, 0.62) !important;
}
.qa-input:focus {
  outline: none;
  background-color: #101322 !important;
  border-color: var(--qa-aurora) !important;
  box-shadow: 0 0 0 3px rgba(111, 227, 214, 0.20);
}
select.qa-input option {
  background-color: #15172A;
  color: #ECEBFF;
}

/* Status Dots */
.qa-dot-aurora {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: var(--qa-aurora);
  display: inline-block;
  flex-shrink: 0;
}

.qa-dot-muted {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: rgba(236, 235, 255, 0.35);
  display: inline-block;
  flex-shrink: 0;
}

/* HTMX & Data Table Rules */
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }

.flash { cursor: pointer; }

table.data th {
  text-align: left;
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(236, 235, 255, 0.52);
  padding: 0.9rem 1.15rem;
  white-space: nowrap;
}
table.data td {
  padding: 0.95rem 1.15rem;
  white-space: nowrap;
  color: var(--qa-mist);
}
table.data td.num, table.data th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

input, select, textarea { color-scheme: dark; }

/* Hide scrollbars on mobile nav */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }