/*
 * WeatherGrid Design System v2.0
 * Pixel-neutral foundation for the v0.19 shadcn/Vercel visual baseline.
 * This file centralizes semantic tokens. It intentionally does NOT redesign
 * component geometry, hierarchy, navigation, or interaction behavior.
 */
:root {
  /* Typography */
  --wg-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wg-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --wg-font-weight-regular: 400;
  --wg-font-weight-medium: 520;
  --wg-font-weight-semibold: 620;
  --wg-font-weight-bold: 720;

  --wg-type-page-title-size: 24px;
  --wg-type-page-title-line: 1.2;
  --wg-type-page-title-tracking: -.035em;
  --wg-type-page-title-weight: 720;
  --wg-type-page-subtitle-size: 12.5px;
  --wg-type-panel-title-size: 12.5px;
  --wg-type-panel-title-weight: 650;
  --wg-type-panel-meta-size: 9.5px;
  --wg-type-nav-size: 13px;
  --wg-type-nav-weight: 520;
  --wg-type-metric-label-size: 10px;
  --wg-type-metric-value-size: 21px;
  --wg-type-metric-value-weight: 720;
  --wg-type-metric-meta-size: 8.6px;

  /* Spacing scale: exact values already used by v0.19. */
  --wg-space-2: 2px;
  --wg-space-3: 3px;
  --wg-space-4: 4px;
  --wg-space-6: 6px;
  --wg-space-7: 7px;
  --wg-space-8: 8px;
  --wg-space-9: 9px;
  --wg-space-10: 10px;
  --wg-space-11: 11px;
  --wg-space-12: 12px;
  --wg-space-13: 13px;
  --wg-space-14: 14px;
  --wg-space-16: 16px;
  --wg-space-18: 18px;
  --wg-space-20: 20px;
  --wg-space-22: 22px;
  --wg-space-24: 24px;
  --wg-space-28: 28px;
  --wg-space-34: 34px;

  /* Geometry */
  --wg-layout-sidebar-width: 240px;
  --wg-layout-topbar-height: 66px;
  --wg-radius-control: 7px;
  --wg-radius-panel: 8px;
  --wg-radius-pill: 999px;

  /* Light semantic palette: exact v0.19 values. */
  --wg-color-background: #fbfcfe;
  --wg-color-surface: #ffffff;
  --wg-color-surface-muted: #f7f8fa;
  --wg-color-surface-hover: #f5f7fb;
  --wg-color-foreground: #0f172a;
  --wg-color-muted: #667085;
  --wg-color-muted-2: #98a2b3;
  --wg-color-border: #e6e9ef;
  --wg-color-border-strong: #d9dee7;
  --wg-color-primary: #2563eb;
  --wg-color-primary-soft: #eef4ff;
  --wg-color-success: #12b76a;
  --wg-color-success-soft: #ecfdf3;
  --wg-color-warning: #f79009;
  --wg-color-warning-soft: #fffaeb;
  --wg-color-danger: #f04438;
  --wg-color-danger-soft: #fef3f2;
  --wg-color-purple: #9333ea;

  /* Elevation */
  --wg-shadow-panel: 0 1px 2px rgba(16,24,40,.035), 0 4px 12px rgba(16,24,40,.035);
  --wg-shadow-floating: 0 14px 36px rgba(16,24,40,.14);

  /* Chart language — visual values preserve v0.19. */
  --wg-chart-grid: #e6e9ef;
  --wg-chart-axis: #667085;
  --wg-chart-line-width: 1.8;
  --wg-chart-point-radius: 3px;
  --wg-chart-hover-point-radius: 3.5px;

  /* Icon contract. Generic chrome preserves v0.19's 1.8px visible stroke. */
  --wg-icon-viewbox: 0 0 24 24;
  --wg-icon-stroke: 1.8;
  --wg-icon-metric-stroke: 1.7;
}

:root[data-theme="dark"] {
  --wg-color-background: #09090b;
  --wg-color-surface: #0f1012;
  --wg-color-surface-muted: #141518;
  --wg-color-surface-hover: #17191d;
  --wg-color-foreground: #f4f4f5;
  --wg-color-muted: #a1a1aa;
  --wg-color-muted-2: #71717a;
  --wg-color-border: #26272b;
  --wg-color-border-strong: #34363c;
  --wg-color-primary: #6b9cff;
  --wg-color-primary-soft: #111d36;
  --wg-color-success: #32d583;
  --wg-color-success-soft: #10271e;
  --wg-color-warning: #fdb022;
  --wg-color-warning-soft: #2c2411;
  --wg-color-danger: #f97066;
  --wg-color-danger-soft: #311616;
  --wg-color-purple: #b771ff;
  --wg-shadow-panel: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.18);
  --wg-shadow-floating: 0 18px 44px rgba(0,0,0,.5);
  --wg-chart-grid: #26272b;
  --wg-chart-axis: #a1a1aa;
}