/* Zonda Markets — Design tokens + base styles
 * ----------------------------------------------------------------
 * Edit colors, fonts, scale here. The HTML references these via
 * CSS custom properties (e.g. var(--paper)).
 */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Colors */
  --paper:        #f0e4d3;
  --paper-deep:   #e6d6bf;
  --cream:        #f7ecd9;

  --ink:          #1a1410;
  --ink-dim:      rgba(26, 20, 16, 0.6);
  --ink-faint:    rgba(26, 20, 16, 0.18);

  --terracotta:   #c0633a;
  --terra-deep:   #9c4a26;
  --terra-faint:  rgba(192, 99, 58, 0.22);
  --rust:         #7a3318;

  /* Semantic */
  --bg:           var(--paper);
  --bg-alt:       var(--cream);
  --fg1:          var(--ink);
  --fg2:          var(--ink-dim);
  --fg3:          var(--ink-faint);
  --accent:       var(--terracotta);
  --accent-hover: var(--terra-deep);
  --hairline:     var(--ink-faint);

  /* Type families */
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Reset / base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

p {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
a:hover { color: var(--terra-deep); }

::selection { background: var(--terra-faint); color: var(--ink); }

/* ── Layout root ────────────────────────────────────────────── */
#root {
  width: 1280px;
  margin: 0 auto;
  position: relative;
}