:root {
    /* Colors */
    --color-black: #010101;
    /* Existing --first-color */
    --color-white: #ffffff;
    --color-light: #f5f5f5;
    /* Existing --second-color */
    --color-accent: #ff0000;
    /* Existing --third-color */
    --color-grey-medium: #929292;
    /* Existing --fourth-color */
    --color-grey-icon: #E5E5E5;
    /* Existing --icon-color */
    --color-grey-light: #f0f0f0;
    --color-grey-light-alt: #e0e0e0;
    --color-grey-text: #c7c7c7;
    --color-grey-text-alt: #ccc;
    --color-grey-dark: #444444;
    --color-grey-dark-alt: #555;
    --color-grey-darker: #333;
    --color-grey-darkest: #222;
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-20: rgba(255, 255, 255, 0.2);
    --color-white-alpha-25: rgba(255, 255, 255, 0.25);

    /* Fonts */
    --font-logo: logoFont, sans-serif;
    /* Assuming logoFont is defined via @font-face */
    --font-primary: 'Manrope', sans-serif;
    /* Assuming this is the primary based on other files? Need confirmation */
    --font-secondary: 'Epilepsy', sans-serif;
    --font-manrope: 'Manrope', sans-serif;
    --font-epilepsy: 'Epilepsy', sans-serif;
    /* Font Sizes */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */
    --text-6xl: 3.75rem;
    /* 60px */
    --text-7xl: 4.5rem;
    /* 72px */
    --text-8xl: 6rem;
    /* 96px */
    --text-9xl: 8rem;
    /* 128px */
    /* Specific sizes */
    --text-logo-vw: 20vw;
    --text-clamp-big: clamp(var(--text-3xl), 6vw, var(--text-6xl));

    /* Spacing (using t-shirt sizes based on common values) */
    --space-xxs: 6px;
    --space-xs: 8px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 30px;
    --space-xxl: 50px;
    --space-xxxl: 70px;
    --space-xxxxl: 100px;
    --space-block: 150px;
    /* Specific paddings/margins */
    --padding-horizontal-page: 8vw;
    --padding-accordion-btn: 1.5rem 1.25rem;
    --padding-table-cell: 18px 12px;
    --padding-tag: 5px 10px;
    --padding-contact-link: 8px 15px;
    --padding-stage-item: 20px;
    --padding-stage-header: 1rem 1rem;
    --padding-mobile-table-cell: 2px 0;
    --padding-mobile-stage-item: 15px;
    /* Gaps */
    --gap-xs: 8px;
    --gap-sm: 10px;
    --gap-md: 15px;
    --gap-lg: 20px;
    --gap-xl: 30px;

    /* Borders */
    --border-radius-contact: 20px;
    --border-light: 1px solid var(--color-white-alpha-10);
    --border-medium: 1px solid var(--color-white-alpha-20);
    --border-dark: 1px solid var(--color-grey-darker);
    --border-grey: 1px solid var(--color-grey-medium);
    --border-white: 1px solid var(--color-light);
    --border-grey-light: 1px solid var(--color-grey-text-alt);

    /* Transitions */
    --transition-short: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-long: 0.5s ease;
    --transition-opacity: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
    --transition-opacity-hover: opacity 0.25s ease-in-out, visibility 0s linear 0s;
    --transition-table-row: background-color 0.25s ease-out, color 0.25s ease-out;
    --transition-stage-content: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out;

    /* Z-Indices */
    --z-index-content: 1;
    --z-index-table-preview: 10;
    --z-index-gallery: 950;

    /* Other */
    --line-height-base: 1.4;
    --text-indent-big: 5em;

    /* Semantic Spacing */
    --padding-container-horizontal: var(--space-xl);
    /* Was used for general horizontal padding */
    --padding-section-vertical: var(--space-xl);
    /* Was used for vertical padding on sections like #case-block */
    --padding-element-vertical: var(--space-lg);
    /* General vertical padding for smaller elements */
    --padding-element-bottom: var(--space-lg);
    /* General bottom padding */
    --padding-accordion-header: var(--space-xl);
    /* Specific for accordion */
    --padding-accordion-body: var(--space-xl);
    /* Specific for accordion */

    --margin-section-vertical: var(--space-xl);
    /* Was used for vertical margins on sections like #contacts-grid-container */
    --margin-section-bottom: var(--space-block);
    /* Common bottom margin for large blocks/sections */
    --margin-element-top: var(--space-xxxl);
    /* General top margin */
    --margin-footer-separator: var(--space-lg);
    /* Margin above footer bottom */

    --gap-section-items: var(--space-xl);
    /* Gap within agency blocks */

    --height-header-footer: var(--space-xxxl);
    /* Height for header/footer */
    --height-carousel-image: var(--space-xxxxl);
    /* Height for agency carousel images */

    --text-title: clamp(var(--text-4xl), 6vw, var(--text-6xl));
}