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

/* Marc Russell Co. brand stylesheet — GENERATED by build.mjs from tokens.json and src/. Edit those, then run: node build.mjs */

:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --border: #e1e5eb;
  --border-strong: #838e9d;
  --grid: #edf0f4;
  --text: #0e1a2b;
  --text-2: #3f4b5c;
  --muted: #5c6878;
  --harbor: #1b2d4a;
  --on-harbor: #ffffff;
  --brass: #b08433;
  --on-brass: #1a1206;
  --brass-text: #85601c;
  --link: #2459b0;
  --focus: var(--link);
  --info: var(--link);
  --good: #1d7a3e;
  --warning: #8a5e06;
  --critical: #b3261e;
  --neutral: var(--muted);
  --up: var(--good);
  --down: var(--critical);
  --chart-1: #2f5fa8;
  --chart-2: #b08433;
  --chart-3: #2b7f7a;
  --chart-4: #7a8699;
  --line: var(--chart-1);
  --shadow-1: 0 1px 2px rgba(14,26,43,0.06);
  --shadow-2: 0 10px 30px rgba(14,26,43,0.14);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d121a;
    --surface: #151c27;
    --surface-2: #1d2633;
    --border: #2b3546;
    --border-strong: #5f6b7f;
    --grid: #212a38;
    --text: #edf1f6;
    --text-2: #b8c2cf;
    --muted: #8a95a5;
    --harbor: #22375a;
    --on-harbor: #ffffff;
    --brass: #d2a653;
    --on-brass: #1a1206;
    --brass-text: #e0b866;
    --link: #7ea6e6;
    --good: #57c47f;
    --warning: #e3b04b;
    --critical: #f2777a;
    --chart-1: #6f9be0;
    --chart-2: #d2a653;
    --chart-3: #58bdb6;
    --chart-4: #9aa5b6;
    --shadow-1: none;
    --shadow-2: 0 10px 30px rgba(0,0,0,0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d121a;
  --surface: #151c27;
  --surface-2: #1d2633;
  --border: #2b3546;
  --border-strong: #5f6b7f;
  --grid: #212a38;
  --text: #edf1f6;
  --text-2: #b8c2cf;
  --muted: #8a95a5;
  --harbor: #22375a;
  --on-harbor: #ffffff;
  --brass: #d2a653;
  --on-brass: #1a1206;
  --brass-text: #e0b866;
  --link: #7ea6e6;
  --good: #57c47f;
  --warning: #e3b04b;
  --critical: #f2777a;
  --chart-1: #6f9be0;
  --chart-2: #d2a653;
  --chart-3: #58bdb6;
  --chart-4: #9aa5b6;
  --shadow-1: none;
  --shadow-2: 0 10px 30px rgba(0,0,0,0.55);
}

/* Type styles */
.mr-display-xl { font-family: var(--font-display); font-size: 52px; line-height: 58px; font-weight: 600; letter-spacing: -0.01em; }
.mr-display { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.mr-h1 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0em; }
.mr-h2 { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
.mr-body-lg { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; }
.mr-body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.mr-body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.mr-label { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mr-data-lg { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mr-data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }

/* Page defaults. Included in brand.css only (not in the design-system preview frames). */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--text); text-wrap: balance; margin: 0; }
h1 { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 24px; line-height: 30px; font-weight: 600; }
h3 { font-size: 18px; line-height: 24px; font-weight: 600; }
a { color: var(--link); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code { font: 400 0.9em var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-sm); }
.mr-page { max-width: 1280px; margin: 0 auto; padding-block: var(--space-8); padding-inline: var(--space-4); }
@media (min-width: 900px) { .mr-page { padding-inline: var(--space-8); } }
.mr-num, .mr-tabular { font-variant-numeric: tabular-nums; }
.mr-eyebrow { font: 600 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-text); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }


/* Marc Russell Co. components. Every class starts with mr- and reads only tokens. */

/* Lockup: the mark plus the name, set in live type */
.mr-lockup { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.mr-lockup svg { width: 28px; height: 28px; flex: none; }
.mr-lockup__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.mr-lockup__name span { font-weight: 500; }
.mr-mark-roof { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-miterlimit: 8; stroke-linejoin: miter; stroke-linecap: square; }
.mr-mark-line { stroke: var(--brass); stroke-width: 2.5; stroke-linecap: square; }

/* Header: the harbor bar at the top of every tool */
.mr-header { background: var(--harbor); color: var(--on-harbor); }
.mr-header__inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-3) var(--space-4); max-width: 1280px; margin: 0 auto; }
.mr-header__tool { font-family: var(--font-sans); font-size: 13px; color: var(--on-harbor); opacity: 0.85; padding-left: var(--space-4); border-left: 1px solid rgba(255,255,255,0.25); }
.mr-nav { display: flex; gap: var(--space-4); margin-left: auto; flex-wrap: wrap; }
.mr-nav a { color: var(--on-harbor); text-decoration: none; font: 500 13px/1 var(--font-sans); padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.mr-nav a:hover { border-bottom-color: rgba(255,255,255,0.4); }
.mr-nav a[aria-current="page"] { border-bottom-color: var(--brass); }
.mr-header a:focus-visible { outline: 2px solid var(--on-harbor); outline-offset: 2px; }

/* Buttons */
.mr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 14px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.mr-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mr-btn:disabled, .mr-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.mr-btn--primary { background: var(--harbor); color: var(--on-harbor); }
.mr-btn--primary:hover { filter: brightness(1.18); }
.mr-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.mr-btn--secondary:hover { background: var(--surface-2); }
.mr-btn--ghost { background: transparent; color: var(--link); }
.mr-btn--ghost:hover { background: var(--surface-2); }
.mr-btn--sm { min-height: 28px; padding: 0 var(--space-3); font-size: 13px; }

/* Badges: status always says its state in words */
.mr-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); border: 1px solid currentColor; font: 600 11px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral); background: var(--surface); white-space: nowrap; }
.mr-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mr-badge--good { color: var(--good); }
.mr-badge--warning { color: var(--warning); }
.mr-badge--critical { color: var(--critical); }
.mr-badge--info { color: var(--info); }
.mr-badge--brand { color: var(--brass-text); }

/* Panel: the one container */
.mr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-6); min-width: 0; }
.mr-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.mr-panel__title { margin: 0; font: 600 18px/24px var(--font-display); color: var(--text); text-wrap: balance; }
.mr-panel__meta { font: 400 12px/16px var(--font-sans); color: var(--muted); }
.mr-panel__body { font: 400 15px/24px var(--font-sans); color: var(--text-2); }
.mr-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Stat tile: label, figure, change, sparkline */
.mr-stat { display: grid; gap: var(--space-1); min-width: 0; }
.mr-stat__label { font: 600 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mr-stat__value { font: 500 28px/32px var(--font-mono); letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.mr-stat__delta { font: 400 13px/20px var(--font-mono); color: var(--neutral); font-variant-numeric: tabular-nums; }
.mr-stat__delta--up { color: var(--up); }
.mr-stat__delta--down { color: var(--down); }
.mr-stat__note { font: 400 12px/16px var(--font-sans); color: var(--muted); }
.mr-spark { display: block; width: 100%; height: 36px; margin-top: var(--space-2); overflow: visible; }
.mr-spark__base { stroke: var(--grid); stroke-width: 1; }
.mr-spark__area { fill: var(--line); opacity: 0.12; }
.mr-spark__line { fill: none; stroke: var(--line); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.mr-spark__dot { fill: var(--line); }

/* Data table */
.mr-table-wrap { overflow-x: auto; }
.mr-table { width: 100%; border-collapse: collapse; font: 400 13px/20px var(--font-sans); color: var(--text); }
.mr-table th { text-align: left; font: 600 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); padding: var(--space-2) var(--space-3); white-space: nowrap; }
.mr-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.mr-table tbody tr:hover td { background: var(--surface-2); }
.mr-table .mr-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-table .mr-up { color: var(--up); }
.mr-table .mr-down { color: var(--down); }

/* Form fields */
.mr-field { display: grid; gap: var(--space-1); min-width: 0; }
.mr-field__label { font: 600 13px/20px var(--font-sans); color: var(--text); }
.mr-field__hint { font: 400 12px/16px var(--font-sans); color: var(--muted); }
.mr-input, .mr-select { width: 100%; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 400 14px/1 var(--font-sans); }
.mr-input::placeholder { color: var(--muted); }
.mr-input:focus-visible, .mr-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.mr-input--num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.mr-field--error .mr-input { border-color: var(--critical); }
.mr-field--error .mr-field__hint { color: var(--critical); }