:root {
    --background: linear-gradient(0deg, #ffffff 60%, #eaffdc);
    --foreground: #30362a;

    --list-background: #f5fff0;

    --item-background: #e4ffde;
    --item-border: 4px solid #30362a;

    --button-background: #30362a;
    --button-background-hover: #21241d;
    --button-foreground: #fff;

    --input-background: #fff;
    --input-foreground: #30362a;
    --input-placeholder-foreground: #888;
    --input-border: 2px solid #30362a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #18191b;
        --foreground: #ffffff;

        --list-background: #302e4d;

        --item-background: #2d2b36;
        --item-border: 4px solid #1e1c23;

        --button-background: #d3ffa0;
        --button-background-hover: #afe077;
        --button-foreground: #000000;

        --input-background: #222;
        --input-foreground: #d3ffa0;
        --input-placeholder-foreground: #555;
        --input-border: 2px solid #d3ffa0;

        --pad: 32px;
    }
}