/* CSS is currently being refactored and may have breaking changes in the future */

:root {
    --rt-content-size: 960px;
    --rt-border-radius: 5px;
    --rt-layout-padding: 15px;
    --rt-layout-radius: var(--rt-border-radius);
    --rt-ui-radius: var(--rt-border-radius);

    --rt-ui-height: 30px;

    --rt-border-muted: var(--color-gray-100);
    --rt-border-subtle: var(--color-gray-300);
    --rt-border-strong: var(--color-gray-500);
    --rt-layout-border: var(--rt-border-subtle);
    --rt-ui-border: var(--rt-border-strong);

    --rt-bg-muted: var(--color-gray-25);
    --rt-bg-subtle: var(--color-gray-100);
    --rt-bg-surface: var(--color-gray-150);
    --rt-bg-strong: var(--color-gray-200);

    --rt-color-link: var(--color-purple-800);
    --rt-color-background: var(--color-white);

    --rt-text-primary: var(--color-black);
    --rt-text-secondary: var(--color-gray-700);
    --rt-text-tertiary: var(--color-gray-400);
    --rt-text-inverse: var(--color-white);

    --rt-z-dropdown: 100;
    --rt-z-modal: 200;
    --rt-z-sensitive: 300;
    --rt-z-toast: 400;
}