/* ── Wellness Dashboard — Design Tokens (Fireart light theme) ─────────────────
   Adapted from dribbble.com/shots/25241984-Task-Management-Dashboard
   Light theme · forest green accent · card-based layout
────────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Backgrounds ──────────────────────────────────────────────────────── */
  --bg:             #F7F8FA;   /* App background */
  --bg-elevated:    #FFFFFF;   /* Cards, sidebar */
  --bg-overlay:     rgba(0,0,0,0.04);
  --border:         #EEEEEE;   /* Subtle card borders */
  --border-strong:  #D1D5DB;   /* Inputs, dividers */

  /* ── Foreground ───────────────────────────────────────────────────────── */
  --fg-primary:     #111827;   /* Main text */
  --fg-secondary:   #6B7280;   /* Secondary / meta text */
  --fg-muted:       #9CA3AF;   /* Labels, units, placeholders */
  --fg-disabled:    #D1D5DB;   /* Inactive */
  --fg-on-dark:     #FFFFFF;   /* Text on dark/accent backgrounds */

  /* ── Accent — forest green system (from design) ───────────────────────── */
  --accent:         #1C3D2E;   /* Dark forest green — primary card, sidebar active */
  --accent-mid:     #22C55E;   /* Bright green — CTAs, positive signals */
  --accent-light:   #DCFCE7;   /* Light green — badge bg, hover */
  --accent-text:    #15803D;   /* Dark green text on light bg */

  /* ── Semantic signals ────────────────────────────────────────────────── */
  --signal-positive:  #22C55E;
  --signal-negative:  #EF4444;
  --signal-warning:   #F97316;
  --signal-reference: #3B82F6;
  --signal-pos-bg:    #DCFCE7;
  --signal-neg-bg:    #FEE2E2;
  --signal-warn-bg:   #FFEDD5;
  --signal-ref-bg:    #DBEAFE;

  /* ── Bar chart (historical) ───────────────────────────────────────────── */
  --bar-above:   #86EFAC;   /* Past days above baseline — light green */
  --bar-below:   #FCA5A5;   /* Past days below baseline — light red */
  --bar-today:   #22C55E;   /* Today */
  --bar-empty:   #E5E7EB;

  /* ── Card ─────────────────────────────────────────────────────────────── */
  --card-shadow:  0 2px 16px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.10);
  --card-radius:  16px;
  --card-radius-sm: 12px;

  /* ── Sidebar ─────────────────────────────────────────────────────────── */
  --sidebar-w:    220px;
  --sidebar-w-sm: 60px;   /* collapsed / mobile icon-only */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-sans:    'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

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

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: var(--card-radius);
  --radius-full: 9999px;
}