:root {
  --font-thai: "IBM Plex Sans Thai", "Leelawadee UI", sans-serif;
  --font-display: "Outfit", "IBM Plex Sans Thai", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --navy-950: hsl(220 48% 5%);
  --navy-900: hsl(219 45% 8%);
  --navy-850: hsl(218 40% 10%);
  --navy-800: hsl(218 36% 13%);
  --navy-700: hsl(217 30% 18%);
  --navy-600: hsl(216 24% 26%);
  --navy-500: hsl(215 18% 38%);

  --text-strong: hsl(210 40% 96%);
  --text: hsl(213 25% 85%);
  --text-muted: hsl(215 16% 62%);
  --text-faint: hsl(216 14% 46%);

  --gold-300: hsl(44 80% 72%);
  --gold-400: hsl(43 70% 60%);
  --gold-500: hsl(41 62% 50%);
  --gold-700: hsl(38 55% 30%);
  --gold-gradient: linear-gradient(135deg, var(--gold-300), var(--gold-500) 55%, var(--gold-700));

  --blue-400: hsl(214 85% 66%);
  --blue-500: hsl(216 78% 56%);
  --green-400: hsl(152 52% 52%);
  --green-900: hsl(152 45% 14%);
  --red-400: hsl(356 72% 64%);
  --red-900: hsl(356 45% 16%);
  --amber-400: hsl(38 90% 60%);
  --amber-900: hsl(38 55% 14%);

  --zone-1: hsl(217 90% 61%);
  --zone-2: hsl(45 93% 47%);
  --zone-3: hsl(292 84% 61%);
  --zone-4: hsl(160 84% 39%);

  --surface: hsl(218 38% 11% / 0.82);
  --surface-raised: hsl(218 34% 14% / 0.9);
  --line: hsl(216 30% 24% / 0.7);
  --line-gold: hsl(43 60% 55% / 0.35);

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

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-panel: 0 24px 48px -24px hsl(220 60% 2% / 0.8), 0 0 0 1px var(--line);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --speed: 0.18s;

  --sidebar-width: 264px;
  --header-height: 72px;
  color-scheme: dark;
}