/* ============================================================
   Orchestrator — self-hosted webfonts (IBM Plex Sans + Mono)
   woff2 from @fontsource (IBM Plex, OFL). Served from the
   embedded /static/fonts/ dir — no external CDN.
   ============================================================ */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/ibm-plex-sans-700.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-mono-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/ibm-plex-mono-700.woff2") format("woff2"); }
/* ============================================================
   Orchestrator — Typography tokens
   IBM Plex Sans (UI) + IBM Plex Mono (hosts, IPs, data, logs).
   Infrastructure-grade, terminal-adjacent. Dense and scannable.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---- Type scale (14px base; ops-dense) ---- */
  --text-2xs: 0.6875rem;  /* 11px — micro labels, badge text */
  --text-xs:  0.75rem;    /* 12px — meta, captions */
  --text-sm:  0.8125rem;  /* 13px — secondary UI, table cells */
  --text-base:0.875rem;   /* 14px — body / default UI */
  --text-md:  0.9375rem;  /* 15px — emphasized body */
  --text-lg:  1.0625rem;  /* 17px — card titles */
  --text-xl:  1.25rem;    /* 20px — section headers */
  --text-2xl: 1.5rem;     /* 24px — page titles */
  --text-3xl: 1.875rem;   /* 30px — display */
  --text-4xl: 2.375rem;   /* 38px — hero / login */

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line heights ---- */
  --leading-tight: 1.15;   /* display / headings */
  --leading-snug: 1.35;    /* titles */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.65; /* prose */
  --leading-mono: 1.55;    /* log lines */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em; /* big display */
  --tracking-tight: -0.01em;   /* headings */
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.09em;  /* uppercase mono labels */

  /* ---- Semantic roles ---- */
  --text-display: var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-sans);
  --text-page-title: var(--weight-semibold) var(--text-2xl)/var(--leading-tight) var(--font-sans);
  --text-section: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --text-card-title: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --text-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --text-label: var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --text-code: var(--weight-regular) var(--text-sm)/var(--leading-mono) var(--font-mono);
}

/* Eyebrow / section-label utility look (uppercase mono) — reference
   pattern for components: mono, small, wide tracking, uppercase. */
/* ============================================================
   Orchestrator — Color tokens
   A control-room console: warm moss-tinted ink + a moss-green
   brand accent (identity / primary action / focus), with amber
   reserved exclusively for the LIVE / RUNNING signal.
   Dark is the canonical theme.
   ============================================================ */

:root {
  /* ---- Ink surfaces (deepest -> raised) — warm, faint moss undertone ---- */
  --ink-900: #070803;   /* app void / behind everything */
  --ink-850: #0b0d07;   /* app background */
  --ink-800: #0f1209;   /* base surface / panels */
  --ink-750: #14180e;   /* card surface */
  --ink-700: #1b2014;   /* raised / hover surface */
  --ink-650: #242a1b;   /* input / control surface */
  --ink-600: #2f3724;   /* strong fill / track */

  /* ---- Hairlines & borders (over ink) — warm white ---- */
  --line-soft: rgba(232, 240, 210, 0.07);
  --line: rgba(232, 240, 210, 0.11);
  --line-strong: rgba(232, 240, 210, 0.17);
  --line-amber: rgba(242, 169, 59, 0.45);
  --line-moss: rgba(136, 168, 81, 0.45);

  /* ---- Foreground / text — warm grey-green ---- */
  --fg-0: #f3f5ec;   /* primary text */
  --fg-1: #c9cdba;   /* secondary text */
  --fg-2: #939a82;   /* muted / labels */
  --fg-3: #646b55;   /* faint / placeholder */
  --fg-disabled: #464d3a;

  /* ---- Moss: brand + primary action + focus ---- */
  --moss-50:  #eef3df;
  --moss-300: #c2d69a;
  --moss-400: #a6c473;   /* hover / glow */
  --moss-500: #88a851;   /* brand core */
  --moss-600: #6f8e3e;   /* pressed */
  --moss-ink: #0e1503;   /* text on moss fill */
  --moss-tint: rgba(136, 168, 81, 0.15);   /* subtle bg wash */
  --moss-tint-2: rgba(136, 168, 81, 0.24);
  --moss-glow: rgba(136, 168, 81, 0.32);

  /* ---- Amber: LIVE / RUNNING / in-progress signal only ---- */
  --amber-50:  #fdf3df;
  --amber-300: #ffce7a;
  --amber-400: #ffbe4d;   /* hover / glow */
  --amber-500: #f2a93b;   /* signal core */
  --amber-600: #d68f24;   /* pressed */
  --amber-ink: #1c1305;   /* text on amber fill */
  --amber-tint: rgba(242, 169, 59, 0.14);   /* subtle bg wash */
  --amber-tint-2: rgba(242, 169, 59, 0.22);
  --amber-glow: rgba(242, 169, 59, 0.30);

  /* ---- Semantic hues ---- */
  --green-500: #46b16a;   /* success / reachable (distinct leaf-green) */
  --green-400: #67ca88;
  --green-ink: #04130a;
  --green-tint: rgba(70, 177, 106, 0.16);

  --red-500: #ef5b56;     /* failed / unreachable / destructive */
  --red-400: #ff7873;
  --red-ink: #1a0605;
  --red-tint: rgba(239, 91, 86, 0.15);

  --blue-500: #4f86f7;    /* pending / queued / info / links */
  --blue-400: #6f9dff;
  --blue-ink: #050c1c;
  --blue-tint: rgba(79, 134, 247, 0.15);

  --slate-500: #76796a;   /* canceled / unknown / inert (warm) */
  --slate-400: #969a88;
  --slate-tint: rgba(150, 154, 136, 0.13);

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-app: var(--ink-850);
  --surface-panel: var(--ink-800);
  --surface-card: var(--ink-750);
  --surface-raised: var(--ink-700);
  --surface-input: var(--ink-650);
  --surface-overlay: rgba(6, 7, 3, 0.66);

  /* Text */
  --text-primary: var(--fg-0);
  --text-secondary: var(--fg-1);
  --text-muted: var(--fg-2);
  --text-faint: var(--fg-3);

  /* Borders */
  --border-soft: var(--line-soft);
  --border: var(--line);
  --border-strong: var(--line-strong);

  /* Primary action / brand / focus — moss */
  --accent: var(--moss-500);
  --accent-hover: var(--moss-400);
  --accent-press: var(--moss-600);
  --accent-fg: var(--moss-ink);
  --accent-wash: var(--moss-tint);
  --accent-line: var(--line-moss);
  --focus-ring: var(--moss-glow);

  /* Links */
  --link: var(--blue-400);
  --link-hover: var(--blue-500);

  /* ---- Status: run lifecycle ---- */
  --status-pending-fg: var(--blue-400);
  --status-pending-bg: var(--blue-tint);
  --status-running-fg: var(--amber-400);
  --status-running-bg: var(--amber-tint);
  --status-success-fg: var(--green-400);
  --status-success-bg: var(--green-tint);
  --status-failed-fg: var(--red-400);
  --status-failed-bg: var(--red-tint);
  --status-canceled-fg: var(--slate-400);
  --status-canceled-bg: var(--slate-tint);

  /* ---- Status: server reachability ---- */
  --status-unknown-fg: var(--slate-400);
  --status-unknown-bg: var(--slate-tint);
  --status-bootstrapping-fg: var(--amber-400);
  --status-bootstrapping-bg: var(--amber-tint);
  --status-reachable-fg: var(--green-400);
  --status-reachable-bg: var(--green-tint);
  --status-unreachable-fg: var(--red-400);
  --status-unreachable-bg: var(--red-tint);

  /* ---- Telemetry / chart palette (sparklines, meters, gauges) ---- */
  --chart-1: #a6c473;   /* moss — primary series (CPU) */
  --chart-2: #4f86f7;   /* blue — memory */
  --chart-3: #46b16a;   /* green — disk / healthy */
  --chart-4: #b48ef0;   /* violet — network / aux */
  --chart-grid: rgba(232, 240, 210, 0.06);
  --chart-fill: rgba(136, 168, 81, 0.14);

  /* Meter thresholds — a single ramp for utilization bars */
  --meter-track: var(--ink-650);
  --meter-ok: var(--green-500);      /* < 70% */
  --meter-warn: var(--amber-500);    /* 70–89% */
  --meter-crit: var(--red-500);      /* >= 90% */

  /* ---- Terminal / live-log palette ---- */
  --term-bg: #070803;
  --term-fg: #d0d4c5;
  --term-dim: #6e7560;
  --term-task: #c2d69a;     /* TASK [...] headers — moss (structural) */
  --term-ok: #67ca88;       /* ok: */
  --term-changed: #ffbe4d;  /* changed: — amber (attention) */
  --term-failed: #ff7873;   /* fatal/failed */
  --term-skip: #6f9dff;     /* skipping */
  --term-recap: #c9cdba;    /* PLAY RECAP */
}
/* ============================================================
   Orchestrator — Spacing, radii, sizing tokens
   4px base grid. Tight, instrument-panel rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px grid) ---- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 2rem;     /* 32 */
  --space-8: 2.5rem;   /* 40 */
  --space-9: 3rem;     /* 48 */
  --space-10: 4rem;    /* 64 */

  /* ---- Radii (tight; sharp ops feel) ---- */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ---- Control sizing (heights) ---- */
  --control-sm: 28px;
  --control-md: 34px;   /* default button / input */
  --control-lg: 40px;

  /* ---- Layout ---- */
  --sidebar-w: 240px;
  --topbar-h: 52px;
  --content-max: 1180px;
  --gutter: var(--space-6);

  /* ---- Hit target floor ---- */
  --tap-min: 44px;
}
/* ============================================================
   Orchestrator — Effects: borders, shadows, focus, motion
   Flat-ish surfaces on dark; shadow used sparingly for true
   elevation (popovers, dialogs). Snappy, no-bounce motion.
   ============================================================ */

:root {
  /* ---- Border widths ---- */
  --border-w: 1px;
  --border-w-strong: 1.5px;

  /* ---- Elevation shadows (dark) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Inset top hairline gives panels a subtle "lit edge" */
  --edge-lit: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* @kind shadow */

  /* ---- Focus ring (moss) ---- */
  --ring: 0 0 0 3px var(--focus-ring);
  --ring-offset-dark: 0 0 0 2px var(--surface-app), 0 0 0 4px var(--focus-ring);

  /* ---- Glows (status indicators) ---- */
  --glow-amber: 0 0 0 3px var(--amber-glow);
  --glow-green: 0 0 8px rgba(70, 177, 106, 0.55);
  --glow-red: 0 0 8px rgba(239, 91, 86, 0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur-base: 170ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}
/* ============================================================
   Orchestrator — Base element styling & resets
   Applied on top of tokens. Sets the dark console baseline.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--amber-tint-2);
  color: var(--fg-0);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Monospace data convention: hosts, IPs, ids, paths */
.mono,
[data-mono] {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Custom scrollbars — thin, console-style */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-600) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-700); background-clip: content-box; }

/* Focus-visible baseline */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}