/* ============================================================
   SwarmBlade Design System — Tokens
   Black / bone / olive / ember.
   Type: IBM Plex Sans + IBM Plex Mono (Google Fonts).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Color: ink (true neutrals trending green-black) ---------- */
  --ink-0:  #050706;   /* deepest — only for map deep-zones */
  --ink-1:  #0B0F0C;   /* default app background */
  --ink-2:  #111712;   /* panel background */
  --ink-3:  #181F1A;   /* raised panel */
  --ink-4:  #232C25;   /* hover on raised */

  /* ---------- Color: bone (warm off-white neutrals) ---------- */
  --bone-0: #F4F4EE;   /* primary fg on dark */
  --bone-1: #D4D6CC;   /* secondary fg */
  --bone-2: #8C9089;   /* muted / labels */
  --bone-3: #5A5E58;   /* hairlines, deep-muted */
  --bone-4: #3A3E39;   /* deepest mute */

  /* ---------- Color: olive (primary action / friendly tracks) ---------- */
  --olive-900: #1A2B1E;
  --olive-800: #243A28;
  --olive-700: #2C4828;   /* deep action surface */
  --olive-600: #3D6238;
  --olive-500: #4F7A48;   /* primary */
  --olive-400: #6FA266;
  --olive-300: #97C490;
  --olive-200: #C1DDB9;

  /* ---------- Color: ember (alert / hostile / kinetic) ---------- */
  --ember-700: #8A3414;
  --ember-600: #B84A1A;
  --ember-500: #E5662C;   /* primary alert */
  --ember-400: #FF8F4D;
  --ember-300: #FFB186;

  /* ---------- Semantic ---------- */
  --bg:           var(--ink-1);
  --bg-panel:     var(--ink-2);
  --bg-raised:    var(--ink-3);
  --bg-hover:     var(--ink-4);
  --bg-deepest:   var(--ink-0);

  --fg:           var(--bone-0);
  --fg-muted:     var(--bone-2);
  --fg-subtle:    var(--bone-3);
  --fg-inverse:   var(--ink-1);

  --line:         rgba(244, 244, 238, 0.10);     /* hairline on dark */
  --line-strong:  rgba(244, 244, 238, 0.18);
  --line-light:   rgba(11, 15, 12, 0.10);        /* hairline on bone */

  --accent:       var(--olive-500);
  --accent-deep:  var(--olive-700);
  --accent-soft:  var(--olive-300);

  --alert:        var(--ember-500);
  --alert-deep:   var(--ember-700);
  --alert-soft:   var(--ember-300);

  --status-ok:        var(--olive-400);
  --status-warn:      var(--ember-500);
  --status-danger:    #E5483B;
  --status-idle:      var(--bone-2);
  --status-info:      #6BB0E5;

  --focus-ring:   var(--olive-400);

  /* ---------- Type families ---------- */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---------- Type scale (px / line-height) ---------- */
  --t-display-1:  clamp(56px, 7vw, 96px);  /* hero headlines */
  --t-display-2:  clamp(40px, 5vw, 64px);  /* section headlines */
  --t-h1:         clamp(32px, 3.5vw, 48px);
  --t-h2:         28px;
  --t-h3:         22px;
  --t-h4:         18px;
  --t-body-lg:    18px;
  --t-body:       15px;
  --t-body-sm:    13px;
  --t-caption:    12px;
  --t-tag:        11px;        /* ALL-CAPS mono tags */
  --t-micro:      10px;        /* MGRS, telemetry minimums */

  --lh-tight:     1.05;
  --lh-display:   1.10;
  --lh-snug:      1.25;
  --lh-body:      1.55;
  --lh-relaxed:   1.70;

  --tracking-display: -0.02em;
  --tracking-tag:     0.08em;
  --tracking-caps:    0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radius ---------- */
  --r-0:  0;        /* imagery, marketing cards */
  --r-1:  2px;      /* default UI */
  --r-pill: 999px;  /* avatars, status dots */

  /* ---------- Elevation (used sparingly) ---------- */
  --elev-1: inset 0 1px 0 rgba(255,255,255,0.04);
  --elev-popover: 0 24px 60px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.40);
  --elev-modal:   0 40px 120px rgba(0,0,0,0.70), 0 4px 12px rgba(0,0,0,0.50);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;
  --dur-pulse:  450ms;
}

/* ============================================================
   Element defaults — apply by attaching `.swb` to <body>
   or by importing this file globally.
   ============================================================ */

.swb, .swb body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.swb h1, .swb .h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  margin: 0;
}
.swb h2, .swb .h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}
.swb h3, .swb .h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}
.swb h4, .swb .h4 {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}
.swb p { margin: 0 0 1em; }
.swb code, .swb .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ALL-CAPS mono tag — used everywhere */
.swb .tag {
  font-family: var(--font-mono);
  font-size: var(--t-tag);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tag);
  font-weight: 500;
  color: var(--fg-muted);
}

/* Display headline */
.swb .display-1 {
  font-size: var(--t-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
.swb .display-2 {
  font-size: var(--t-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

/* ============================================================
   Component primitives
   ============================================================ */

.swb .btn {
  --btn-bg: var(--bone-0);
  --btn-fg: var(--ink-1);
  --btn-bd: var(--bone-0);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-1);
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.swb .btn:hover { background: #fff; }
.swb .btn:active { background: var(--bone-1); }
.swb .btn.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone-0);
  --btn-bd: var(--line-strong);
}
.swb .btn.btn-ghost:hover { --btn-bg: var(--ink-3); }
.swb .btn.btn-primary {
  --btn-bg: var(--olive-500);
  --btn-fg: var(--bone-0);
  --btn-bd: var(--olive-500);
}
.swb .btn.btn-primary:hover { --btn-bg: var(--olive-400); --btn-bd: var(--olive-400); }
.swb .btn.btn-danger {
  --btn-bg: var(--ember-500);
  --btn-fg: #1a0d05;
  --btn-bd: var(--ember-500);
}
.swb .btn.btn-danger:hover { --btn-bg: var(--ember-400); --btn-bd: var(--ember-400); }

.swb .field {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 8px 12px;
  color: var(--bone-0);
  font: 400 var(--t-body-sm)/1.4 var(--font-sans);
  width: 100%;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.swb .field:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring) inset; }
.swb .field::placeholder { color: var(--bone-3); }

.swb .card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 16px 20px;
}

.swb .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--bone-2);
  vertical-align: middle;
}
.swb .dot.ok { background: var(--status-ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-ok) 20%, transparent); }
.swb .dot.warn { background: var(--status-warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-warn) 22%, transparent); }
.swb .dot.danger { background: var(--status-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-danger) 22%, transparent); }
.swb .dot.idle { background: var(--bone-3); }