/* ============================================================================
   BONAVA NOIR — the bonavalive.com house style (canonical, reusable)
   ----------------------------------------------------------------------------
   Single source of truth for the dark "Noir" theme shared across every
   bonavalive.com property EXCEPT the travel sites (Hawaii / Disney keep their
   own bright vacation palettes).

   Currently applied to:
     • bonavalive.com (this landing launcher)      — links this file
     • research.bonavalive.com                      — built-in stylesheet matches
     • shoalsgovernment.bonavalive.com              — CSS embedded in
                                                       _generate_dashboard.py

   Reuse: <link rel="stylesheet" href="/bonava-noir.css"> then use the tokens
   and component classes below. Page-specific layout can layer on top.
   Design spec origin: office-PC agent located it inline in
   _generate_dashboard.py (Lauderdale County Info dashboard); extracted here
   2026-07-04 so future sites drop it in instead of re-copying.
   ============================================================================ */

:root {
  /* palette */
  --bg:          #0b0d12;   /* page background            */
  --fg:          #f4f6fb;   /* primary text               */
  --muted:       #8b93a7;   /* secondary / labels         */
  --surface:     #151a21;   /* raised panel               */
  --surface-2:   #242c37;   /* borders / hover surfaces   */
  --accent:      #60a5fa;   /* primary accent (blue)      */
  --positive:    #6ee7b7;   /* positive / success (mint)  */
  --danger:      #fca5a5;   /* error / dead               */

  /* glass card tokens */
  --card-bg:     rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.09);

  /* status swatches */
  --status-open:  #60a5fa;  /* open / active   */
  --status-watch: #fbbf24;  /* watch / pending */
  --status-done:  #6ee7b7;  /* done / closed   */
  --status-dead:  #8b93a7;  /* dead / archived */

  /* type + rhythm */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --base: 12px;             /* dashboard base size        */
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* tabular numbers read cleaner in data tables / money columns */
.num, td.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- gradient wordmark / display headings -------------------------------- */
.wordmark, .noir-h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(120deg, var(--fg), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- fixed background glow ----------------------------------------------- */
.glow {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(40rem 40rem at 20% 20%, rgba(96,165,250,0.18), transparent 60%),
    radial-gradient(36rem 36rem at 80% 70%, rgba(110,231,183,0.16), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* ---- glassy sticky header ------------------------------------------------ */
.noir-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
}

/* ---- topnav (Back / Home / Log out) -------------------------------------- */
.topnav { display: flex; gap: 0.5rem; }
.topnav a, .topnav button {
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--fg);
  background: rgba(255,255,255,0.05); border: 1px solid var(--card-border);
  border-radius: 0.6rem; padding: 0.45rem 0.8rem; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
}
.topnav a:hover, .topnav button:hover { border-color: var(--accent); }
.topnav .out { color: var(--muted); }
.topnav .out:hover { border-color: var(--danger); color: var(--danger); }

/* ---- pill badge ---------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--positive);
  border: 1px solid rgba(110,231,183,0.35);
  border-radius: 999px; padding: 0.4rem 0.9rem;
}

/* ---- glass card ---------------------------------------------------------- */
.card {
  --card-accent: var(--accent);
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 1.15rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover, .card:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--card-accent) 55%, transparent);
  box-shadow: 0 1.25rem 2.5rem -1rem color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  opacity: .8;
}

/* ---- status indicator swatches ------------------------------------------- */
.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.status-open  { background: var(--status-open);  }
.status-watch { background: var(--status-watch); }
.status-done  { background: var(--status-done);  }
.status-dead  { background: var(--status-dead);  }

@media (prefers-reduced-motion: reduce) {
  .glow, .card { animation: none !important; transition: none !important; }
}