:root {
    /* Base colors from which the entire palette is built */
    --color-base-base: #171a22; /* The base color of the content, from which text, icons, etc. colors are built */
    --color-base-essential: #fff; /* The base color of surfaces */
    --color-base-project: #643add; /* Project color, from which accent states are built */
    --color-base-phantom: #8670c7; /* Tinting color, from which borders, modal overlays, etc. are built */
    --color-base-path: #8d68f5; /* Link and control color, from which all their states are built */
    --color-base-system: #ced8de; /* System color */

    --color-base-success: #43c758; /* Success color */
    --color-base-alert: #eb5757; /* Error color */
    --color-base-warning: #f38b00; /* Warning color */
    --color-base-caution: #f2c94c; /* Caution color */
    --color-base-normal: #56b9f2; /* Neutral color */
    --color-base-critical: #33000f;
}

/* stylelint-disable */
.Theme_color_themeLight {
    /* Background colors */
    --color-bg-default: var(--color-base-essential); /* Default color */
    --color-bg-secondary: #f2f5f8; /* Default color */
    --color-bg-brand: var(--color-base-project); /* Branded background color */
    --color-bg-link: color-mod(var(--color-base-path) a(100%)); /* Link background color */
    --color-bg-border: color-mod(var(--color-base-phantom) a(20%) l(+30%)); /* Border color */
    --color-bg-stripe: #f8f9fa; /* Zebra color (e.g., for alternating table row backgrounds) */
    --color-bg-stripe-active: color-mod(#f8f9fa l(-2%));

    --color-bg-ghost: color-mod(var(--color-base-phantom) l(-11%) a(8%)); /* Shading color */
    --color-bg-tone: color-mod(var(--color-base-phantom) l(-25%) a(10%)); /* Paranja color (veil) */
    --color-bg-soft: color-mod(var(--color-base-essential) a(90%)); /* Milk color */
    --color-bg-system: color-mod(var(--color-base-system) a(100%)); /* System background color */
    --color-bg-normal: color-mod(var(--color-base-normal) a(100%)); /* Neutral background color */
    --color-bg-success: color-mod(var(--color-base-success) a(100%)); /* Success background color */
    --color-bg-caution: color-mod(var(--color-base-caution) a(100%)); /* Caution background color */
    --color-bg-warning: color-mod(var(--color-base-warning) a(100%)); /* Warning background color */
    --color-bg-alert: color-mod(var(--color-base-alert) a(100%)); /* Error background color */
    --color-bg-critical: color-mod(
        var(--color-base-critical) a(100%)
    ); /* System background color */
    --color-bg-selection: color-mod(var(--color-base-project) a(10%)); /* Selection color */

    /* Text colors */
    --color-typo-primary: var(--color-base-base); /* Main text color */
    --color-typo-secondary: color-mod(var(--color-base-base) a(70%)); /* Secondary text color */
    --color-typo-ghost: color-mod(var(--color-base-base) a(30%)); /* Additional text color */
    --color-typo-brand: color-mod(var(--color-base-project) a(100%)); /* Brand text color */
    --color-typo-system: color-mod(
        var(--color-base-system) s(+10%) l(-21%)
    ); /* System text color */
    --color-typo-normal: color-mod(
        var(--color-base-normal) s(+14%) l(-4%)
    ); /* Neutral text color */
    --color-typo-success: color-mod(
        var(--color-base-success) s(+20%) l(-8%)
    ); /* Success text color */
    --color-typo-caution: color-mod(
        var(--color-base-caution) s(+15%) h(-8) l(-10%)
    ); /* Caution text color */

    --color-typo-warning: color-mod(
        var(--color-base-warning) h(-4) s(-2%) l(-2%)
    ); /* Warning text color */

    --color-typo-alert: color-mod(var(--color-base-alert) s(+3%) l(-7%)); /* Error text color */
    --color-typo-critical: color-mod(var(--color-base-critical) a(100%)); /* System text color */
    --color-typo-link: color-mod(var(--color-base-path) a(100%)); /* Main link color */
    --color-typo-link-minor: color-mod(
        var(--color-base-path) s(-35%) l(-10%)
    ); /* Minor link color */
    --color-typo-link-hover: color-mod(var(--color-base-path) l(+8%)); /* Link hover color */
    --color-nums-shadow: 0, 0, 0; /* RGB values for specifying shadows in rgba(R,G,B, alpha) */

    /* Scrollbar colors */
    --color-scroll-bg: color-mod(var(--color-base-phantom) a(6%));
    --color-scroll-thumb: color-mod(var(--color-base-phantom) a(24%));
    --color-scroll-thumb-hover: color-mod(var(--color-base-phantom) a(32%));

    /* Control colors */
    /* Default */
    --color-control-bg-default: color-mod(
        var(--color-base-essential)
    ); /* Control background color */
    --color-control-typo-default: color-mod(var(--color-base-base)); /* Main control text color */
    --color-control-typo-placeholder: color-mod(
        var(--color-base-base) a(35%)
    ); /* Control placeholder color */
    --color-control-bg-border-default: color-mod(
        var(--color-base-phantom) a(28%)
    ); /* Control border background color */

    --color-control-bg-border-default-hover: color-mod(
        var(--color-base-phantom) a(52%)
    ); /* Control border background color on hover */

    --color-control-bg-border-focus: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Control outline color on focus */
    --color-control-bg-focus: color-mod(
        var(--color-base-path) a(30%)
    ); /* Shadow color in focus state */
    --color-control-bg-active: color-mod(
        var(--color-base-path) a(50%)
    ); /* Shadow color in active state  */

    /* Primary */
    --color-control-bg-primary: color-mod(
        var(--color-base-path) a(100%)
    ); /* Active control background color */
    --color-control-bg-primary-hover: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Active control background color on hover */

    --color-control-typo-primary: color-mod(
        var(--color-base-base) l(+100%)
    ); /* Accent text color */
    --color-control-typo-primary-hover: color-mod(
        var(--color-base-base) l(+100%)
    ); /* Accent text color */

    /* Secondary */
    --color-control-bg-secondary: color-mod(
        var(--color-base-essential) a(0%)
    ); /* Control border background color */
    --color-control-bg-border-secondary: color-mod(
        var(--color-base-path) a(100%)
    ); /* Control border background color */

    --color-control-bg-border-secondary-hover: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Control border background color on hover */

    --color-control-typo-secondary: color-mod(
        var(--color-base-path) a(100%)
    ); /* Secondary control text color */

    --color-control-typo-secondary-hover: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Accent text color */

    /* Ghost */
    --color-control-bg-ghost: color-mod(
        var(--color-base-phantom) a(7%)
    ); /* Additional control background color */

    --color-control-bg-ghost-hover: color-mod(
        var(--color-base-phantom) a(5%)
    ); /* Additional control background color on hover */

    --color-control-typo-ghost: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(80%)
    ); /* Additional control text color */

    --color-control-typo-ghost-hover: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(75%)
    ); /* Accent text color */

    /* Clear */
    --color-control-bg-clear: color-mod(
        var(--color-base-phantom) a(0%)
    ); /* Clear control background color */
    --color-control-bg-clear-hover: color-mod(
        var(--color-base-phantom) a(5%)
    ); /* Clear control background color on hover */

    --color-control-typo-clear: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(80%)
    ); /* Accent text color */

    --color-control-typo-clear-hover: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(75%)
    ); /* Accent text color */

    /* Disable */
    --color-control-bg-disable: color-mod(
        var(--color-base-phantom) a(7%)
    ); /* Disabled control background color */
    --color-control-bg-border-disable: color-mod(
        var(--color-base-phantom) a(0%)
    ); /* Disabled control border background color */

    --color-control-typo-disable: color-mod(
        var(--color-base-base) a(26%)
    ); /* Disabled control main text color */
}
/* stylelint-enable */
