:root {
  --navy: #0B2A4A;
  --navy-700: #123A63;
  --navy-100: #E6ECF3;
  --blue: #1F6FEB;
  --blue-700: #1858BE;
  --blue-100: #E3EEFF;
  --teal: #0F9D8A;
  --teal-100: #DDF5F1;
  --amber: #D98E04;
  --amber-100: #FFF3D6;
  --red: #C2410C;
  --red-100: #FDE8E0;
  --gray-50: #F7F7F5;
  --gray-100: #EFEFEC;
  --gray-200: #E2E2DE;
  --gray-300: #C9C9C4;
  --gray-500: #7A7A74;
  --gray-700: #4A4A46;
  --gray-900: #1F1F1D;
  --white: #FFFFFF;

  --bg: var(--gray-50);
  --surface: var(--white);
  --text: var(--gray-900);
  --muted: var(--gray-500);
  --border: var(--gray-200);

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --shadow-lg: 0 10px 30px rgba(11, 42, 74, .18);

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

  --font: "Noto Sans Thai", "Sarabun", "Leelawadee UI", "Thonburi", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size: 16px;
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --touch: 44px;
}