/* ==========================================================================
   Design tokens — "Garden Ledger" palette
   Herbal & Healthy Living App
   Source of truth: 01-MASTER-PROMPT.md — update there first, then here.
   Import this file into every build (PWA shell, future pages/components).
   ========================================================================== */

:root {
  /* Palette */
  --color-primary: #7A8B69;      /* sage green — nav, primary buttons, active states */
  --color-secondary: #B5652E;    /* terracotta clay — accents, tags, CTAs (use sparingly) */
  --color-background: #F3EDE0;   /* warm parchment — base background */
  --color-text: #26241F;         /* charcoal ink — body text */

  /* Derived / utility shades (generated from the four locked colors above) */
  --color-primary-light: #9AA987;
  --color-primary-dark: #5F6E52;
  --color-secondary-light: #C98A5C;
  --color-secondary-dark: #8C4A1F;
  --color-surface: #FFFFFF;      /* cards/panels sitting on parchment background */
  --color-border: #DDD3BE;
  --color-muted-text: #6B6759;

  /* Typography */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", sans-serif;

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

  /* Radius / elevation */
  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-card: 0 2px 8px rgba(38, 36, 31, 0.08);
}

/* Base element defaults — safe to include as-is in Stage 1 scaffold */
body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
}

a, .link {
  color: var(--color-secondary);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
  border: none;
  border-radius: var(--radius-sm);
}

.tag, .badge {
  background-color: var(--color-secondary-light);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}