/* ============================================================
   MAP Monitor — type system + color tokens
   Font stack: Peak Design uses a geometric sans (Suisse Int'l
   internally). For an internal tool we substitute Geist + Geist
   Mono + a restrained serif display for editorial mode.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ─── Peak Design brand tokens ──────────────────────────── */
  --pd-bone:        #efe7d3;  /* soft ivory field */
  --pd-sand:        #d9cfb7;
  --pd-clay:        #9b7a55;
  --pd-cinnamon:    #c54600;  /* PD rust — primary accent */
  --pd-rust-deep:   #8a2e00;
  --pd-ink:         #1a1a1a;
  --pd-ink-soft:    #2a2a2a;
  --pd-amber-5:     #f5b544;
  --pd-amber-7:     #d88d1f;
  --pd-moss:        #4f6a3a;

  /* ─── Neutral surface system (field-manual default) ─────── */
  --hx-bg:          #f3eee1;   /* ivory field */
  --hx-surface:     #ffffff;
  --hx-surface-2:   #ebe4d2;
  --hx-surface-3:   #e2d9c3;
  --hx-border:      #ddd3bb;
  --hx-border-strong:#b3a58a;
  --hx-divider:     #e5dcc6;

  --hx-fg-1:        #1a1a1a;   /* primary */
  --hx-fg-2:        #4a4a45;   /* secondary */
  --hx-fg-3:        #8a8275;   /* tertiary / caption */
  --hx-fg-mute:     #b5ac99;

  /* ─── Severity (editorial ramp = default) ───────────────── */
  --hx-red:         #c54600;   /* PD cinnamon used for severity */
  --hx-amber:       #d88d1f;
  --hx-green:       #4f7a4a;
  --hx-green-soft:  rgba(79,122,74,0.14);

  /* ─── Type families ─────────────────────────────────────── */
  --font-heading:    'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body:       'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-caption:    'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --font-interactive:'Geist', -apple-system, sans-serif;
  --font-display:    'Geist', sans-serif;

  /* ─── Spacing & radius ──────────────────────────────────── */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;
}

/* ─── Aesthetic: Industrial (monospace-forward, colder neutrals) ── */
html[data-aesthetic="industrial"] {
  --hx-bg: #f4f3ee;
  --hx-surface: #ffffff;
  --hx-surface-2: #eceae2;
  --hx-surface-3: #e2dfd3;
  --hx-border: #d5d2c5;
  --hx-border-strong: #9c998c;
  --hx-divider: #e3e0d2;
  --hx-fg-1: #1a1a1a;
  --hx-fg-2: #434340;
  --hx-fg-3: #7e7b72;
  --font-heading: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
  --font-display: 'Geist Mono', monospace;
}

/* ─── Aesthetic: Editorial (display serif for numbers + headings) ── */
html[data-aesthetic="editorial"] {
  --hx-bg: #f6f2e9;
  --hx-surface: #fffdf6;
  --hx-surface-2: #ece4d2;
  --hx-surface-3: #e2d6bb;
  --hx-border: #d9cdb0;
  --hx-border-strong: #a99878;
  --hx-divider: #e8dec7;
  --font-heading: 'Instrument Serif', 'Times New Roman', serif;
  --font-display: 'Instrument Serif', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hx-bg);
  color: var(--hx-fg-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
}

/* Tabular figures everywhere numbers matter */
.mono, .tabular, [data-tabular] {
  font-family: var(--font-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-interactive);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-fg-3);
}

/* In editorial aesthetic, eyebrows keep sans; headings go serif */
html[data-aesthetic="editorial"] .eyebrow {
  font-family: 'Geist', sans-serif;
}

/* Severity color helpers (for inline use) */
.sev-crit { color: #c54600; }
.sev-hi   { color: #d88d1f; }
.sev-med  { color: #d88d1f; }
.sev-mild { color: var(--hx-fg-2); }

::selection { background: var(--pd-cinnamon); color: #fff; }

/* Buttons */
.btn {
  font-family: var(--font-interactive);
  font-weight: 500;
  font-size: 13px;
  border: 1px solid var(--hx-border-strong);
  background: var(--hx-surface);
  color: var(--hx-fg-1);
  padding: 8px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 120ms, border-color 120ms, color 120ms;
  letter-spacing: 0.005em;
}
.btn:hover:not(:disabled) { background: var(--hx-surface-2); border-color: var(--hx-fg-1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--pd-ink);
  border-color: var(--pd-ink);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--pd-cinnamon); border-color: var(--pd-cinnamon); color: #fff; }

.btn-secondary {
  background: var(--hx-surface);
  border-color: var(--hx-border-strong);
  color: var(--hx-fg-1);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--hx-fg-2);
}
.btn-ghost:hover:not(:disabled) { color: var(--hx-fg-1); background: var(--hx-surface-2); border-color: transparent; }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-xs { padding: 4px 8px; font-size: 11.5px; border-radius: var(--r-sm); }