/* ==========================================================================
   Colors
   ========================================================================== */

:root {
    /**
     * Static
     */

    --ts-primary-400: #40a9ff;
    --ts-primary-500: #1890ff;
    --ts-primary-600: #096dd9;
    --ts-primary-700: #0050b3;
    --ts-primary-800: #003a8c;
    --ts-primary-900: #002766;

    --ts-warning-400: #ffec3d;
    --ts-warning-500: #fadb14;
    --ts-warning-600: #d4b106;
    --ts-warning-700: #ad8b00;
    --ts-warning-800: #876800;
    --ts-warning-900: #614700;

    --ts-positive-400: #73d13d;
    --ts-positive-500: #52c41a;
    --ts-positive-600: #389e0d;
    --ts-positive-700: #237804;
    --ts-positive-800: #135200;
    --ts-positive-900: #092b00;

    --ts-negative-400: #ff4d4f;
    --ts-negative-500: #f5222d;
    --ts-negative-600: #cf1322;
    --ts-negative-700: #a8071a;
    --ts-negative-800: #820014;
    --ts-negative-900: #5c0011;

    /**
     * Light
     */

    --ts-light-gray-50: rgb(255, 255, 255);
    --ts-light-gray-75: rgb(250, 250, 250);
    --ts-light-gray-100: rgb(242, 242, 242);
    --ts-light-gray-200: rgb(238, 238, 238);
    --ts-light-gray-300: rgb(225, 225, 225);
    --ts-light-gray-400: rgb(215, 215, 215);
    --ts-light-gray-500: rgb(118, 118, 118);
    --ts-light-gray-600: rgb(90, 90, 90);
    --ts-light-gray-700: rgb(70, 70, 70);
    --ts-light-gray-800: rgb(55, 55, 55);
    --ts-light-gray-900: rgb(48, 48, 48);

    --ts-light-link-700: #0050b3;

    --ts-light-tonal-positive-400: #cdffbe;
    --ts-light-tonal-positive-800: #357016;

    --ts-light-tonal-negative-400: #ffbebe;
    --ts-light-tonal-negative-800: #701616;

    --ts-light-tonal-primary-400: #d9edff;
    --ts-light-tonal-primary-800: #005cde;

    --ts-light-tonal-warning-400: #fff7ae;
    --ts-light-tonal-warning-800: #866800;

    --ts-light-page-background-default: var(--ts-gray-50);
    --ts-light-page-background-secondary: var(--ts-gray-75);
    --ts-light-page-background-tertiary: var(--ts-gray-100);

    --ts-light-elevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    --ts-light-elevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.1);
    --ts-light-elevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.1);

    /**
     * Dark
     */

    --ts-dark-gray-50: rgb(39, 39, 39);
    --ts-dark-gray-75: rgb(47, 47, 47);
    --ts-dark-gray-100: rgb(51, 51, 51);
    --ts-dark-gray-200: rgb(56, 56, 56);
    --ts-dark-gray-300: rgb(71, 71, 71);
    --ts-dark-gray-400: rgb(92, 92, 92);
    --ts-dark-gray-500: rgb(189, 189, 189);
    --ts-dark-gray-600: rgb(229, 229, 229);
    --ts-dark-gray-700: rgb(233, 233, 233);
    --ts-dark-gray-800: rgb(238, 238, 238);
    --ts-dark-gray-900: rgb(255, 255, 255);

    --ts-dark-link-700: #a6a6f6;

    --ts-dark-tonal-positive-400: #92d34f;
    --ts-dark-tonal-positive-800: #0e4600;

    --ts-dark-tonal-negative-400: #d60000;
    --ts-dark-tonal-negative-800: #fff;

    --ts-dark-tonal-primary-400: #0a6ffd;
    --ts-dark-tonal-primary-800: #ffffff;

    --ts-dark-tonal-warning-400: #edff00;
    --ts-dark-tonal-warning-800: #463f00;

    --ts-dark-page-background-default: var(--ts-dark-gray-50);
    --ts-dark-page-background-secondary: rgb(30, 30, 30);
    --ts-dark-page-background-tertiary: rgb(23, 23, 23);

    --ts-dark-elevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
    --ts-dark-elevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.5);
    --ts-dark-elevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Definitions
   ========================================================================== */

:root {
    --ts-accent-color: unset;
    --ts-accent-foreground-color: white;

    --ts-gray-50: light-dark(var(--ts-light-gray-50), var(--ts-dark-gray-50));
    --ts-gray-75: light-dark(var(--ts-light-gray-75), var(--ts-dark-gray-75));
    --ts-gray-100: light-dark(var(--ts-light-gray-100), var(--ts-dark-gray-100));
    --ts-gray-200: light-dark(var(--ts-light-gray-200), var(--ts-dark-gray-200));
    --ts-gray-300: light-dark(var(--ts-light-gray-300), var(--ts-dark-gray-300));
    --ts-gray-400: light-dark(var(--ts-light-gray-400), var(--ts-dark-gray-400));
    --ts-gray-500: light-dark(var(--ts-light-gray-500), var(--ts-dark-gray-500));
    --ts-gray-600: light-dark(var(--ts-light-gray-600), var(--ts-dark-gray-600));
    --ts-gray-700: light-dark(var(--ts-light-gray-700), var(--ts-dark-gray-700));
    --ts-gray-800: light-dark(var(--ts-light-gray-800), var(--ts-dark-gray-800));
    --ts-gray-900: light-dark(var(--ts-light-gray-900), var(--ts-dark-gray-900));

    --ts-link-700: light-dark(var(--ts-light-link-700), var(--ts-dark-link-700));

    --ts-tonal-positive-400: light-dark(var(--ts-light-tonal-positive-400), var(--ts-dark-tonal-positive-400));
    --ts-tonal-positive-800: light-dark(var(--ts-light-tonal-positive-800), var(--ts-dark-tonal-positive-800));

    --ts-tonal-negative-400: light-dark(var(--ts-light-tonal-negative-400), var(--ts-dark-tonal-negative-400));
    --ts-tonal-negative-800: light-dark(var(--ts-light-tonal-negative-800), var(--ts-dark-tonal-negative-800));

    --ts-tonal-primary-400: light-dark(var(--ts-light-tonal-primary-400), var(--ts-dark-tonal-primary-400));
    --ts-tonal-primary-800: light-dark(var(--ts-light-tonal-primary-800), var(--ts-dark-tonal-primary-800));

    --ts-tonal-warning-400: light-dark(var(--ts-light-tonal-warning-400), var(--ts-dark-tonal-warning-400));
    --ts-tonal-warning-800: light-dark(var(--ts-light-tonal-warning-800), var(--ts-dark-tonal-warning-800));

    --ts-page-background-default: light-dark(var(--ts-light-page-background-default), var(--ts-dark-page-background-default));
    --ts-page-background-secondary: light-dark(var(--ts-light-page-background-secondary), var(--ts-dark-page-background-secondary));
    --ts-page-background-tertiary: light-dark(var(--ts-light-page-background-tertiary), var(--ts-dark-page-background-tertiary));

    --ts-elevated-shadow: 0 2px 10px 0 light-dark(var(--ts-light-elevated-shadow), var(--ts-dark-elevated-shadow));
    --ts-elevated-shadow-modal: 0 0 20px light-dark(var(--ts-light-elevated-shadow-modal), var(--ts-dark-elevated-shadow-modal));
    --ts-elevated-shadow-drawer: 0 0 20px light-dark(var(--ts-light-elevated-shadow-drawer), var(--ts-dark-elevated-shadow-drawer));
}

/* ==========================================================================
   Color Schemes
   ========================================================================== */

:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
    .has-inverted {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: dark) {
    .has-inverted {
        color-scheme: light;
    }
}

body.is-light,
.has-light,
body.is-dark .has-inverted {
    color-scheme: light;
}

body.is-dark,
.has-dark,
body.is-light .has-inverted {
    color-scheme: dark;
}

/**
 * Hidden
 */

body.is-light .has-hidden-light,
body.is-dark .has-hidden-dark {
    display: none !important;
}

@media (prefers-color-scheme: light) {
    body:not(.is-dark) .has-hidden-light {
        display: none !important;
    }
}

@media (prefers-color-scheme: dark) {
    body:not(.is-light) .has-hidden-dark {
        display: none !important;
    }
}

/* ==========================================================================
   Background Color
   ========================================================================== */

body.is-secondary {
    background-color: var(--ts-page-background-secondary);
}
