/* ════════════════════════════════════════════════════════════
   Murphy brand tokens — extracted from the canonical landing
   page at murphy.systems/.  Import on every page:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/static/murphy-brand.css">

   PATCH-449 — 2026-05-25
════════════════════════════════════════════════════════════ */

:root {
  /* Surface */
  --bg:        #080c0a;
  --bg2:       #0d1210;
  --surface:   #111a15;
  --elevated:  #162019;

  /* Borders */
  --border:    rgba(0,212,170,.13);
  --border-hi: rgba(0,212,170,.28);

  /* Text */
  --text:      #deeae4;
  --text-dim:  #7a9a8a;
  --text-mute: #4a665a;

  /* Accents */
  --teal:      #00D4AA;
  --teal-glow: rgba(0,212,170,.18);
  --green:     #00ff6a;
  --orange:    #ff8c42;
  --red:       #ff5f57;
  --amber:     #febc2e;

  /* Type */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-code: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

  /* Geometry */
  --radius:    10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography scale */
h1, h2, h3, h4, h5 { font-family: var(--font); margin: 0; }
h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
code, pre, .mono { font-family: var(--font-code); }

a { color: var(--teal); text-decoration: none; transition: opacity .15s; }
a:hover { opacity: .85; }

/* Surface helpers */
.mu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.mu-card-lg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.mu-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mu-muted { color: var(--text-dim); }
.mu-mute2 { color: var(--text-mute); }

/* Buttons */
.mu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--font);
  font-weight: 600; font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--border-hi);
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
}
.mu-btn:hover { border-color: var(--teal); background: var(--surface); }
.mu-btn-primary {
  background: var(--teal); color: #062019; border-color: var(--teal);
}
.mu-btn-primary:hover { background: #1ae6c0; opacity: 1; }
.mu-btn-lg { padding: 14px 24px; font-size: 15px; }

/* Status dots */
.mu-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.mu-dot-on  { background: var(--green); box-shadow: 0 0 8px var(--teal-glow); }
.mu-dot-warn{ background: var(--amber); }
.mu-dot-err { background: var(--red); }
.mu-dot-off { background: var(--text-mute); }

/* Pill / chip */
.mu-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .5px;
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: uppercase;
}
.mu-pill-teal { color: var(--teal); border-color: var(--border-hi); }

/* Top brand header (shared on signed-in pages) */
.mu-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
}
.mu-logo {
  font-family: var(--font);
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
  color: var(--teal);
  text-decoration: none;
}
.mu-topbar nav { display: flex; gap: 22px; align-items: center; }
.mu-topbar nav a { color: var(--text-dim); font-size: 14px; font-weight: 500; }
.mu-topbar nav a:hover { color: var(--text); }
.mu-topbar nav a.active { color: var(--teal); }

/* Tables */
.mu-table { width: 100%; border-collapse: collapse; }
.mu-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-mute); text-transform: uppercase; padding: 12px 8px; border-bottom: 1px solid var(--border); }
.mu-table td { padding: 14px 8px; font-size: 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.mu-table tr:last-child td { border-bottom: none; }

/* Loading + empty states */
.mu-loading { padding: 80px 24px; text-align: center; color: var(--text-dim); }
.mu-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--teal); border-radius: 50%; animation: mu-spin .8s linear infinite; margin: 0 auto 16px; }
@keyframes mu-spin { to { transform: rotate(360deg); } }
.mu-empty { padding: 60px 24px; text-align: center; color: var(--text-mute); border: 1px dashed var(--border); border-radius: var(--radius); }
.mu-error { background: rgba(255,95,87,.08); border: 1px solid var(--red); padding: 16px; border-radius: 8px; color: var(--red); }
.mu-banner { background: rgba(254,188,46,.06); border: 1px solid var(--amber); padding: 16px 20px; border-radius: 8px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mu-banner strong { color: var(--amber); }

/* Layout helpers */
.mu-wrap { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }
.mu-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 768px) { .mu-grid-2 { grid-template-columns: 1fr; } }

/* Focus */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }