:root {
    --wp--preset--color--primary-100: #f9f7fb;
    --wp--preset--color--on-primary-100: #00205B;
    --wp--preset--color--primary-200: #f3eef7;
    --wp--preset--color--on-primary-200: #00205B;
    --wp--preset--color--primary-300: #e0d3ee;
    --wp--preset--color--on-primary-300: #00205B;
    --wp--preset--color--primary-400: #c7b2de;
    --wp--preset--color--on-primary-400: #00205B;
    --wp--preset--color--primary-500: #6558b1;
    --wp--preset--color--on-primary-500: #ffffff;
    --wp--preset--color--primary-600: #2f3279;
    --wp--preset--color--on-primary-600: #ffffff;
    --wp--preset--color--primary-700: #00205b;
    --wp--preset--color--on-primary-700: #ffffff;
    --wp--preset--color--primary-800: #001a49;
    --wp--preset--color--on-primary-800: #ffffff;
    --wp--preset--color--primary: #6558b1;
    --wp--preset--color--on-primary: #ffffff;
    --wp--preset--color--primary-hover: #2f3279;
    --wp--preset--color--on-primary-hover: #ffffff;
    --wp--preset--color--primary-active: #00205b;
    --wp--preset--color--on-primary-active: #ffffff;
    --wp--preset--color--secondary-100: #f9f7fb;
    --wp--preset--color--on-secondary-100: #00205B;
    --wp--preset--color--secondary-200: #f3eef7;
    --wp--preset--color--on-secondary-200: #00205B;
    --wp--preset--color--secondary-300: #e0d3ee;
    --wp--preset--color--on-secondary-300: #00205B;
    --wp--preset--color--secondary-400: #c7b2de;
    --wp--preset--color--on-secondary-400: #00205B;
    --wp--preset--color--secondary-500: #6558b1;
    --wp--preset--color--on-secondary-500: #ffffff;
    --wp--preset--color--secondary-600: #2f3279;
    --wp--preset--color--on-secondary-600: #ffffff;
    --wp--preset--color--secondary-700: #00205b;
    --wp--preset--color--on-secondary-700: #ffffff;
    --wp--preset--color--secondary-800: #001a49;
    --wp--preset--color--on-secondary-800: #ffffff;
    --wp--preset--color--secondary: #c7b2de;
    --wp--preset--color--on-secondary: #00205B;
    --wp--preset--color--secondary-hover: #6558b1;
    --wp--preset--color--on-secondary-hover: #ffffff;
    --wp--preset--color--secondary-active: #2f3279;
    --wp--preset--color--on-secondary-active: #ffffff;
    --wp--preset--color--accent-100: #f7fbfa;
    --wp--preset--color--on-accent-100: #154734;
    --wp--preset--color--accent-200: #e8f6f2;
    --wp--preset--color--on-accent-200: #154734;
    --wp--preset--color--accent-300: #c7e8e1;
    --wp--preset--color--on-accent-300: #154734;
    --wp--preset--color--accent-400: #a1d6ca;
    --wp--preset--color--on-accent-400: #154734;
    --wp--preset--color--accent-500: #00b388;
    --wp--preset--color--on-accent-500: #11392a;
    --wp--preset--color--accent-600: #008566;
    --wp--preset--color--on-accent-600: #ffffff;
    --wp--preset--color--accent-700: #154734;
    --wp--preset--color--on-accent-700: #ffffff;
    --wp--preset--color--accent-800: #11392a;
    --wp--preset--color--on-accent-800: #ffffff;
    --wp--preset--color--accent: #a1d6ca;
    --wp--preset--color--on-accent: #154734;
    --wp--preset--color--accent-hover: #00b388;
    --wp--preset--color--on-accent-hover: #11392a;
    --wp--preset--color--accent-active: #008566;
    --wp--preset--color--on-accent-active: #ffffff;
    --wp--preset--color--surface-000: #ffffff;
    --wp--preset--color--on-surface-000: #333333;
    --wp--preset--color--surface-100: #f4f5f6;
    --wp--preset--color--on-surface-100: #333333;
    --wp--preset--color--surface-200: #f2f2f2;
    --wp--preset--color--on-surface-200: #333333;
    --wp--preset--color--surface-300: #d7d7d7;
    --wp--preset--color--on-surface-300: #333333;
    --wp--preset--color--surface-400: #b9b9b9;
    --wp--preset--color--on-surface-400: #333333;
    --wp--preset--color--surface-500: #a0a0a0;
    --wp--preset--color--on-surface-500: #333333;
    --wp--preset--color--surface-600: #747678;
    --wp--preset--color--on-surface-600: #333333;
    --wp--preset--color--surface-700: #4d4f53;
    --wp--preset--color--on-surface-700: #ffffff;
    --wp--preset--color--surface-800: #333333;
    --wp--preset--color--on-surface-800: #ffffff;
    --wp--preset--color--surface-900: #121212;
    --wp--preset--color--on-surface-900: #ffffff;
    --wp--preset--color--surface-1000: #d52b1e;
    --wp--preset--color--on-surface-1000: #ffffff;
    --wp--preset--color--surface: #a0a0a0;
    --wp--preset--color--on-surface: #333333;
    --wp--preset--color--surface-hover: #747678;
    --wp--preset--color--on-surface-hover: #333333;
    --wp--preset--color--surface-active: #4d4f53;
    --wp--preset--color--on-surface-active: #ffffff;
    --wp--preset--color--neutral: #f4f5f6;
    --wp--preset--color--on-neutral: #333333;
    --wp--preset--color--text: #333333;
    --wp--preset--color--on-text: #ffffff;
    --wp--preset--color--dark: #121212;
    --wp--preset--color--on-dark: #ffffff;
    --wp--preset--color--error: #d52b1e;
    --wp--preset--color--on-error: #ffffff;
    --wp--preset--color--light: #ffffff;
    --wp--preset--color--on-light: #333333;
}

.primary-100 {
    background-color: var(--wp--preset--color--primary-100);
    color: var(--wp--preset--color--on-primary-100);
}

.primary.ultra-light {
    background-color: var(--wp--preset--color--primary-100);
    color: var(--wp--preset--color--on-primary-100);
}

.primary-200 {
    background-color: var(--wp--preset--color--primary-200);
    color: var(--wp--preset--color--on-primary-200);
}

.primary-300 {
    background-color: var(--wp--preset--color--primary-300);
    color: var(--wp--preset--color--on-primary-300);
}

.primary.light {
    background-color: var(--wp--preset--color--primary-300);
    color: var(--wp--preset--color--on-primary-300);
}

.primary-400 {
    background-color: var(--wp--preset--color--primary-400);
    color: var(--wp--preset--color--on-primary-400);
}

.primary-500 {
    background-color: var(--wp--preset--color--primary-500);
    color: var(--wp--preset--color--on-primary-500);
}

.primary-600 {
    background-color: var(--wp--preset--color--primary-600);
    color: var(--wp--preset--color--on-primary-600);
}

.primary-700 {
    background-color: var(--wp--preset--color--primary-700);
    color: var(--wp--preset--color--on-primary-700);
}

.primary-800 {
    background-color: var(--wp--preset--color--primary-800);
    color: var(--wp--preset--color--on-primary-800);
}

.primary {
    background-color: var(--wp--preset--color--primary-500);
    color: var(--wp--preset--color--on-primary-500);
}

.secondary-100 {
    background-color: var(--wp--preset--color--secondary-100);
    color: var(--wp--preset--color--on-secondary-100);
}

.secondary.ultra-light {
    background-color: var(--wp--preset--color--secondary-100);
    color: var(--wp--preset--color--on-secondary-100);
}

.secondary-200 {
    background-color: var(--wp--preset--color--secondary-200);
    color: var(--wp--preset--color--on-secondary-200);
}

.secondary-300 {
    background-color: var(--wp--preset--color--secondary-300);
    color: var(--wp--preset--color--on-secondary-300);
}

.secondary.light {
    background-color: var(--wp--preset--color--secondary-300);
    color: var(--wp--preset--color--on-secondary-300);
}

.secondary-400 {
    background-color: var(--wp--preset--color--secondary-400);
    color: var(--wp--preset--color--on-secondary-400);
}

.secondary-500 {
    background-color: var(--wp--preset--color--secondary-500);
    color: var(--wp--preset--color--on-secondary-500);
}

.secondary-600 {
    background-color: var(--wp--preset--color--secondary-600);
    color: var(--wp--preset--color--on-secondary-600);
}

.secondary-700 {
    background-color: var(--wp--preset--color--secondary-700);
    color: var(--wp--preset--color--on-secondary-700);
}

.secondary-800 {
    background-color: var(--wp--preset--color--secondary-800);
    color: var(--wp--preset--color--on-secondary-800);
}

.secondary {
    background-color: var(--wp--preset--color--secondary-400);
    color: var(--wp--preset--color--on-secondary-400);
}

.accent-100 {
    background-color: var(--wp--preset--color--accent-100);
    color: var(--wp--preset--color--on-accent-100);
}

.accent.ultra-light {
    background-color: var(--wp--preset--color--accent-100);
    color: var(--wp--preset--color--on-accent-100);
}

.accent-200 {
    background-color: var(--wp--preset--color--accent-200);
    color: var(--wp--preset--color--on-accent-200);
}

.accent-300 {
    background-color: var(--wp--preset--color--accent-300);
    color: var(--wp--preset--color--on-accent-300);
}

.accent.light {
    background-color: var(--wp--preset--color--accent-300);
    color: var(--wp--preset--color--on-accent-300);
}

.accent-400 {
    background-color: var(--wp--preset--color--accent-400);
    color: var(--wp--preset--color--on-accent-400);
}

.accent-500 {
    background-color: var(--wp--preset--color--accent-500);
    color: var(--wp--preset--color--on-accent-500);
}

.accent-600 {
    background-color: var(--wp--preset--color--accent-600);
    color: var(--wp--preset--color--on-accent-600);
}

.accent-700 {
    background-color: var(--wp--preset--color--accent-700);
    color: var(--wp--preset--color--on-accent-700);
}

.accent-800 {
    background-color: var(--wp--preset--color--accent-800);
    color: var(--wp--preset--color--on-accent-800);
}

.accent {
    background-color: var(--wp--preset--color--accent-400);
    color: var(--wp--preset--color--on-accent-400);
}

.surface-000 {
    background-color: var(--wp--preset--color--surface-000);
    color: var(--wp--preset--color--on-surface-000);
}

.surface.light {
    background-color: var(--wp--preset--color--surface-000);
    color: var(--wp--preset--color--on-surface-000);
}

.surface-100 {
    background-color: var(--wp--preset--color--surface-100);
    color: var(--wp--preset--color--on-surface-100);
}

.surface.neutral {
    background-color: var(--wp--preset--color--surface-100);
    color: var(--wp--preset--color--on-surface-100);
}

.surface-200 {
    background-color: var(--wp--preset--color--surface-200);
    color: var(--wp--preset--color--on-surface-200);
}

.surface-300 {
    background-color: var(--wp--preset--color--surface-300);
    color: var(--wp--preset--color--on-surface-300);
}

.surface-400 {
    background-color: var(--wp--preset--color--surface-400);
    color: var(--wp--preset--color--on-surface-400);
}

.surface-500 {
    background-color: var(--wp--preset--color--surface-500);
    color: var(--wp--preset--color--on-surface-500);
}

.surface-600 {
    background-color: var(--wp--preset--color--surface-600);
    color: var(--wp--preset--color--on-surface-600);
}

.surface-700 {
    background-color: var(--wp--preset--color--surface-700);
    color: var(--wp--preset--color--on-surface-700);
}

.surface-800 {
    background-color: var(--wp--preset--color--surface-800);
    color: var(--wp--preset--color--on-surface-800);
}

.surface.text {
    background-color: var(--wp--preset--color--surface-800);
    color: var(--wp--preset--color--on-surface-800);
}

.surface-900 {
    background-color: var(--wp--preset--color--surface-900);
    color: var(--wp--preset--color--on-surface-900);
}

.surface.dark {
    background-color: var(--wp--preset--color--surface-900);
    color: var(--wp--preset--color--on-surface-900);
}

.surface-1000 {
    background-color: var(--wp--preset--color--surface-1000);
    color: var(--wp--preset--color--on-surface-1000);
}

.surface.error {
    background-color: var(--wp--preset--color--surface-1000);
    color: var(--wp--preset--color--on-surface-1000);
}

.surface {
    background-color: var(--wp--preset--color--surface-500);
    color: var(--wp--preset--color--on-surface-500);
}

.neutral {
    background-color: var(--wp--preset--color--neutral);
    color: var(--wp--preset--color--on-neutral);
}

.text {
    background-color: var(--wp--preset--color--text);
    color: var(--wp--preset--color--on-text);
}

.dark {
    background-color: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--on-dark);
}

.error {
    background-color: var(--wp--preset--color--error);
    color: var(--wp--preset--color--on-error);
}

.light {
    background-color: var(--wp--preset--color--light);
    color: var(--wp--preset--color--on-light);
}

