
@media (prefers-color-scheme: dark) {
    body:not([theme]) {
        --main-background: hsl(220, 9%, 13%);
        --main-foreground: hsl(0, 0%, 98%);

        --card-background: hsl(197, 55%, 20%);
        --card-foreground: hsl(0, 0%, 100%);
        --card-accent: hsl(197, 68%, 34%);
        --card-progress: hsl(197, 52%, 12%);

        --chip-background: #2A3DA0;
        --chip-foreground: #fafafa;

        --interface-200: #0C1B68;
        --interface-300: #182983;
        --interface-400: #2A3DA0;
        --interface-600: #4555AA;
        --interface-700: #6977C1;
        --interface-800: #98a4dd;
        --interface-900: #d6dbf5;
        --loudness-range-stroke: var(--interface-900);

        --momentary-200: #04465F;
        --momentary-300: #0D5A78;
        --momentary-400: #1C7293;
        --momentary-500: #36809C;
        --momentary-600: #5B9DB6;
        --momentary-stroke: var(--momentary-400);

        --short-term-200: #974F00;
        --short-term-300: #BF6A0D;
        --short-term-400: #EA8B24;
        --short-term-500: #F9A84F;
        --short-term-600: #FFBF79;
        --short-term-700: hsl(31, 100%, 82%);
        --short-term-800: hsl(31, 100%, 90%);
        --short-term-stroke: var(--short-term-800);

        --integrated-100: #59440d;
        --integrated-200: #976C00;
        --integrated-300: #BF8C0D;
        --integrated-400: #EAB124;
        --integrated-500: #F9C84F;
        --integrated-600: #FFD879;
        --integrated-700: #ffe5a3;
        --integrated-800: #ffefc7;
        --integrated-900: #fff8e5;
        --integrated-stroke: var(--integrated-400);

        --true-peak-200: hsl(25, 100%, 30%);
        --true-peak-300: hsl(25, 87%, 40%);
        --true-peak-400: hsl(25, 83%, 53%);
        --true-peak-500: hsl(25, 93%, 64%);
        --true-peak-600: hsl(25, 100%, 71%);
        --true-peak-700: hsl(25, 100%, 82%);
        --true-peak-800: hsl(25, 100%, 90%);
        --true-peak-stroke: var(--true-peak-500);

        --border-radius-section: 0.25rem;
        --border-radius-button: 1000px;

        --button-color-border: var(--integrated-400);
        --button-color-outline: var(--interface-700);
        --button-color-background: var(--integrated-100);
        --button-color-background-active: var(--integrated-300);
        --button-color-text: var(--integrated-900);

        --opacity-dimmed: 0.6;
    }
}
