@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 */
  --text-color: #111827; /* Near black */
  --accent-color: #10b981; /* Green for buttons, etc. */
  --light-text-color: #f1f5f9; /* Light text for dark mode */

  /* 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;
}
}