/* ═══════════════════════════════════════════════════════════════
   gr-theme.css — Design tokens + global utility components.
   All site pages link this file first. Do not define :root tokens elsewhere;
   page-level overrides (if any) must follow this link in the <head>.

   Note: most component CSS is currently inlined in each page's <style>
   block. Consolidating that into this file is open follow-up work; for
   now, only add a global utility component here when it must be
   maintained in one place across the whole site.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Backgrounds — dark strategic navy (not pure black) */
  --navy-0:      #06101c;
  --navy-1:      #0a1628;
  --navy-2:      #0d1f38;
  --navy-3:      #112240;
  --navy-4:      #1a3050;

  /* Borders */
  --border-dim:  #162236;
  --border:      #1e3347;
  --border-lt:   #2a4d6e;

  /* Brand accent — cyan/steel */
  --cyan:        #4ab0cc;
  --cyan-dim:    #2a7a9c;
  --cyan-faint:  rgba(74, 176, 204, 0.10);

  /* Text — cool white register */
  --text-1:      #e8f0f8;
  --text-2:      #8aafc8;
  --text-3:      #6a8fa8;

  /* Status / alert — muted (not saturated consumer colors) */
  --status-crit:    #7a1e1e;
  --status-crit-lt: #cc3a3a;
  --status-elev:    #7a4f12;
  --status-elev-lt: #c87c28;
  --status-watch:   #1a4a2a;
  --status-watch-lt:#3a8a4a;
  --status-pending: #1e3347;

  /* Typography */
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ─── Global utility components ─────────────────────────────── */

/* Active-build footer marker: pre-launch transparency strip shown
   above each page's footer-lower row. Pairs with the launch-list
   CTA at /notify/. */
.footer-build-marker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  padding: 12px 52px;
  border-top: 1px solid var(--border-dim);
}
.footer-build-marker a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted var(--cyan-dim);
  padding-bottom: 1px;
  margin-left: 4px;
}
.footer-build-marker a:hover {
  border-bottom-style: solid;
}
@media (max-width: 768px) {
  .footer-build-marker {
    padding: 12px 20px;
    line-height: 1.5;
  }
}
