/* ==========================================================================
   THE FURROW — Design Tokens
   Single source of truth for all colour, font, and spacing values.
   Never hardcode a colour/font in any other CSS or JS file — reference these.
   ========================================================================== */

:root {
  /* ---- Navigation Surface (topbar, icon rail, flyout) ---- */
  --nav-bg: #2b2418;
  --nav-bg-deep: #1c1811;
  --nav-bg-raised: #3a3122;
  --nav-text: #ede4d3;
  --nav-text-muted: #a89a80;
  --nav-accent: #8faf6f;
  --nav-accent-bright: #b3d194;
  --nav-border: #453a28;
  --nav-hover: #382f20;
  --nav-active: #423824;

  /* ---- Content Surface (main reading area) ---- */
  --content-bg: #faf6ec;
  --content-text: #2e2a1f;
  --content-text-muted: #6b6350;
  --content-accent: #5c7a42;
  --content-border: #e2d9c3;
  --content-heading: #3a3220;

  /* ---- Card Surface (inset panels) ---- */
  --card-bg: #f1ead9;
  --card-text: #2e2a1f;
  --card-border: #ddd0b2;
  --card-hover: #ebe1c9;

  /* ---- Panel Surface (dark callouts — warnings, pest alerts) ---- */
  --panel-bg: #2b2418;
  --panel-text: #ede4d3;
  --panel-text-muted: #a89a80;
  --panel-accent: #d6a24f;
  --panel-border: #453a28;

  /* ---- Typography ---- */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-decorative: 'Fraunces', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ---- Semantic / Accent (driven by data-accent) ---- */
  --accent: #5c7a42;
  --accent-bright: #7fa35c;
  --accent-dim: rgba(92, 122, 66, 0.35);
  --accent-muted: rgba(92, 122, 66, 0.1);
  --accent-border: rgba(92, 122, 66, 0.4);
  --accent-rgb: 92, 122, 66;

  /* ---- Status tokens (pest severity, disease risk) ---- */
  --status-good: #5c7a42;
  --status-caution: #c78a2e;
  --status-alert: #a8442f;

  /* ---- Legacy Aliases ---- */
  --loam: var(--accent);
  --loam-light: var(--accent-bright);
  --loam-dim: var(--accent-dim);
  --text: var(--content-text);
  --text-muted: var(--content-text-muted);
  --border: var(--accent-border);
  --panel: var(--card-bg);
  --panel2: var(--panel-bg);

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --radius: 6px;
}

/* ---- Accent variants (crop-family colour coding, swappable) ---- */
[data-accent="clay"] {
  --accent: #b56a3c;
  --accent-bright: #d4895a;
  --accent-dim: rgba(181, 106, 60, 0.35);
  --accent-muted: rgba(181, 106, 60, 0.1);
  --accent-border: rgba(181, 106, 60, 0.4);
  --accent-rgb: 181, 106, 60;
}

[data-accent="gold"] {
  --accent: #c78a2e;
  --accent-bright: #e0a94f;
  --accent-dim: rgba(199, 138, 46, 0.35);
  --accent-muted: rgba(199, 138, 46, 0.1);
  --accent-border: rgba(199, 138, 46, 0.4);
  --accent-rgb: 199, 138, 46;
}

[data-accent="sky"] {
  --accent: #4a7a8c;
  --accent-bright: #6fa0b3;
  --accent-dim: rgba(74, 122, 140, 0.35);
  --accent-muted: rgba(74, 122, 140, 0.1);
  --accent-border: rgba(74, 122, 140, 0.4);
  --accent-rgb: 74, 122, 140;
}

/* ---- Dark theme (optional, toggle via data-theme) ---- */
[data-theme="dusk"] {
  --content-bg: #211d15;
  --content-text: #e8ddc4;
  --content-text-muted: #a89a80;
  --content-border: #3a3222;
  --content-heading: #ede4d3;
  --card-bg: #2b2418;
  --card-text: #e8ddc4;
  --card-border: #453a28;
  --card-hover: #332c1e;
}