/* ===== Design Tokens =====
   Single source of truth for all visual values.
   Every component/view must reference these variables instead of hardcoded values.
*/

:root {
  /* ---- Color Palette ---- */
  --color-primary: #3b82f6;
  --color-primary-light: #eff6ff;
  --color-primary-dark: #1d4ed8;

  --color-success: #22c55e;
  --color-success-light: #f0fdf4;
  --color-success-dark: #15803d;

  --color-warning: #f59e0b;
  --color-warning-light: #fffbeb;
  --color-warning-dark: #b45309;

  --color-danger: #ef4444;
  --color-danger-light: #fef2f2;
  --color-danger-dark: #b91c1c;

  /* ---- Surfaces & Backgrounds ---- */
  --bg-page: #f3f7fc;
  --bg-surface: rgba(255, 255, 255, 0.94);
  --bg-sidebar: rgba(255, 255, 255, 0.92);
  --bg-subtle: rgba(15, 93, 216, 0.06);

  /* ---- Text ---- */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;

  /* ---- Borders ---- */
  --border-default: rgba(86, 108, 138, 0.12);
  --border-hover: rgba(37, 99, 235, 0.28);

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Border Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 30px rgba(30, 49, 78, 0.08);

  /* ---- Typography ---- */
  --font-sans: 'PingFang SC', 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;

  /* ---- Breakpoints (for reference, not used as CSS variables directly) ---- */
  --bp-lg: 1200px;
  --bp-md: 900px;
  --bp-sm: 640px;
}