/*
  Weerlab design tokens
  Source of truth: DESIGN.md
  Safe to include page by page during gradual migration.
*/

:root {
  --wl-color-primary: #00205b;
  --wl-color-primary-strong: #003366;
  --wl-color-primary-soft: #eff6ff;
  --wl-color-secondary: #0b3a8a;
  --wl-color-accent: #2ec4e8;
  --wl-color-accent-strong: #035e7a;
  --wl-color-background: #f6f8fb;
  --wl-color-background-soft: #eef2f7;
  --wl-color-surface: #ffffff;
  --wl-color-surface-muted: #f8fafc;
  --wl-color-border: #e3e8ef;
  --wl-color-border-strong: #cbd5e1;
  --wl-color-text: #0f172a;
  --wl-color-text-muted: #64748b;
  --wl-color-text-soft: #94a3b8;
  --wl-color-success: #10b981;
  --wl-color-warning-yellow: #e6b800;
  --wl-color-warning-orange: #e07000;
  --wl-color-danger: #cc0000;
  --wl-color-weather-blue: #1d4ed8;
  --wl-color-weather-teal: #0d9488;
  --wl-color-probability-purple: #6d28d9;

  --wl-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --wl-font-mono: "DM Mono", ui-monospace, monospace;

  --wl-text-headline-lg: 700 22px/1.2 var(--wl-font-sans);
  --wl-text-headline-md: 700 16px/1.25 var(--wl-font-sans);
  --wl-text-body-md: 400 14px/1.5 var(--wl-font-sans);
  --wl-text-body-sm: 400 12px/1.45 var(--wl-font-sans);
  --wl-text-label-md: 600 13px/1.25 var(--wl-font-sans);
  --wl-text-data-sm: 500 12px/1.35 var(--wl-font-mono);

  --wl-radius-none: 0;
  --wl-radius-sm: 4px;
  --wl-radius-md: 8px;
  --wl-radius-lg: 12px;
  --wl-radius-xl: 16px;
  --wl-radius-full: 9999px;

  --wl-space-xs: 4px;
  --wl-space-sm: 8px;
  --wl-space-md: 16px;
  --wl-space-lg: 24px;
  --wl-space-xl: 32px;
  --wl-space-xxl: 48px;

  --wl-sidebar-width: 240px;
  --wl-content-max: 1400px;

  --wl-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --wl-shadow-2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
  --wl-shadow-3: 0 8px 24px rgba(15, 23, 42, 0.10);
}

[data-theme="dark"] {
  --wl-color-background: #0b1220;
  --wl-color-background-soft: #0f1728;
  --wl-color-surface: #121a2b;
  --wl-color-surface-muted: #0e1629;
  --wl-color-border: #1f2a40;
  --wl-color-border-strong: #334155;
  --wl-color-text: #e5ecf6;
  --wl-color-text-muted: #8292ac;
  --wl-color-text-soft: #5b6a84;
  --wl-color-accent: #38d1f0;
}