@charset "UTF-8";

body, body[data-theme=default], body[data-theme=blue], body[data-theme=yellow], body[data-theme=beige], body[data-theme=green] {
    --surface-gray-50: #f5f5f5;
    --surface-gray-100: #ebebeb;
    --surface-gray-400: #adadad;
    --surface-gray-500: #808080;
    --surface-gray-900: #191919;
    --surface-bw-white: #fff;
    --surface-gray-300: #ccc;
    --sd8: rgba(0, 0, 0, .08);
    --outline-black-8: rgba(0, 0, 0, .08);
    --sheet-background-gray-50: #f5f5f5;
    --sheet-background-bw-white: #fff;
    --background-gray-50: #f5f5f5;
    --background-gray-100: #ebebeb;
    --background-bw-white: #fff;
    --on-image-black-60: rgba(0, 0, 0, .6);
    --on-image-black-90: rgba(0, 0, 0, .9);
    --on-image-bw-white: #fff;
    --primary-red-500: #e5353e;
}

    body[data-theme=blue] {
        --surface-gray-50: rgba(0, 0, 0, .08);
        --surface-gray-100: rgba(0, 0, 0, .12);
        --surface-gray-400: rgba(0, 0, 0, .36);
        --surface-gray-500: rgba(0, 0, 0, .48);
        --surface-gray-900: rgba(0, 0, 0, .9);
        --surface-bw-white: rgba(0, 0, 0, .04);
        --surface-gray-300: rgba(0, 0, 0, .32);
        --sheet-background-gray-50: #dcebef;
        --sheet-background-bw-white: #edf5f7;
        --background-gray-50: #dcebef;
        --background-gray-100: #cedde1;
        --background-bw-white: #edf5f7;
    }

    body[data-theme=yellow] {
        --surface-gray-50: rgba(0, 0, 0, .08);
        --surface-gray-100: rgba(0, 0, 0, .12);
        --surface-gray-400: rgba(0, 0, 0, .36);
        --surface-gray-500: rgba(0, 0, 0, .48);
        --surface-gray-900: rgba(0, 0, 0, .9);
        --surface-bw-white: rgba(0, 0, 0, .04);
        --surface-gray-300: rgba(0, 0, 0, .32);
        --sheet-background-gray-50: #efe2c0;
        --sheet-background-bw-white: #f4ecd1;
        --background-gray-50: #efe2c0;
        --background-gray-100: #e3d0a1;
        --background-bw-white: #f4ecd1;
    }

    body[data-theme=beige] {
        --surface-gray-50: rgba(0, 0, 0, .08);
        --surface-gray-100: rgba(0, 0, 0, .12);
        --surface-gray-400: rgba(0, 0, 0, .36);
        --surface-gray-500: rgba(0, 0, 0, .48);
        --surface-gray-900: rgba(0, 0, 0, .9);
        --surface-bw-white: rgba(0, 0, 0, .04);
        --surface-gray-300: rgba(0, 0, 0, .32);
        --sheet-background-gray-50: #f5f1e8;
        --sheet-background-bw-white: #faf9f4;
        --background-gray-50: #f5f1e8;
        --background-gray-100: #ebe6da;
        --background-bw-white: #faf9f4;
    }

    body[data-theme=green] {
        --surface-gray-50: rgba(0, 0, 0, .08);
        --surface-gray-100: rgba(0, 0, 0, .12);
        --surface-gray-400: rgba(0, 0, 0, .36);
        --surface-gray-500: rgba(0, 0, 0, .48);
        --surface-gray-900: rgba(0, 0, 0, .9);
        --surface-bw-white: rgba(0, 0, 0, .04);
        --surface-gray-300: rgba(0, 0, 0, .32);
        --sheet-background-gray-50: #e0eee1;
        --sheet-background-bw-white: #ebfaeb;
        --background-gray-50: #e0eee1;
        --background-gray-100: #c9e0cb;
        --background-bw-white: #ebfaeb;
    }

    body[data-theme=dark] {
        --surface-gray-50: rgba(255, 255, 255, .08);
        --surface-gray-100: rgba(255, 255, 255, .12);
        --surface-gray-400: rgba(255, 255, 255, .36);
        --surface-gray-500: rgba(255, 255, 255, .4);
        --surface-gray-900: rgba(255, 255, 255, .6);
        --surface-bw-white: rgba(255, 255, 255, .08);
        --surface-gray-300: rgba(255, 255, 255, .32);
        --sd8: rgba(255, 255, 255, .08);
        --sheet-background-gray-50: #191919;
        --sheet-background-bw-white: #1f1f1f;
        --outline-black-8: rgba(255, 255, 255, .12);
        --background-gray-50: #111;
        --background-gray-100: #0a0a0a;
        --background-bw-white: #191919;
        --on-image-black-60: rgba(0, 0, 0, .6);
        --on-image-black-90: rgba(0, 0, 0, .9);
        --on-image-bw-white: rgba(255, 255, 255, .9);
        --primary-red-500: #ff4d55;
    }