:root {
  /* Color: neutral, serious, low-saturation legal-software palette */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-alt: #fafbfc;
  --color-border: #d9dce1;
  --color-border-strong: #b9bec7;

  --color-text: #1c2126;
  --color-text-muted: #5b6270;
  --color-text-faint: #8b909b;

  --color-primary: #1a3a5c;
  --color-primary-dark: #12293f;
  --color-primary-tint: #e7edf3;

  --color-accent: #0f6e5c;
  --color-accent-tint: #e4f2ee;

  --color-danger: #a3312a;
  --color-danger-tint: #fbeceb;
  --color-warning: #93650f;
  --color-warning-tint: #fdf3e2;
  --color-success: #1c7a4d;
  --color-success-tint: #e6f5ec;
  --color-info: #2a5f8f;
  --color-info-tint: #e8f1f9;

  --font-sans: "Noto Sans Thai", "Leelawadee UI", "Segoe UI", Tahoma, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;

  --line-height-base: 1.65;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 4px;
  --radius-md: 6px;

  --shadow-sm: 0 1px 2px rgba(20, 25, 33, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 25, 33, 0.10);

  --sidebar-width: 240px;
  --topbar-height: 56px;

  --transition-fast: 120ms ease;
}