:root {
    --color-primary:       #AA0000;
    --color-primary-dark:  #8B0000;
    --color-primary-light: #F8EAEA;
    --color-info:          #25ADDD;
    --color-success:       #16A34A;
    --color-warning:       #B45309;
    --color-danger:        #DC2626;

    --color-bg:            #F6F7F9;
    --color-surface:       #FFFFFF;
    --color-section-alt:   #F6F7F9;
    --color-bg-dark:       #121212;

    --color-heading:       #1F2933;
    --color-text:          #1F2933;
    --color-text-muted:    #667085;

    --color-border:        #E5E7EB;
    --color-border-strong: #AAAAAA;

    --layout-offset-top:   72px;
    --wrapper-padding-y:   clamp(2.5rem, 6vw, 5rem);
    --wrapper-padding-x:   clamp(1.5rem, 8vw, 10rem);
    --module-padding-y:    clamp(4rem, 8vw, 8rem);

    --radius-xs:           8px;
    --radius-sm:           12px;
    --radius-md:           18px;
    --radius-lg:           22px;
    --radius-full:         100%;

    --ratio-split:         3fr;

    --shadow-sm:           0 4px 20px rgba(0, 0, 0, .07);
    --shadow-md:           0 20px 48px rgba(0, 0, 0, .18);
    --shadow-lg:           0 18px 36px rgba(0, 0, 0, .24);

    --icon-size-small:     16px;
    --icon-size-medium:    20px;
    --icon-size-large:     30px;

    --badge-size-md:       44px;

    --icon-tint-primary:   brightness(0) saturate(100%) invert(22%) sepia(69%) saturate(3184%) hue-rotate(346deg) brightness(84%) contrast(96%);
    --icon-tint-success:   brightness(0) saturate(100%) invert(48%) sepia(75%) saturate(1000%) hue-rotate(93deg) brightness(94%) contrast(101%);

    --fs-xs:               .875rem;
    --fs-sm:               .9375rem;
    --fs-base:             1rem;
    --fs-md:               1.0625rem;
    --fs-lg:               1.125rem;
    --fs-xl:               clamp(1.5rem, 3vw, 2.125rem);
    --fs-2xl:              clamp(2.25rem, 5vw, 3.5rem);

    --transition:          .2s ease;
    --transition-panel:    .25s ease;

    --divider-on-dark:     rgba(255, 255, 255, .1);

    --white-88:            rgba(255, 255, 255, .88);
    --white-16:            rgba(255, 255, 255, .16);
    --white-12:            rgba(255, 255, 255, .12);
    --white-08:            rgba(255, 255, 255, .08);
}

[data-theme="dark"],
.theme-dark,
section:has(> .moduletable.theme-dark) {
    --color-primary:       #C62828;
    --color-primary-dark:  #E53935;
    --color-primary-light: #2A1818;
    --color-info:          #38BDF8;
    --color-success:       #22C55E;
    --color-warning:       #F59E0B;
    --color-danger:        #EF4444;

    --color-bg:            #121212;
    --color-surface:       #1E1E1E;
    --color-section-alt:   #17191D;

    --color-heading:       #F4F6F8;
    --color-text:          #E6E8EB;
    --color-text-muted:    #9AA0AB;

    --color-border:        #2C3037;
    --color-border-strong: #3A3E45;

    --shadow-sm:           0 4px 20px rgba(0, 0, 0, .6);
    --shadow-md:           0 20px 48px rgba(0, 0, 0, .7);
    --shadow-lg:           0 18px 36px rgba(0, 0, 0, .8);

    --icon-tint-primary:   brightness(0) saturate(100%) invert(22%) sepia(67%) saturate(3164%) hue-rotate(344deg) brightness(84%) contrast(93%);
    --icon-tint-success:   brightness(0) saturate(100%) invert(60%) sepia(34%) saturate(953%) hue-rotate(89deg) brightness(96%) contrast(91%);
}

.theme-slate,
section:has(> .moduletable.theme-slate) {
    --color-primary:       #E5484D;
    --color-primary-dark:  #C93A3F;
    --color-primary-light: #3D2E30;
    --color-info:          #38BDF8;
    --color-success:       #22C55E;
    --color-warning:       #F59E0B;
    --color-danger:        #EF4444;

    --color-bg:            #2B3138;
    --color-surface:       #343B43;
    --color-section-alt:   #262B31;

    --color-heading:       #EEF1F4;
    --color-text:          #D7DCE1;
    --color-text-muted:    #9BA4AE;

    --color-border:        #434B54;
    --color-border-strong: #55606B;

    --shadow-sm:           0 4px 20px rgba(0, 0, 0, .6);
    --shadow-md:           0 20px 48px rgba(0, 0, 0, .7);
    --shadow-lg:           0 18px 36px rgba(0, 0, 0, .8);

    --icon-tint-primary:   brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(262%) hue-rotate(308deg) brightness(74%) contrast(166%);
    --icon-tint-success:   brightness(0) saturate(100%) invert(60%) sepia(34%) saturate(953%) hue-rotate(89deg) brightness(96%) contrast(91%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary:       #C62828;
        --color-primary-dark:  #E53935;
        --color-primary-light: #2A1818;
        --color-info:          #38BDF8;
        --color-success:       #22C55E;
        --color-warning:       #F59E0B;
        --color-danger:        #EF4444;

        --color-bg:            #121212;
        --color-surface:       #1E1E1E;
        --color-section-alt:   #17191D;

        --color-heading:       #F4F6F8;
        --color-text:          #E6E8EB;
        --color-text-muted:    #9AA0AB;

        --color-border:        #2C3037;
        --color-border-strong: #3A3E45;

        --shadow-sm:           0 4px 20px rgba(0, 0, 0, .6);
        --shadow-md:           0 20px 48px rgba(0, 0, 0, .7);
        --shadow-lg:           0 18px 36px rgba(0, 0, 0, .8);

        --icon-tint-primary:   brightness(0) saturate(100%) invert(22%) sepia(67%) saturate(3164%) hue-rotate(344deg) brightness(84%) contrast(93%);
        --icon-tint-success:   brightness(0) saturate(100%) invert(60%) sepia(34%) saturate(953%) hue-rotate(89deg) brightness(96%) contrast(91%);
    }
}