:root {
    --color-bg-bottom: #fafafa;
    --color-bg-middle: #fdfdfd;
    --color-bg-top: #ffffff;
    --shadow-md: 0 8px 13px -3px rgb(0 0 0 / 0.1), 0 2px 4px -4px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --color-primary-light: oklch(0.67 0.15 139.1);
    --color-primary: oklch(0.57 0.15 139.1);
    --color-primary-dark: oklch(0.47 0.15 139.1);

    --color-secondary-light: oklch(0.9067 0.3479 78.88);
    --color-secondary: oklch(0.7667 0.1779 78.88);
    --color-secondary-dark: oklch(0.5667 0.1779 78.88);

    --color-text: oklch(0.3 0 0);
    --color-text-muted: oklch(0.7 0 0);
    --color-text-light: oklch(0.95 0 0);

    --color-error: #bd0101;
    --color-danger: #bd0101;
    --color-light: white;
    --border-radius: 10px;
    --border-radius-offset: -2px;
    --max-layout-width: 70rem;
    --layout-padding: calc((100vw - var(--max-layout-width)) / 2);
    --gap: 2rem;

    color: var(--color-text);
}