/* ═══════════════════════════════════════════════════════════════
   WEATHERDUCK DESIGN TOKENS
   Loaded globally before all module stylesheets.
   All modules should use var(--wd-*) instead of hardcoded values.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --wd-green:        #425A47;
  --wd-green-light:  #D4E8D6;
  --wd-green-hover:  #354a39;
  --wd-blue-astro:   #1B2E4C;
  --wd-moon:         #f3c14a;

  /* ── Text ── */
  --wd-text-primary:   #141414;
  --wd-text-secondary: #555;
  --wd-text-muted:     #888;
  --wd-text-on-green:  #ffffff;

  /* ── Backgrounds ── */
  --wd-bg-page:   #fafaf8;
  --wd-bg-card:   #ffffff;
  --wd-bg-subtle: #f5f5f3;

  /* ── Borders ── */
  --wd-border:        rgba(0, 0, 0, 0.08);
  --wd-border-strong: rgba(0, 0, 0, 0.16);

  /* ── Semantic ── */
  --wd-error:   #c62828;
  --wd-warning: #e8a317;
  --wd-success: #3a7d3e;

  /* ── Score palette ── */
  --wd-score-excellent: #b3d4ee;
  --wd-score-good:      #b3ffcc;
  --wd-score-fair:      #fff5b3;
  --wd-score-poor:      #ffcc99;
  --wd-score-bad:       #ffb3b3;
  --wd-score-past:      #f0f0ee;

  /* ── Score palette (strong) — same hues, more saturated for heatmaps ── */
  --wd-score-excellent-strong: #2E7DB5;
  --wd-score-good-strong:      #5cd88a;
  --wd-score-fair-strong:      #f5d862;
  --wd-score-poor-strong:      #f5a54a;
  --wd-score-bad-strong:       #f07070;

  /* ── Score text (dark companions for pastel backgrounds) ── */
  --wd-score-excellent-text: #1a4a6e;
  --wd-score-good-text:      #1a5c30;
  --wd-score-fair-text:      #6b5a10;
  --wd-score-poor-text:      #7a4400;
  --wd-score-bad-text:       #7a2020;

  /* ── Typography ── */
  --wd-font: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wd-font-size-xs:  0.72rem;
  --wd-font-size-sm:  0.82rem;
  --wd-font-size-md:  0.92rem;
  --wd-font-size-lg:  1.1rem;
  --wd-font-size-xl:  1.25rem;
  --wd-font-size-2xl: 1.5rem;

  /* ── Spacing ── */
  --wd-space-xs:  4px;
  --wd-space-sm:  8px;
  --wd-space-md:  12px;
  --wd-space-lg:  16px;
  --wd-space-xl:  20px;
  --wd-space-2xl: 28px;
  --wd-space-3xl: 40px;

  /* ── Radius ── */
  --wd-radius-sm:   8px;
  --wd-radius-md:   12px;
  --wd-radius-lg:   16px;
  --wd-radius-pill:  999px;

  /* ── Shadows ── */
  --wd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --wd-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --wd-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.10);

  /* ── Controls ── */
  --wd-control-h: 44px;

  /* ── Focus ── */
  --wd-focus-ring: 0 0 0 3px rgba(66, 90, 71, 0.15);

  /* ── Cards ── */
  --wd-card-padding: 22px;
  --wd-card-padding-mobile: 16px;

  /* ── Table borders (softer than general borders) ── */
  --wd-table-border: #e0e0de;

  /* ── Accent blue (sliders, toggles — replacing Google blue) ── */
  --wd-blue-accent: #3b7dd8;
}