:root {
    /* Auto select color scheme */
    color-scheme: light dark;
    --bg: light-dark(rgb(247, 247, 245), rgb(31, 31, 31));
    --bg-header: rgb(from var(--bg) r g b / 0.87);
    --surface: light-dark(#ffffff, #000000);
    --text: light-dark(#1f1f1f, #ffffff);
    --link: var(--accent);
    --muted: light-dark(#666666, #bbbbbb);
    --border: light-dark(#aaaaaa, #999999);
    --accent: light-dark(#304ac7, #5793f0);
    --accent-hover: light-dark(#304ac7, #4075c8);
    --accent-text: light-dark(white, white);
    --accent-hover-text: var(--accent-text);
    --success: light-dark(#5a9b68, #78d08a);
    --success-hover: light-dark(#4a8b58, #68c07a);
    --success-text: light-dark(white, black);
    --success-hover-text: var(--success-text);
    --danger: light-dark(#dc3545, #dc3545);
    --danger-hover: light-dark(#bd2130, #bd2130);
    --danger-text: light-dark(white, white);
    --danger-hover-text: var(--danger-text);
    --danger-disabled: light-dark(#f06774, #f06774);
    --max-width: 820px;
    --radius: 14px;

    /* input fields */
    --input-bg: light-dark(#ffffff, #000000);
    --input-text: light-dark(#1f1f1f, #ffffff);
    --input-border: light-dark(#aaaaaa, #999999);
    --input-error-border: light-dark(#dc3545, #dc3545);
    --input-readonly-bg: light-dark(#f2f2ef, #151515);
    --input-readonly-text: var(--muted);

    --env-banner-bg: transparent;
    --env-banner-text: inherit;

    /* auth provider buttons */
    --auth-google-bg: #ffffff;
    --auth-google-text: #444444;
    --auth-google-border: var(--border);

    --auth-apple-bg: light-dark(#000000, #ffffff);
    --auth-apple-text: light-dark(#ffffff, #000000);
    --auth-apple-border: var(--auth-apple-bg);

    --auth-facebook-bg: #3c5999;
    --auth-facebook-text: #ffffff;
    --auth-facebook-border: var(--auth-facebook-bg);

    --auth-github-bg: light-dark(#24292e, #ffffff);
    --auth-github-text: light-dark(#ffffff, #000000);
    --auth-github-border: var(--auth-github-bg);

    /* site banners */
    --banner-close-hover-bg: light-dark(
        rgb(0 0 0 / 0.05),
        rgb(255 255 255 / 0.12)
    );

    --banner-success-bg: light-dark(#f4faf5, #102417);
    --banner-success-border: light-dark(#d6e9d8, #2f6b3d);
    --banner-success-accent: light-dark(#5a9b68, #78d08a);
    --banner-success-text: light-dark(#214d2d, #d8f5dd);

    --banner-error-bg: light-dark(#fff6f6, #2a1111);
    --banner-error-border: light-dark(#f0d4d4, #7a3535);
    --banner-error-accent: light-dark(#c46565, #ff8585);
    --banner-error-text: light-dark(#6a2222, #ffdada);

    --banner-warning-bg: light-dark(#fffaf2, #2a210f);
    --banner-warning-border: light-dark(#ecdcbf, #7a5b24);
    --banner-warning-accent: light-dark(#c38b2f, #e0b85c);
    --banner-warning-text: light-dark(#6b4a12, #ffe7ad);

    --banner-info-bg: light-dark(#f5f8fc, #101d2a);
    --banner-info-border: light-dark(#d8e3ef, #315d84);
    --banner-info-accent: light-dark(#5d84b3, #7fb5ec);
    --banner-info-text: light-dark(#244768, #d7ebff);

    /* Environment Variables */
    --environment-dev-background: light-dark(#ff0000, #ff0000);
    --environment-dev-text: light-dark(white, white);
    --environment-stg-background: light-dark(#9a6700, #9a6700);
    --environment-stg-text: light-dark(white, white);

    /* Other variables */
    --striped-row-odd-background: var(--accent);
    --striped-row-odd-text: light-dark(white, rgb(222, 226, 230));
    --striped-row-even-background: var(--bg);
    --striped-row-even-text: light-dark(black, rgb(222, 226, 230));
}

.light {
    /* forces light color-scheme */
    color-scheme: light;
}
.dark {
    /* forces dark color-scheme */
    color-scheme: dark;
}