/*
 * tokens.css — Domain semantic state tokens
 *
 * MAPPING CONVENTION
 * ==================
 * Semantic token    → Primer color value   → Domain meaning
 * --color-safe      → Primer $green-600    → Budget/spend under threshold (< 70%)
 * --color-warning   → Primer $yellow-700   → Budget approaching limit (70–89%)
 * --color-danger    → Primer $red-600      → Budget at or over limit (≥ 90%)
 *
 * Usage: reference these tokens in templates and fin- classes rather than
 * hardcoding hex values. Changing a semantic color requires editing only
 * this one file.
 *
 * Template usage example:
 *   <span style="color: var(--color-safe);">↑ Under budget</span>
 *   <span style="color: var(--color-danger);">⚠ Over budget</span>
 *
 * fin- class usage:
 *   .fin-progress-bar-safe uses var(--color-safe) for fill
 */
:root {
  /* Budget/spending state colors (AR-9) */
  --color-safe:    #1a7f37;   /* Primer $green-600  — under budget threshold */
  --color-warning: #9a6700;   /* Primer $yellow-700 — approaching budget limit */
  --color-danger:  #cf222e;   /* Primer $red-600    — at or over budget limit */

  /* Primer semantic aliases — used throughout fin- components */
  --color-accent:  #0969da;   /* Primer $blue-600   — links, primary action buttons */
  --color-muted:   #636c76;   /* Primer $gray-500   — secondary / muted text */
  --color-border:  #d0d7de;   /* Primer $gray-300   — card and input borders */
  --color-canvas:  #f6f8fa;   /* Primer $gray-100   — card and section backgrounds */
  --color-fg:      #1f2328;   /* Primer $gray-900   — primary foreground text */
}