/* MiCerca design tokens (2026-08-19) — Gunnar's written color spec:
   Charcoal / Terracotta / Sand / Sage + warm off-white, applied as CSS
   custom properties rather than hardcoded hex throughout the app. Loaded
   on every page before nav.css and before each page's own <style> block.

   Semantic status colors (success/warning/error) are DELIBERATELY kept
   separate from the brand palette below, per the spec — Terracotta is not
   "error", Sage is not "success". Map/data-visualization colors (property
   use-type legend, condition indicators, confidence scores, Neighborhoods
   verified/estimated boundaries) are categorical/semantic data and are NOT
   tokenized here at all — they stay as their own hardcoded values in
   index.html, on purpose (see that file's USE_STYLES etc.). */

:root {
  /* Raw palette — reference these directly only when defining the
     semantic tokens below; components should prefer the semantic ones. */
  --mc-charcoal: #454545;
  --mc-terracotta: #c56f4e;
  --mc-terracotta-dark: #a75e42; /* hover/active shade, ~15% darker */
  --mc-sand: #d8c6a5;
  --mc-sage: #73866b;
  --mc-off-white: #f7f6f2;

  /* Text */
  --color-text-primary: var(--mc-charcoal);
  --color-text-secondary: #767066; /* warm mid-gray, replaces the old #666/#555 */
  --color-text-tertiary: #9a9388; /* replaces the old #999/#888/#777 */

  /* Brand */
  --color-brand-primary: var(--mc-terracotta);
  --color-brand-primary-hover: var(--mc-terracotta-dark);
  --color-brand-secondary: var(--mc-sage);
  --color-surface-warm: var(--mc-sand);

  /* Surfaces */
  --color-app-background: var(--mc-off-white);
  --color-card: #ffffff;
  --color-border: #d9cfbe; /* warm neutral, replaces the old cool #ccd6e4 */
  --color-border-subtle: #ece5d6; /* replaces the old #eee/#e0e6ef */
  --color-surface-muted: #efe8db; /* secondary-button surface, replaces #eef2f8 */
  --color-surface-muted-hover: #e4dac6; /* replaces #dde5f0 */

  /* Status — separate token family, not brand-derived */
  --color-success: #2e7d32;
  --color-success-bg: #e7f3ea;
  --color-warning: #ca8a04;
  --color-warning-bg: #fff3e0;
  --color-error: #c0392b;
  --color-error-bg: #fdeceb;
  --color-error-bg-hover: #f7d6d1;
}