:root {
  /* Raw color tokens */
  --r-forest: #021615;
  --r-forest-raise: #091d1c;
  --r-forest-sink: #020f0a;
  --r-forest-shine: #0c5d51;
  --r-forest-shade: #272e2e;
  --r-saffron: #ecbc2a;
  --r-saffron-fade-partial: rgba(236, 188, 42, 0.4);
  --r-saffron-fade: rgba(236, 188, 42, 0.2);
  --r-black: #000;
  --r-white: #fff;
  --r-white-off: #c0c0c0;

  /* Semantic color tokens */
  --color-bg-main: var(--r-forest);
  --color-bg-raise: var(--r-forest-raise);
  --color-bg-sink: var(--r-forest-sink);
  --color-bg-shine: var(--r-forest-shine);
  --color-bg-shade: var(--r-forest-shade);
  --color-surface: var(--r-black);
  --color-accent: var(--r-saffron);
  --color-accent-soft: var(--r-saffron-fade);
  --color-accent-medium: var(--r-saffron-fade-partial);
  --color-text-primary: var(--r-white);
  --color-text-secondary: var(--r-white-off);
  --color-text-inverse: var(--r-black);

  /* Border-Radius tokens */
  --radius-small: 4px;
  --radius-base: 8px;
  --radius-large: 12px;

  /* Spacing tokens */
  --space-100: 2px;
  --space-200: 4px;
  --space-300: 8px;
  --space-400: 12px;
  --space-500: 16px;
  --space-600: 20px;
  --space-700: 24px;
  --space-800: 32px;
  --space-900: 36px;
  --space-block-100: 20px;
  --space-block-200: 24px;
  --space-block-300: 28px;
  --space-block-400: 32px;
  --space-block-500: 40px;
  --space-block-600: 48px;
  --space-block-700: 64px;
  --space-block-800: 80px;
  --space-block-900: 120px;

  /* Margin tokens */
  --margin-header-mobile: 16px;
  --margin-header-desktop: 60px;
  --margin-mobile-500: 24px;
  --margin-bottom-500: 400px;

  /* Breakpoints */
  --breakpoint-desktop: 1024px;

}