:root {
    --color-scale-black: #010409;
    --color-scale-white: #ffffff;

    --color-scale-white-transparent-7: #ffffffbc;

    --color-scale-gray-0: #f0f6fc;
    --color-scale-gray-1: #c9d1d9;
    --color-scale-gray-2: #b1bac4;
    --color-scale-gray-3: #8b949e;
    --color-scale-gray-4: #6e7681;
    --color-scale-gray-5: #484f58;
    --color-scale-gray-6: #30363d;
    --color-scale-gray-7: #21262d;
    --color-scale-gray-8: #161b22;
    --color-scale-gray-9: #0d1117;

    --color-scale-gray-0-transparent-10: #f0f6fc1a;
    --color-scale-gray-4-transparent-40: #6e768166;
    --color-scale-gray-8-transparent-50: #161b2280;
    --color-scale-gray-9-transparent-0: #0d111700;

    --color-scale-purple-0: #eddeff;
    --color-scale-purple-1: #e2c5ff;
    --color-scale-purple-2: #d2a8ff;
    --color-scale-purple-3: #bc8cff;
    --color-scale-purple-4: #a371f7;
    --color-scale-purple-5: #8957e5;
    --color-scale-purple-6: #6e40c9;
    --color-scale-purple-7: #553098;
    --color-scale-purple-8: #3c1e70;
    --color-scale-purple-9: #271052;

    --color-scale-purple-4-transparent-06: #a371f70f;

    --color-canvas-default: var(--color-scale-gray-9);
    --color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0);
    --color-canvas-subtle: var(--color-scale-gray-8);
    --color-canvas-subtle-transparent: var(--color-scale-gray-4-transparent-40);

    --color-border-default: var(--color-scale-gray-6);
    --color-border-muted: var(--color-scale-gray-7);

    --color-header-bg-default: var(--color-scale-gray-8);
    --color-header-bg-transparent: var(--color-scale-gray-8-transparent-5);
    --color-header-text: var(--color-scale-white-transparent-7);

    --color-btn-text: var(--color-scale-gray-1);
    --color-btn-bg: var(--color-scale-gray-7);
    --color-btn-border: var(--color-scale-gray-0-transparent-1);
    --color-btn-hover-bg: var(--color-scale-gray-6);
    --color-btn-hover-border: var(--color-scale-gray-3);
    --color-btn-active-border: var(--color-scale-gray-5);

    --color-fg-default: var(--color-scale-gray-1);
    --color-fg-muted: var(--color-scale-gray-3);
    --color-fg-subtle: var(--color-scale-gray-4);
    --color-fg-on-emphasis: var(--color-scale-white);
    --color-text-hover: var(--color-fg-muted);

    --color-accent-fg: var(--color-scale-purple-4);

    --color-text-link: var(--color-accent-fg);
    --base-text-weight-semibold: 600;
    --font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
    font-family: "Roboto", arial, sans-serif;
    font-size: 16px;
}