/* ════════════════════════════════════════
   base.css — Reset, variables, typography
   ════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

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

:root {
  /* Background layers */
  --bg:       #f0f4f0;
  --surface:  #ffffff;
  --surface2: #e8f0e8;
  --surface3: #d6e8d6;
  --border:   #c4d9c4;

  /* Text */
  --text:  #0f2010;
  --muted: #5a7a5a;

  /* Brand accent — construction orange */
  --accent:     #143109;
  --accent-dim: rgba(217, 123, 58, 0.12);

  /* Status colors */
  --green:      #29e08a;
  --green-dim:  rgba(41, 224, 138, 0.12);
  --amber:      #f0c040;
  --amber-dim:  rgba(240, 192, 64, 0.12);
  --red:        #f05c6e;
  --red-dim:    rgba(240, 92, 110, 0.12);
  --blue:       #4a80f5;
  --blue-dim:   rgba(74, 128, 245, 0.12);

  /* Typography */
  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;

  /* Layout */
  --radius:   12px;
  --sidebar-w: 232px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
}

/* ── Utility classes ── */
.mono  { font-family: var(--mono); }
.muted { color: var(--muted); }