/* OrchardIQ design tokens, taken from the Figma prototype.
   Change colours, type and spacing here, not in app.css. */
:root {
  /* Surfaces */
  --bg: #F4F5F1;
  --surface: #FFFFFF;
  --surface-muted: #ECEFE8;
  --border: #DDE1D8;
  --border-strong: #B8C0B3;

  /* Text */
  --ink: #1A211C;
  --ink-2: #2A332C;
  --ink-3: #3E4840;
  --ink-muted: #5A645C;

  /* Brand */
  --brand: #2F5D3A;
  --brand-dark: #1E3F27;
  --brand-tint: #E7EDE4;
  --brand-tint-2: #EEF4EC;
  --footer-bg: #1E2A22;
  --footer-ink: #E7EDE4;

  /* Status: Good / Watch / Act */
  --good-bg: #DCEFE0;
  --good-fg: #1E5A30;
  --watch-bg: #FBEFD0;
  --watch-fg: #6B4E00;
  --act-bg: #F8D9D5;
  --act-fg: #8E1F16;

  /* Callouts */
  --note-bg: #FBF5E3;
  --note-border: #E3C77A;
  --note-fg: #3A2E08;
  --note-icon: #7A5A00;

  /* Map */
  --map-ground: #77744F;
  --map-healthy: #5F8743;
  --map-dry: #CDB95A;
  --map-wet: #2C3A33;

  /* Type */
  --font-sans: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Shape and space */
  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-pill: 99px;
  --page-max: 1120px;
  --gutter: 24px;
}

@media (max-width: 600px) {
  :root { --gutter: 16px; }
}