:root { --color-primary: #d60b51;
 --color-secondary: #1e4d8c;
 --color-dark: #020426;
 --color-white: #ffffff;
 --color-light-gray: #f6f6f6;
 --color-dark-gray: #d9d9d9;
 --color-danger: #ca0b00;

 --space-1: 0.25rem; /* 4px */
 --space-2: 0.5rem; /* 8px */
 --space-3: 0.75rem; /* 12px */
 --space-4: 1rem; /* 16px */
 --space-5: 1.5rem; /* 24px */
 --space-6: 2rem; /* 32px */
 --space-7: 2.5rem; /* 40px */
 --space-8: 3rem; /* 48px */
 --space-9: clamp(2.5rem, 5vw, 4rem); /* 40px → 64px */
 --space-10: clamp(3rem, 6vw, 5rem); /* 48px → 80px */
 --space-11: clamp(3.75rem, 8vw, 6.25rem); /* 60px → 100px */
 --space-12: clamp(4rem, 9vw, 8rem); /* 64px → 128px */
 --space-13: clamp(3.75rem, 11vw, 10rem); /* 60px → 160px */
 --space-14: clamp(3.75rem, 12.5vw, 11.25rem); /* 60px → 180px */

  /* semantic aliases */
 --space-section: var(--space-13);
 --space-hero: var(--space-14);

 --text-xs: 0.75rem; /* 12px */
 --text-sm: 0.875rem; /* 14px */
 --text-base: 1rem; /* 16px */
 --text-md: 1.25rem; /* 20px */
 --text-lg: 1.5rem; /* 24px */
 --text-xl: 2.5rem; /* 40px */
 --text-2xl: 4rem; /* 64px */
 --text-3xl: 5rem; /* 80px */

  /* Semantic aliases - headings */
 --text-h1: var(--text-2xl); /* 50px */
 --text-h2: var(--text-xl); /* 40px */
 --text-h3: var(--text-lg); /* 24px */
 --text-h4: var(--text-base); /* 16px */

  /* Semantic aliases - UI */
 --text-label: var(--text-sm); /* 14px - hero label, button */
 --text-label-small: var(--text-xs); /* 12px - section label */
 --text-signature: var(--text-base); /* 16px */
 --text-faq-title: var(--text-md); /* 20px */

  /* Semantic aliases - numbers */
 --text-number-big: var(--text-3xl); /* 80px */
 --text-number-big-label: var(--text-lg); /* 24px */
 --text-number-small: var(--text-xl); /* 40px */
 --text-number-small-label: var(--text-sm); /* 14px */ }