/* Mirqat design tokens — night-watch dark, savanna palette.
   Source of truth: the design system foundation (frame 1a / 5c handoff). */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* base */
  --ink: #0E1420;          /* scaffold */
  --ink-deep: #0A0F1A;     /* deepest bg, code blocks, footer */
  --surface: #161E2E;      /* card */
  --raised: #1E2940;       /* raised surface / track */
  --roundel: #1B2A4A;      /* logo bg */

  /* text */
  --text: #F2F5FA;
  --text-dim: #9AA5B8;
  --text-faint: #5B6478;
  --text-mid: #B9C2D2;

  /* savanna accents */
  --sand: #E8C9A0;
  --amber: #F0A860;
  --dusk: #D97742;
  --fur: #C9805E;
  --fur-dark: #241A12;

  /* status */
  --healthy: #3DD68C;
  --warning: #F5B83D;
  --critical: #F06A4D;
  --down: #E23D5B;
  --paused: #8A93A6;

  /* lines */
  --border: rgba(154,165,184,.14);
  --border-strong: rgba(154,165,184,.22);
  --hairline: rgba(154,165,184,.1);

  /* type */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-ui: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* elevation */
  --shadow: 0 8px 30px rgba(0,0,0,.35);

  /* sky (day, default; JS swaps by local time) */
  --sky: linear-gradient(180deg,#0C1526 0%,#152743 46%,#33304A 76%,#4A3A3C 94%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-ui);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(240,168,96,.3); }

/* ── status helpers ─────────────────────────────────────────── */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.s-healthy  { color: var(--healthy); } .bg-healthy  { background: var(--healthy); }
.s-warning  { color: var(--warning); } .bg-warning  { background: var(--warning); }
.s-critical { color: var(--critical);} .bg-critical { background: var(--critical);}
.s-down     { color: var(--down); }    .bg-down     { background: var(--down); }
.s-paused   { color: var(--paused); }  .bg-paused   { background: var(--paused); }
.s-unknown  { color: var(--paused); }  .bg-unknown  { background: var(--paused); }

/* ── buttons ────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: var(--r-md); font: 800 13px var(--f-ui); height: 40px; padding: 0 18px;
  cursor: pointer; border: 0; transition: filter .12s, transform .06s; user-select:none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); color: var(--fur-dark); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: var(--raised); color: var(--text); border: 1px solid var(--border-strong); font-weight:700; }
.btn-ghost:hover { filter: brightness(1.15); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }

.pill { padding: 5px 10px; border-radius: var(--r-full); background: var(--raised);
  color: var(--sand); font: 600 10px var(--f-mono); white-space: nowrap; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }

/* ── colony keyframes (from the Flame handoff timing table) ─── */
@keyframes kSway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
@keyframes kBlink{0%,91%,100%{opacity:1}93%,95.5%{opacity:0}}
@keyframes kTurn{0%,24%{transform:rotate(0)}30%,44%{transform:rotate(9deg)}52%,70%{transform:rotate(0)}76%,88%{transform:rotate(-7deg)}94%,100%{transform:rotate(0)}}
@keyframes kFidget{0%,100%{transform:translateX(0) rotate(-.6deg)}22%{transform:translateX(-2.5px) rotate(-2deg)}48%{transform:translateX(1.5px) rotate(1.4deg)}72%{transform:translateX(-1px) rotate(-1deg)}}
@keyframes kGlance{0%,18%{transform:rotate(-11deg)}26%,44%{transform:rotate(10deg)}55%,70%{transform:rotate(-6deg)}80%,100%{transform:rotate(-11deg)}}
@keyframes kBob{0%,100%{transform:translateY(0) scaleY(1)}45%{transform:translateY(3.5px) scaleY(.965)}}
@keyframes kChirp{0%,100%{opacity:0;transform:scale(.7)}40%,60%{opacity:.9;transform:scale(1)}}
@keyframes kRipple{0%{transform:scale(.45);opacity:.75}100%{transform:scale(1.9);opacity:0}}
@keyframes kDust{0%{transform:translateY(0) scale(.7);opacity:.5}100%{transform:translateY(-15px) scale(1.3);opacity:0}}
@keyframes kCloud{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes kZzz{0%{transform:translate(0,0);opacity:0}25%{opacity:.9}100%{transform:translate(7px,-15px);opacity:0}}
@keyframes kPeek{0%,14%{transform:translateY(10px)}32%,80%{transform:translateY(0)}94%,100%{transform:translateY(10px)}}
@keyframes kShimmer{0%{transform:translateY(0);opacity:0}35%{opacity:.4}100%{transform:translateY(-13px);opacity:0}}
@keyframes kPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes kMote{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(4px,-6px);opacity:.45}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* reduce motion: freeze the colony, cross-fade instead */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--raised); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }