:root {
  --color-dark-400: #0d0d0d;
  --color-dark-300: #1f1f1f;
  --color-dark-200: #343434;
  --color-dark-150: #a3a3a6;
  --color-dark-100: #c8c8cc;
  --color-dark-50: #cfcfcf;
  --color-dark-10: #eeeded;
  --color-dark-5: #fdfcfb;
  --color-white: #ffffff;

  --color-vivid-blue-400: #0008d9;
  --color-vivid-blue-300: #0006d6;
  --color-vivid-blue-200: #000bff;
  --color-sky-blue: #a9d5f5;
  --color-mist-pink: #ffcefb;
  --color-neon-pink: #ff72f3;
  --color-signal-red: #ff0004;

  --font-sans: Arial, Helvetica, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: "Courier New", monospace;

  --radius-button: 7px;
  --radius-card: 8px;
  --radius-panel: 8px;

  --layout-xl: 1400px;
  --layout-lg: 1240px;
  --layout-md: 1120px;
  --layout-sm: 640px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;

  --shadow-soft: 0 20px 70px rgba(13, 13, 13, 0.08);
  --header-height: 3.6rem;
}