:root {
    --fg-color-1: #eee;
    --fg-color-2: hsl(40, 30%, 40%);
    --fg-color-3: hsl(40, 100%, 80%);
    --fg-color-4: hsl(210, 50%, 70%);
    --fg-color-5: hsl(40, 100%, 90%);
    --fg-color-6: hsl(0, 0%, 50%);
    --fg-color-7: hsl(320, 60%, 60%);
    --fg-color-8: hsl(40, 100%, 70%);

    --bg-color-1: hsl(320, 20%, 8%);
    --bg-color-2: hsl(320, 30%, 10%);
    --bg-color-3: hsl(320, 20%, 20%);
    --bg-color-4: hsl(320, 20%, 25%);
    --bg-color-5: hsl(320, 30%, 10%);
    --bg-color-6: hsl(210, 20%, 8%);

    --bg-color-7: hsl(210, 60%, 15%);
    --bg-color-8: hsl(210, 60%, 30%);

    --trim-color-1: hsl(220, 20%, 30%);
    --trim-color-2: hsl(40, 50%, 20%);

    --text-color: var(--fg-color-5);
    --text-subtle-color: var(--fg-color-2);
    --text-code-color: var(--fg-color-7);

    --bg-color: var(--bg-color-1);
    --border-color: var(--fg-color-2);

    --navbar-bg-color: var(--bg-color-2);

    --control-bg-color: var(--bg-color-3);
    --control-hover-color: var(--bg-color-4);
    --control-active-color: var(--bg-color-4);

    --link-color-1: var(--fg-color-8);
    --link-color-focus-1: var(--fg-color-5);

    --button-fg-color: var(--fg-color-3);
    --button-bg-color: var(--bg-color-7);
    --button-hover-fg-color: white;
    --button-hover-bg-color: var(--bg-color-8);
    --button-hover-border-color: var(--fg-color-5);
    --button-disabled-fg-color: var(--fg-color-6);
    --button-disabled-bg-color: var(--bg-color-6);
    --button-border-color: var(--border-color);

    --toast-fg-color: var(--text-color);
    --toast-bg-color: var(--bg-color-6);

    --text-input-color: var(--fg-color-1);
    --text-input-bg-color: var(--bg-color-6);
    --text-input-placeholder-color: var(--fg-color-2);
    --text-input-focus-border-color: var(--fg-color-3);

    --chatbox-color-user: var(--fg-color-4);
    --chatbox-color-assistant: var(--fg-color-5);
}