:root {
    interpolate-size: allow-keywords;
     /* Colors */
     --color-white: #ffffff;
     --color-gray: #d5d5d5;
     --color-background: #f8f6f3;
     --color-text: #1e4854;
     --color-text-secondary: #26ac73;
     --color-button: #26ac73;
     --color-button-text: #ffffff;
     --color-link: #26ac73;
     --color-line: #d1d958;

     /* Typography */
     --font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --font-family-heading: 'Mochiy Pop One', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --font-size-sm: 0.875rem;
     --font-size-base: 1rem;
     --font-size-base2: 1.125rem;
     --font-size-md: 1.25rem;
     --font-size-lg: 2rem;
     --font-size-xl: 2.5rem;
     --font-size-2xl: 3rem;
     --font-size-3xl: 4rem;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --letter-spacing-sm: -0.01em;
     --letter-spacing-md: -0.03em;
     
     /* Spacing */
     --spacing-xs: 0.5rem;
     --spacing-sm: 1rem;
     --spacing-base: 1.25rem;
     --spacing-md: 1.5rem;
     --spacing-lg: 2rem;
     --spacing-xl: 3rem;
     --spacing-2xl: 4rem;
     --spacing-3xl: 6rem;
     --spacing-4xl: 8rem;
     
     /* Border Radius */
     --radius-sm: 0.75rem;
     --radius-md: 1rem;
     --radius-lg: 1.5rem;
     --radius-xl: 2rem;
     --radius-full: 9999px;
     
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
     
     /* Transitions */
     --transition-base: 0.3s ease;
     --transition-fast: 0.15s ease;

     /* Layout */
     --max-width-container: 82rem;
     --max-width-container-secondary: 86rem;
     --max-width-container-mobile: 31.25rem;
}

/* Theme variations */
.secondary {
     --color-background: #26ac73;
     --color-text: #ffffff;
     --color-text-secondary: #ffffff;
     --color-button: #d1d958;
     --color-button-text: #1e4854;
     --color-link: #ffffff;
}

.terciary {
     --color-background: #6fa57e;
     --color-text: #ffffff;
     --color-text-secondary: #ffffff;
     --color-button: #ffffff;
     --color-button-text: #ffffff;
     --color-link: #ffffff;
}

.quaternary {
     --color-background: #97c797;
     --color-text: #1e4854;
     --color-text-secondary: #08a05f;
     --color-button: #08a05f;
     --color-button-text: #ffffff;
     --color-link: #08a05f;
}