@layer legacy {
:root {
  /* Colors — single source of truth for global color tokens (typography.css keeps only type-specific tokens) */
  --primary-color: #ff2800;
  --color-primary: #ff2800;
  --beautiful-blue: #2563eb;

  --secondary-color: #1f2937; /* Dark gray */
  --background-color: #f3f4f6; /* Light gray */
  --background-color-variant-2: #f0ede8; /* Dark gray for dark mode */
  --text-color: #111827; /* Near black */
  --light-text-color: #f1f5f9; /* Light text for dark mode */

  /* Green scale — OKLCH, constant hue (162.5, matched to the old #10b981 accent),
     chroma tapered per step to stay inside the sRGB gamut boundary rather than
     clipping (see https://www.smashingmagazine.com/2024/10/interview-bjorn-ottosson-creator-oklab-color-space/) */
  --green-50: oklch(97% 0.04 162.5);
  --green-100: oklch(94% 0.084 162.5);
  --green-200: oklch(88% 0.176 162.5);
  --green-300: oklch(80% 0.16 162.5);
  --green-400: oklch(72% 0.144 162.5);
  --green-500: oklch(69.6% 0.139 162.5); /* ≈ #10b981 */
  --green-600: oklch(60% 0.12 162.5);
  --green-700: oklch(50% 0.1 162.5);
  --green-800: oklch(41% 0.082 162.5);
  --green-900: oklch(34% 0.068 162.5);
  --green-950: oklch(26% 0.052 162.5);

  --accent-color: var(--green-500); /* Green for buttons, etc. */

  /* Spacing — single source of truth for the full scale (see typography.css for font tokens) */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 3rem; /* 48px */
  --spacing-xl: 3.5rem; /* 56px */
  --spacing-2xl: 4.5rem; /* 72px */

  --color-grey-light: #dddddd;

  --primary-text-color: #111827;
  --primary-text-color-inverse: #ffffff;
  --secondary-text-color: #555555;

  --padding-extra-large: 3rem;
  --padding-large: 2rem;
  --padding: 1rem;
  --padding-small: 0.5rem;

  --margin-large: 3rem;
  --margin-medium: 2rem;
  --margin-small: 1rem;

  --margin-bottom-list: 3rem;
  --margin-bottom-list-item: 1rem;
  --margin-bottom-list-item-large: 3rem;

  --height-default: 50px;

  --scrollbar-needed-padding: 1rem;
}
}