/* ── AVARA BASE STYLES ─────────────────────────────────────────────────────
   Variables, reset, typography.
   Load this first on every page.
────────────────────────────────────────────────────────────────────────── */

:root {
  /* Colours */
  --bg:             #f5f3ee;
  --surface:        #ffffff;
  --border:         #e4dfd5;
  --border-strong:  #ccc8bc;
  --text:           #1a1916;
  --muted:          #7a7870;
  --faint:          #b8b5ac;

  --green:          #2d6a4f;
  --green-dark:     #1e4d38;
  --green-bg:       #edf7f2;
  --green-mid:      #b8e0cc;

  --red:            #8b2318;
  --red-bg:         #fdf0ee;

  --blue:           #1a4a7a;
  --blue-bg:        #eef4fb;

  --amber-bg:       #fef5e4;

  --cat-bg:         #eae7e0;

  /* Chart colours */
  --c0: #3b82f6;
  --c1: #f59e0b;
  --c2: #10b981;
  --c3: #8b5cf6;
  --c4: #ef4444;
  --c5: #06b6d4;
  --c6: #f97316;
  --c7: #ec4899;

  /* Tokens */
  --r:    8px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Menlo', 'Consolas', monospace;
}

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

/* ── BASE ── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

a {
  color: inherit;
}

/* ── UTILITIES ── */
.pos { color: var(--green); }
.neg { color: var(--red); }

.text-muted  { color: var(--muted); }
.text-faint  { color: var(--faint); }
.text-mono   { font-family: var(--mono); }
.text-upper  { text-transform: uppercase; letter-spacing: .06em; }
.text-center { text-align: center; }

/* ── SPINNER ── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}