@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* tokens/fonts.css */
/* Emerald typefaces.
   No binaries were supplied with the brand package. The wordmark is outlined vector,
   so the logo needs no font file. Supporting text uses Space Grotesk (the typeface the
   wordmark is drawn from) with IBM Plex Mono for data/telemetry readouts.
   Both are loaded from Google Fonts; swap the @import for self-hosted @font-face
   rules when licensed binaries are available. */


/* tokens/colors.css */
:root{
/* ── Brand: Aer Green ─────────────────────────────── */
--c-green-50:#F5FBE8;--c-green-100:#E8F5CC;--c-green-200:#D3EC9F;--c-green-300:#C4E57C;
--c-green-400:#B4DE59;/* BRAND — Aer Green */
--c-green-500:#9FCC3F;--c-green-600:#82A92C;--c-green-700:#5F7C1E;
/* ── Brand: Aer Teal ──────────────────────────────── */
--c-teal-50:#E6F0F2;--c-teal-100:#C2DBE0;--c-teal-200:#8FBAC3;--c-teal-300:#4E8F9C;--c-teal-400:#1A6A78;
--c-teal-500:#004E5B;/* BRAND — Aer Teal */
--c-teal-600:#003D47;--c-teal-700:#002B33;--c-teal-800:#00171C;
/* ── Warm neutrals ────────────────────────────────── */
--c-white:#FFFFFF;
--c-sand-25:#FAF9F5;--c-sand-50:#F5F3ED;--c-sand-100:#F2F0E8;--c-sand-200:#E6E3DA;--c-sand-300:#D5D1C4;
--c-ink-300:#8A938E;--c-ink-400:#6B7A74;--c-ink-500:#5C6A64;--c-ink-600:#3C4A45;--c-ink-700:#2A3531;--c-ink-800:#17201D;--c-ink-900:#0A0F0A;
/* ── Status hues (kept off-brand-green so "good" never reads as "brand") ── */
--c-success-50:#E8F4EC;--c-success-500:#2F7D4F;--c-success-700:#1F5A38;
--c-warning-50:#FBF2E0;--c-warning-500:#D9932A;--c-warning-700:#9A650F;
--c-danger-50:#F9EAE8;--c-danger-500:#C2453A;--c-danger-700:#8E2C23;
--c-info-50:#E7F1F4;--c-info-500:#2C7A8C;--c-info-700:#1B5464;

/* ── Semantic aliases ─────────────────────────────── */
--brand:var(--c-teal-500);
--brand-accent:var(--c-green-400);
--brand-accent-strong:var(--c-green-600);

--surface-canvas:var(--c-sand-50);
--surface-card:var(--c-white);
--surface-sunken:var(--c-sand-100);
--surface-raised:var(--c-white);
--surface-inverse:var(--c-teal-500);
--surface-inverse-deep:var(--c-ink-900);
--surface-accent:var(--c-green-50);

--text-heading:var(--c-ink-800);
--text-body:var(--c-ink-600);
--text-muted:var(--c-ink-400);
--text-faint:var(--c-ink-300);
--text-inverse:var(--c-white);
--text-on-inverse-muted:var(--c-teal-100);
--text-link:var(--c-teal-500);
--text-link-hover:var(--c-teal-400);

--border-subtle:var(--c-sand-200);
--border-strong:var(--c-sand-300);
--border-inverse:rgba(255,255,255,.18);
--border-focus:var(--c-teal-400);

--focus-ring:0 0 0 3px rgba(180,222,89,.55);
--focus-ring-inverse:0 0 0 3px rgba(180,222,89,.42);

--status-ok:var(--c-success-500);
--status-watch:var(--c-warning-500);
--status-critical:var(--c-danger-500);
--status-info:var(--c-info-500);

--chart-1:var(--c-teal-500);--chart-2:var(--c-green-400);--chart-3:var(--c-teal-300);
--chart-4:var(--c-green-600);--chart-5:var(--c-info-500);--chart-6:var(--c-warning-500);
--chart-grid:var(--c-sand-200);
}

/* tokens/typography.css */
:root{
--font-core:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

--fw-light:300; /* @kind font */--fw-regular:400; /* @kind font */--fw-medium:500; /* @kind font */--fw-semibold:600; /* @kind font */--fw-bold:700; /* @kind font */

--fs-display-xl:64px;--fs-display-lg:52px;--fs-display:40px;
--fs-h1:32px;--fs-h2:24px;--fs-h3:19px;--fs-h4:16px;
--fs-body-lg:17px;--fs-body:15px;--fs-body-sm:13.5px;
--fs-caption:12.5px;--fs-kicker:12px;--fs-micro:11px;
--fs-metric-xl:44px;--fs-metric:28px;

--lh-tight:1.06; /* @kind font */--lh-snug:1.2; /* @kind font */--lh-heading:1.28; /* @kind font */--lh-body:1.55; /* @kind font */--lh-loose:1.7; /* @kind font */

--ls-display:-.025em; /* @kind font */--ls-heading:-.015em; /* @kind font */--ls-body:0; /* @kind font */--ls-kicker:.28em; /* @kind font */--ls-label:.06em; /* @kind font */

/* Ready-made roles */
--type-kicker:var(--fw-semibold) var(--fs-kicker)/1.2 var(--font-core); /* @kind font */
--type-metric:var(--fw-medium) var(--fs-metric)/1.1 var(--font-mono); /* @kind font */
}

/* tokens/spacing.css */
:root{
--sp-0:0; /* @kind spacing */--sp-1:2px;--sp-2:4px;--sp-3:8px;--sp-4:12px;--sp-5:16px;--sp-6:20px;--sp-7:24px;
--sp-8:32px;--sp-9:40px;--sp-10:48px;--sp-11:64px;--sp-12:80px;--sp-13:96px;--sp-14:128px;
/* Semantic */
--gap-inline:var(--sp-3);
--gap-stack:var(--sp-5);
--pad-control:0 var(--sp-5);
--pad-card:var(--sp-6);
--pad-section:var(--sp-12) var(--sp-8);
--container-max:1200px; /* @kind spacing */
--container-prose:660px; /* @kind spacing */
--control-h-sm:32px; /* @kind spacing */--control-h:40px; /* @kind spacing */--control-h-lg:48px; /* @kind spacing */
}

/* tokens/radius.css */
:root{
--r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-2xl:28px;--r-pill:999px;
--r-control:var(--r-md);
--r-card:var(--r-lg);
--r-surface:var(--r-xl);
--bw-hair:1px; /* @kind spacing */--bw-thick:2px; /* @kind spacing */--bw-rule:3px; /* @kind spacing */
}

/* tokens/elevation.css */
:root{
/* Warm, low, single-direction. Emerald never stacks heavy drop shadows. */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(23,32,29,.06);
--shadow-sm:0 1px 3px rgba(23,32,29,.07),0 1px 1px rgba(23,32,29,.04);
--shadow-md:0 4px 14px rgba(23,32,29,.08);
--shadow-lg:0 12px 32px rgba(23,32,29,.10);
--shadow-pop:0 18px 48px rgba(0,42,50,.18);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
--glow-accent:0 0 0 1px rgba(180,222,89,.5),0 6px 20px rgba(180,222,89,.28);
--scrim-top:linear-gradient(180deg,rgba(0,23,28,.72),rgba(0,23,28,0)); /* @kind other */
--scrim-bottom:linear-gradient(0deg,rgba(0,23,28,.78),rgba(0,23,28,0)); /* @kind other */
--blur-glass:saturate(150%) blur(14px); /* @kind other */
}

/* tokens/motion.css */
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:340ms; /* @kind other */
--dur-deliberate:560ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,.9,.3); /* @kind other */
--ease-inout:cubic-bezier(.65,0,.35,1); /* @kind other */
--motion-hover:var(--dur-fast) var(--ease-standard); /* @kind other */
--motion-enter:var(--dur-base) var(--ease-out); /* @kind other */
--motion-layout:var(--dur-slow) var(--ease-inout); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms; /* @kind other */--dur-fast:0ms; /* @kind other */--dur-base:0ms; /* @kind other */--dur-slow:0ms; /* @kind other */--dur-deliberate:0ms; /* @kind other */}}

/* tokens/base.css */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-core);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-canvas)}
a{color:var(--text-link);text-decoration-color:color-mix(in oklab,var(--text-link) 35%,transparent);text-underline-offset:2px;transition:color var(--motion-hover)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
::selection{background:var(--c-green-200);color:var(--c-ink-800)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.em-numeric{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.em-kicker{font:var(--type-kicker);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--c-teal-500)}

/* styles/c-button.css */
.em-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);font-family:var(--font-core);font-weight:var(--fw-medium);font-size:var(--fs-body);line-height:1;letter-spacing:-.005em;height:var(--control-h);padding:0 var(--sp-6);border:var(--bw-hair) solid transparent;border-radius:var(--r-control);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--motion-hover),color var(--motion-hover),border-color var(--motion-hover),transform var(--dur-instant) var(--ease-standard),box-shadow var(--motion-hover)}
.em-btn:active:not(:disabled){transform:translateY(1px)}
.em-btn:disabled,.em-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none}
.em-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.em-btn--sm{height:var(--control-h-sm);padding:0 var(--sp-5);font-size:var(--fs-body-sm)}
.em-btn--lg{height:var(--control-h-lg);padding:0 var(--sp-7);font-size:var(--fs-body-lg)}
.em-btn--block{display:flex;width:100%}
.em-btn--primary{background:var(--c-teal-500);color:var(--c-white)}
.em-btn--primary:hover:not(:disabled){background:var(--c-teal-400)}
.em-btn--primary:active:not(:disabled){background:var(--c-teal-600)}
.em-btn--accent{background:var(--c-green-400);color:var(--c-teal-600)}
.em-btn--accent:hover:not(:disabled){background:var(--c-green-300)}
.em-btn--accent:active:not(:disabled){background:var(--c-green-500)}
.em-btn--secondary{background:var(--c-white);color:var(--c-teal-500);border-color:var(--border-strong)}
.em-btn--secondary:hover:not(:disabled){border-color:var(--c-teal-300);background:var(--c-sand-25)}
.em-btn--secondary:active:not(:disabled){background:var(--c-sand-100)}
.em-btn--ghost{background:transparent;color:var(--c-teal-500)}
.em-btn--ghost:hover:not(:disabled){background:var(--c-teal-50)}
.em-btn--ghost:active:not(:disabled){background:var(--c-teal-100)}
.em-btn--danger{background:var(--c-danger-500);color:var(--c-white)}
.em-btn--danger:hover:not(:disabled){background:var(--c-danger-700)}
.em-btn--inverse{background:var(--c-green-400);color:var(--c-teal-600)}
.em-btn--inverse:hover:not(:disabled){background:var(--c-green-300)}
.em-btn--inverse:focus-visible{box-shadow:var(--focus-ring-inverse)}
.em-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h);height:var(--control-h);padding:0;border:var(--bw-hair) solid transparent;border-radius:var(--r-control);background:transparent;color:var(--text-body);cursor:pointer;transition:background var(--motion-hover),color var(--motion-hover)}
.em-iconbtn:hover:not(:disabled){background:var(--c-sand-100);color:var(--c-teal-500)}
.em-iconbtn:active:not(:disabled){background:var(--c-sand-200)}
.em-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.em-iconbtn:disabled{opacity:.42;cursor:not-allowed}
.em-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.em-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.em-iconbtn--solid{background:var(--c-teal-500);color:var(--c-white)}
.em-iconbtn--solid:hover:not(:disabled){background:var(--c-teal-400);color:var(--c-white)}
.em-iconbtn--outline{border-color:var(--border-strong);background:var(--c-white)}
.em-iconbtn--outline:hover:not(:disabled){border-color:var(--c-teal-300);background:var(--c-sand-25)}
.em-icon{display:inline-block;flex:none;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* styles/c-surface.css */
.em-card{background:var(--surface-card);border:var(--bw-hair) solid var(--border-subtle);border-radius:var(--r-card);padding:var(--pad-card);transition:border-color var(--motion-hover),box-shadow var(--motion-hover),transform var(--motion-hover)}
.em-card--flat{box-shadow:none}
.em-card--raised{box-shadow:var(--shadow-sm)}
.em-card--interactive{cursor:pointer}
.em-card--interactive:hover{border-color:var(--c-teal-200);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.em-card--accent{border-top:var(--bw-rule) solid var(--c-green-400)}
.em-card--inverse{background:var(--c-teal-500);border-color:var(--border-inverse);color:var(--text-inverse)}
.em-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);margin-bottom:var(--sp-5)}
.em-card__title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--text-heading);letter-spacing:var(--ls-heading);margin:0}
.em-card--inverse .em-card__title{color:var(--text-inverse)}
.em-card__sub{font-size:var(--fs-caption);color:var(--text-muted);margin:2px 0 0}
.em-stat{display:flex;flex-direction:column;gap:var(--sp-3)}
.em-stat__label{font-size:var(--fs-kicker);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.em-stat__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-metric);font-weight:var(--fw-medium);color:var(--text-heading);line-height:1;letter-spacing:-.02em}
.em-stat__unit{font-size:var(--fs-body-sm);color:var(--text-muted);margin-left:var(--sp-2)}
.em-stat__foot{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-caption);color:var(--text-muted)}
.em-stat__delta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium)}
.em-stat__delta--up{color:var(--c-success-500)}
.em-stat__delta--down{color:var(--c-danger-500)}
.em-stat__delta--flat{color:var(--text-muted)}
.em-badge{display:inline-flex;align-items:center;gap:var(--sp-2);height:22px;padding:0 var(--sp-4);border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap}
.em-badge__dot{width:6px;height:6px;border-radius:var(--r-pill);background:currentColor}
.em-badge--neutral{background:var(--c-sand-100);color:var(--c-ink-500)}
.em-badge--brand{background:var(--c-teal-50);color:var(--c-teal-500)}
.em-badge--accent{background:var(--c-green-100);color:var(--c-green-700)}
.em-badge--ok{background:var(--c-success-50);color:var(--c-success-700)}
.em-badge--watch{background:var(--c-warning-50);color:var(--c-warning-700)}
.em-badge--critical{background:var(--c-danger-50);color:var(--c-danger-700)}
.em-badge--info{background:var(--c-info-50);color:var(--c-info-700)}
.em-badge--solid{background:var(--c-teal-500);color:var(--c-white)}
.em-tag{display:inline-flex;align-items:center;gap:var(--sp-3);height:26px;padding:0 var(--sp-4);border:var(--bw-hair) solid var(--border-subtle);border-radius:var(--r-sm);background:var(--c-white);font-size:var(--fs-caption);color:var(--text-body);white-space:nowrap}
.em-tag--mono{font-family:var(--font-mono)}
.em-tag__x{display:flex;border:0;background:none;padding:0;margin-right:-2px;color:var(--text-faint);cursor:pointer;line-height:1;font-size:14px;transition:color var(--motion-hover)}
.em-tag__x:hover{color:var(--c-danger-500)}
.em-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body-sm)}
.em-table th{text-align:left;font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);padding:0 var(--sp-5) var(--sp-4);border-bottom:var(--bw-hair) solid var(--border-subtle);white-space:nowrap}
.em-table td{padding:var(--sp-4) var(--sp-5);border-bottom:var(--bw-hair) solid var(--border-subtle);color:var(--text-body);vertical-align:middle}
.em-table tbody tr{transition:background var(--motion-hover)}
.em-table tbody tr:hover{background:var(--c-sand-25)}
.em-table--num td.em-num,.em-table th.em-num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.em-table__lead{font-weight:var(--fw-medium);color:var(--text-heading)}