:root {
        /* Primary */
        --gears-primary-color: #051C2C;
        --gears-primarydim-color: #04131d;
        --gears-primarybright-color: #052942;
        --gears-onprimary-color: #ecf7ff;
        --gears-primarycontainer-color: #ddeefa;
        --gears-primarycontainerdim-color: #bac9d4;
        --gears-onprimarycontainer-color: #041829;

        /* Secondary */
        --gears-secondary-color: #65d4b0;
        --gears-secondarydim-color: #5abe9f;
        --gears-secondarybright-color: #83f3d0;
        --gears-onsecondary-color: #01291c;
        --gears-secondarycontainer-color: #bfecde;
        --gears-secondarycontainerdim-color: #9dc4b7;
        --gears-onsecondarycontainer-color: #060f0c;

        /* Tertiary */
        --gears-tertiary-color: #0f454b;
        --gears-tertiarydim-color: #0c2f33;
        --gears-tertiarybright-color: #176169;
        --gears-ontertiary-color: #e8fdff;
        --gears-tertiarycontainer-color: #eafdff;
        --gears-tertiarycontainerdim-color: #c1dcdf;
        --gears-ontertiarycontainer-color: #141c1d;

    /*** Neutral colors ***/
        --gears-surfacedim-color: #ececec;
        --gears-surface-color: #fafafa;
        --gears-surfacebright-color: #fafafa;

        --gears-surfacecontainerlowest-color: #fff;
        --gears-surfacecontainerlow-color: #f7f7f7;
        --gears-surfacecontainer-color: #ececec;
        --gears-surfacecontainerhigh-color: #dadada;
        --gears-surfacecontainerhighest-color: #cacaca;

        --gears-onsurface-color: #1b2129;
        --gears-onsurfacevariant-color: #49454F;
        --gears-outline-color: #79747E;
        --gears-outlinevariant-color: #CAC4D0;

        /*INVERSE COLORS*/
        --gears-inversesurface-color: #303030;
        --gears-sys-color-inverse-on-surface: #f2f2f2;
        --gears-inverseprimary-color: #1149ff;
        --gears-oninverseprimary-color: #fff;


    /*** Additional colors ***/
        --gears-error-color: #ad1010;
        --gears-onerror-color: #ffe2e2;
        --gears-errorcontainer-color: #fff3f3;
        --gears-onerrorcontainer-color: #6b0d0d;

        --gears-warning-color: #f7bf46;
        --gears-onwarning-color: #251e02;
        --gears-warningcontainer-color: #fff1d1;
        --gears-onwarningcontainer-color: #2b2200;

        --gears-danger-color: #f33923;
        --gears-ondanger-color: #fff1d1;
        --gears-dangercontainer-color: #f33923;
        --gears-ondangercontainer-color: #fff1d1;

        --gears-info-color: #e7368d;
        --gears-oninfo-color: #f1f0ec;
        --gears-infocontainer-color: #e7368d;
        --gears-oninfocontainer-color: #1f1901;

        --gears-gold-color: #ffcc00;
        --gears-ongold-color: #251e02;
        --gears-goldcontainer-color: #f8f3ea;
        --gears-ongoldcontainer-color: #221601;
        
}

.primary {background-color: var(--gears-primary-color);color: var(--gears-onprimary-color);}
.primary-container {background-color: var(--gears-primarycontainer-color);color: var(--gears-onprimarycontainer-color);}
.secondary {background-color: var(--gears-secondary-color);color: var(--gears-onsecondary-color);}
.secondary-container {background-color: var(--gears-secondarycontainer-color);color: var(--gears-onsecondarycontainer-color);}
.tertiary {background-color: var(--gears-tertiary-color);color: var(--gears-ontertiary-color);}
.tertiary-container {background-color: var(--gears-tertiarycontainer-color);color: var(--gears-ontertiarycontainer-color);}

.error {background-color: var(--gears-error-color);color: var(--gears-onerror-color);}
.error-container {background-color: var(--gears-errorcontainer-color);color: var(--gears-onerrorcontainer-color);}

.danger {background-color: var(--gears-danger-color);color: var(--gears-ondanger-color);}
.danger-container {background-color: var(--gears-dangercontainer-color);color: var(--gears-ondangercontainer-color);}

.gold {background-color: var(--gears-gold-color);color: var(--gears-ongold-color);}
.gold-container {background-color: var(--gears-goldcontainer-color);color: var(--gears-ongoldcontainer-color);}

.warning {background-color: var(--gears-warning-color);color: var(--gears-onwarning-color);}
.warning-container {background-color: var(--gears-warningcontainer-color);color: var(--gears-onwarningcontainer-color);}
.warning-important {color: var(--gears-onwarningcontainer-color); font-weight: bold; text-decoration-line: underline;}

.info{background-color: var(--gears-info-color);color: var(--gears-oninfo-color);}
.info-container{background-color: var(--gears-infocontainer-color);color: var(--gears-oninfocontainer-color);}

.surface {background-color: var(--gears-surface-color);color: var(--gears-onsurface-color);}
.surface-dim {background-color: var(--gears-surfacedim-color);color: var(--gears-onsurface-color);}
.surface-bright {background-color: var(--gears-surfacebright-color);color: var(--gears-onsurface-color);}

.surface-container-lowest {background-color: var(--gears-surfacecontainerlowest-color);color: var(--gears-onsurface-color);}
.surface-container-low {background-color: var(--gears-surfacecontainerlow-color);color: var(--gears-onsurface-color);}
.surface-container {background-color: var(--gears-surfacecontainer-color);color: var(--gears-onsurface-color);}
.surface-container-high {background-color: var(--gears-surfacecontainerhigh-color);color: var(--gears-onsurface-color);}
.surface-container-highest {background-color: var(--gears-surfacecontainerhighest-color);color: var(--gears-onsurface-color);}
.t-surface {color: var(--gears-onsurface-color);}
.t-error {color:var(--gears-error-color);}
.t-onerror {color:var(--gears-onerror-color);}
.t-error-container {color:var(--gears-onerrorcontainer-color);}
.t-info {color: var(--gears-info-color);font-size: smaller !important;}
.t-oninfo {color: var(--gears-oninfo-color);}
.t-info-container{color:var(--gears-infocontainer-color);}
.t-danger {color: var(--gears-danger-color);font-size: smaller !important;}
.t-ondanger {color: var(--gears-ondanger-color);}
.t-danger-container{color:var(--gears-dangercontainer-color);}
.t-primary {color:var(--gears-primary-color);}
.t-primary-container {color:var(--gears-primarycontainer-color);}
.t-secondary {color:var(--gears-secondary-color);}
.t-tertiary {color:var(--gears-tertiary-color);}
.t-secondary-container {color:var(--gears-secondarycontainer-color);}
.t-surface-dim {color: var(--gears-surfacedim-color);}
.t-surface-bright {color: var(--gears-surfacebright-color);}


.primary-container-hover:hover {background-color: var(--gears-primarycontainer-color);color: var(--gears-onprimarycontainer-color);}
.primary-hover:hover {background-color: var(--gears-primary-color);color: var(--gears-onprimary-color);}

.secondary-container-hover:hover {background-color: var(--gears-secondarycontainer-color);color: var(--gears-onsecondarycontainer-color);}
.secondary-hover:hover {background-color: var(--gears-secondary-color);color: var(--gears-onsecondary-color);}

.tertiary-container-hover:hover {background-color: var(--gears-tertiarycontainer-color);color: var(--gears-ontertiarycontainer-color);}
.tertiary-hover:hover {background-color: var(--gears-tertiary-color);color: var(--gears-ontertiary-color);}



.t-gold {color:var(--gears-gold-color);}
.t-ongold {color:var(--gears-ongold-color);}
.t-gold-container {color:var(--gears-ongoldcontainer-color);}

.t-error {color:var(--gears-error-color);}
.t-error-container {color:var(--gears-errorcontainer-color);}
.t-onerror {color:var(--gears-onerror-color);}
.t-onerror-container {color:var(--gears-onerrorcontainer-color);}
.t-gold {color:var(--gears-ongold-color);}
.t-gold-container {color:var(--gears-ongoldcontainer-color);}
.t-warning {color:var(--gears-warning-color);}
.t-warning-container {color:var(--gears-warningcontainer-color);}
.t-onwarning {color:var(--gears-onwarning-color);}
.t-onwarning-container {color:var(--gears-onwarningcontainer-color);}

.t-surface-container {color: var(--gears-surfacecontainer-color);}
.t-surface-container-low {color: var(--gears-surfacecontainerlow-color);}
.t-surface-container-lowest {color: var(--gears-surfacecontainerlowest-color);}
.t-surface-container-high {color: var(--gears-surfacecontainerhigh-color);}
.t-surface-container-highest {color: var(--gears-surfacecontainerhighest-color);}

.t-onprimary {color:var(--gears-onprimary-color);}
.t-onsecondary {color:var(--gears-onsecondary-color);}
.t-ontertiary {color:var(--gears-ontertiary-color);}
.t-onprimary-container {color:var(--gears-onprimarycontainer-color);}
.t-onsecondary-container {color:var(--gears-onsecondarycontainer-color);}
.t-ontertiary-container {color:var(--gears-ontertiarycontainer-color);}

.t-white {color:white;}
.t-black {color:black;}

[data-theme="dark"]{
        /* Primary */
        --gears-primary-color: #051C2C;
        --gears-primarydim-color: #04131d;
        --gears-primarybright-color: #052942;
        --gears-onprimary-color: #ffffff;
        --gears-primarycontainer-color: #16242e;
        --gears-primarycontainerdim-color: #0d1d29;
        --gears-onprimarycontainer-color: #cde4f5;

        /* Secondary */
        --gears-secondary-color: #65d4b0;
        --gears-secondarydim-color: #4daf90;
        --gears-secondarybright-color: #83f3d0;
        --gears-onsecondary-color: #000000;
        --gears-secondarycontainer-color: #243630;
        --gears-secondarycontainerdim-color: #113126;
        --gears-onsecondarycontainer-color: #0b1612;

        /* Tertiary */
        --gears-tertiary-color: #0f454b;
        --gears-tertiarydim-color: #0c2f33;
        --gears-tertiarybright-color: #176169;
        --gears-ontertiary-color: #e8fdff;
        --gears-tertiarycontainer-color: #eafdff;
        --gears-tertiarycontainerdim-color: #87cad1;
        --gears-ontertiarycontainer-color: #141c1d;

            
    /*** Neutral colors ***/
        --gears-surfacedim-color: #161616;
        --gears-surface-color: #1f1f1f;
        --gears-surfacebright-color: #272727;

        --gears-surfacecontainerlowest-color: #28292a;
        --gears-surfacecontainerlow-color: #2d2f31;
        --gears-surfacecontainer-color: #333438;
        --gears-surfacecontainerhigh-color: #34363a;
        --gears-surfacecontainerhighest-color: #383a3e;

        --gears-onsurface-color: #e3e3e3;
        --gears-onsurfacevariant-color: #818083;
        --gears-outline-color: #616161;
        --gears-outlinevariant-color: #3a3a3a;

        /*INVERSE COLORS*/
        --gears-inversesurface-color: #444746;
        --gears-sys-color-inverse-on-surface: #303030;
        --gears-inverseprimary-color: #1149ff;
        --gears-oninverseprimary-color: #fff;


    /*** Additional colors ***/
        --gears-error-color: #ad1010;
        --gears-onerror-color: #ffe8e8;
        --gears-errorcontainer-color: #8b3531;
        --gears-onerrorcontainer-color: #f1d3d1;
        
        
        --gears-warning-color: #ffcc00;
        --gears-onwarning-color: #251e02;
        --gears-warningcontainer-color: #f3e8be;
        --gears-onwarningcontainer-color: #1f1901;

        
        --gears-gold-color: #ffcc00;
        --gears-ongold-color: #251e02;
        --gears-goldcontainer-color: #f8f3ea;
        --gears-ongoldcontainer-color: #221601;
}

[data-theme="green"]{
    /*** Key colors ***/
        /* Primary */
        --gears-primary-color: #051C2C;
        --gears-primarydim-color: #04131d;
        --gears-primarybright-color: #052942;
        --gears-onprimary-color: #ecf7ff;
        --gears-primarycontainer-color: #ddeefa;
        --gears-primarycontainerdim-color: #bac9d4;
        --gears-onprimarycontainer-color: #041829;

        /* Secondary */
        --gears-secondary-color: #65d4b0;
        --gears-secondarydim-color: #5abe9f;
        --gears-secondarybright-color: #83f3d0;
        --gears-onsecondary-color: #01291c;
        --gears-secondarycontainer-color: #bfecde;
        --gears-secondarycontainerdim-color: #9dc4b7;
        --gears-onsecondarycontainer-color: #060f0c;

        /* Tertiary */
        --gears-tertiary-color: #0f454b;
        --gears-tertiarydim-color: #0c2f33;
        --gears-tertiarybright-color: #176169;
        --gears-ontertiary-color: #e8fdff;
        --gears-tertiarycontainer-color: #eafdff;
        --gears-tertiarycontainerdim-color: #c1dcdf;
        --gears-ontertiarycontainer-color: #141c1d;

    /*** Neutral colors ***/
        --gears-surfacedim-color: #ececec;
        --gears-surface-color: #fafafa;
        --gears-surfacebright-color: #fafafa;

        --gears-surfacecontainerlowest-color: #f0f3e8;
        --gears-surfacecontainerlow-color: #ebefe2;
        --gears-surfacecontainer-color: #e5eadc;
        --gears-surfacecontainerhigh-color: #e3e9da;
        --gears-surfacecontainerhighest-color: #dfe6d5;

        --gears-onsurface-color: #1a1c18;
        --gears-onsurfacevariant-color: #818083;
        --gears-outline-color: #c2c2c2;
        --gears-outlinevariant-color: #dfdfdf;

        /*INVERSE COLORS*/
        --gears-inversesurface-color: #303030;
        --gears-sys-color-inverse-on-surface: #f2f2f2;
        --gears-inverseprimary-color: #1149ff;
        --gears-oninverseprimary-color: #fff;


    /*** Additional colors ***/
        --gears-error-color: #ad1010;
        --gears-onerror-color: #ffe2e2;
        --gears-errorcontainer-color: #fff3f3;
        --gears-onerrorcontainer-color: #6b0d0d;

        
        --gears-warning-color: #fec57e;
        --gears-onwarning-color: #f8e3ee;
        --gears-warningcontainer-color: #e7368d;
        --gears-onwarningcontainer-color: #f8e3ee;

        --gears-info-color: #e7368d;
        --gears-oninfo-color: #f1f0ec;
        --gears-infocontainer-color: #e4a1c1;
        --gears-oninfocontainer-color: #1f1901;

        --gears-gold-color: #ffcc00;
        --gears-ongold-color: #251e02;
        --gears-goldcontainer-color: #f8f3ea;
        --gears-ongoldcontainer-color: #221601;
}

[data-theme="blue"]{
    /*** Key colors ***/
        /* Primary */
        --gears-primary-color: #051C2C;
        --gears-primarydim-color: #04131d;
        --gears-primarybright-color: #052942;
        --gears-onprimary-color: #ecf7ff;
        --gears-primarycontainer-color: #ddeefa;
        --gears-primarycontainerdim-color: #bac9d4;
        --gears-onprimarycontainer-color: #041829;

        /* Secondary */
        --gears-secondary-color: #52b889;
        --gears-secondarydim-color: #5abe9f;
        --gears-secondarybright-color: #83f3d0;
        --gears-onsecondary-color: #01291c;
        --gears-secondarycontainer-color: #bfecde;
        --gears-secondarycontainerdim-color: #9dc4b7;
        --gears-onsecondarycontainer-color: #060f0c;

        /* Tertiary */
        --gears-tertiary-color: #0f454b;
        --gears-tertiarydim-color: #0c2f33;
        --gears-tertiarybright-color: #176169;
        --gears-ontertiary-color: #e8fdff;
        --gears-tertiarycontainer-color: #eafdff;
        --gears-tertiarycontainerdim-color: #c1dcdf;
        --gears-ontertiarycontainer-color: #141c1d;

    /*** Neutral colors ***/
        --gears-surfacedim-color: #d2dbe7;
        --gears-surface-color: #dfe5f0;
        --gears-surfacebright-color: #e1edfe;

        --gears-surfacecontainerlowest-color: #f0f6ff;
        --gears-surfacecontainerlow-color: #dae7f8;
        --gears-surfacecontainer-color: #d8e3f1;
        --gears-surfacecontainerhigh-color: #d9e1ec;
        --gears-surfacecontainerhighest-color: #d2dbe7;

        --gears-onsurface-color: #091a33;
        --gears-onsurfacevariant-color: #818083;
        --gears-outline-color: #c2c2c2;
        --gears-outlinevariant-color: #dfdfdf;

        /*INVERSE COLORS*/
        --gears-inversesurface-color: #303030;
        --gears-sys-color-inverse-on-surface: #f2f2f2;
        --gears-inverseprimary-color: #1149ff;
        --gears-oninverseprimary-color: #fff;


    /*** Additional colors ***/
        --gears-error-color: #ad1010;
        --gears-onerror-color: #ffd7d7;
        --gears-errorcontainer-color: #ffe5e0;
        --gears-onerrorcontainer-color: #6b0d0d;

        
        --gears-warning-color: #fec57e;
        --gears-onwarning-color: #f8e3ee;
        --gears-warningcontainer-color: #e7368d;
        --gears-onwarningcontainer-color: #f8e3ee;

        --gears-info-color: #e7368d;
        --gears-oninfo-color: #f1f0ec;
        --gears-infocontainer-color: #e4a1c1;
        --gears-oninfocontainer-color: #1f1901;

        --gears-gold-color: #ffcc00;
        --gears-ongold-color: #251e02;
        --gears-goldcontainer-color: #f8f3ea;
        --gears-ongoldcontainer-color: #221601;
}


[data-theme="red"]{
    /*** Key colors ***/
        /* Primary */
        --gears-primary-color: #9c4146;
        --gears-primarydim-color: #8d373c;
        --gears-primarybright-color: #b45257;
        --gears-onprimary-color: #ffdadb;
        --gears-primarycontainer-color: #ffb3b5;
        --gears-primarycontainerdim-color: #e6999c;
        --gears-onprimarycontainer-color: #400008;

        /* Secondary */
        --gears-secondary-color: #52b889;
        --gears-secondarydim-color: #5abe9f;
        --gears-secondarybright-color: #83f3d0;
        --gears-onsecondary-color: #01291c;
        --gears-secondarycontainer-color: #bfecde;
        --gears-secondarycontainerdim-color: #9dc4b7;
        --gears-onsecondarycontainer-color: #060f0c;

        /* Tertiary */
        --gears-tertiary-color: #0f454b;
        --gears-tertiarydim-color: #0c2f33;
        --gears-tertiarybright-color: #176169;
        --gears-ontertiary-color: #e8fdff;
        --gears-tertiarycontainer-color: #eafdff;
        --gears-tertiarycontainerdim-color: #c1dcdf;
        --gears-ontertiarycontainer-color: #141c1d;

    /*** Neutral colors ***/
        --gears-surfacedim-color: #d2dbe7;
        --gears-surface-color: #fcfcfc;
        --gears-surfacebright-color: #e1edfe;

        --gears-surfacecontainerlowest-color: #f5f0f0;
        --gears-surfacecontainerlow-color: #f3eaeb;
        --gears-surfacecontainer-color: #f0e5e5;
        --gears-surfacecontainerhigh-color: #efe3e4;
        --gears-surfacecontainerhighest-color: #eddfe0;

        --gears-onsurface-color: #211a1a;
        --gears-onsurfacevariant-color: #818083;
        --gears-outline-color: #857373;

        /*INVERSE COLORS*/
        --gears-inversesurface-color: #362f2f;
        --gears-sys-color-inverse-on-surface: #fbeeed;


        /*** Additional colors ***/
        --gears-error-color: #ad1010;
        --gears-onerror-color: #ffd7d7;
        --gears-errorcontainer-color: #ffe5e0;
        --gears-onerrorcontainer-color: #6b0d0d;

        
        --gears-warning-color: #fec57e;
        --gears-onwarning-color: #f8e3ee;
        --gears-warningcontainer-color: #e7368d;
        --gears-onwarningcontainer-color: #f8e3ee;

        --gears-info-color: #e7368d;
        --gears-oninfo-color: #f1f0ec;
        --gears-infocontainer-color: #e7368d;
        --gears-oninfocontainer-color: #1f1901;

        --gears-gold-color: #ffcc00;
        --gears-ongold-color: #251e02;
        --gears-goldcontainer-color: #f8f3ea;
        --gears-ongoldcontainer-color: #221601;
}


[data-theme="kutt"]{
    /*** Key colors ***/
        /* Primary */
        --gears-primary-color: #051C2C;
        --gears-primarydim-color: #ecf7ff;
        --gears-primarybright-color: #052942;
        --gears-onprimary-color: #ecf7ff;
        --gears-primarycontainer-color: #ddeefa;
        --gears-primarycontainerdim-color: #bac9d4;
        --gears-onprimarycontainer-color: #ecf7ff;

        /* Secondary */
        --gears-secondary-color: #52b889;
        --gears-secondarydim-color: #5abe9f;
        --gears-secondarybright-color: #83f3d0;
        --gears-onsecondary-color: #01291c;
        --gears-secondarycontainer-color: #bfecde;
        --gears-secondarycontainerdim-color: #81ac9d;
        --gears-onsecondarycontainer-color: #060f0c;

       /* Tertiary */
        --gears-tertiary-color: #4ba7b1;
        --gears-tertiarydim-color: #0c2f33;
        --gears-tertiarybright-color: #176169;
        --gears-ontertiary-color: #e8fdff;
        --gears-tertiarycontainer-color: #eafdff;
        --gears-tertiarycontainerdim-color: #c1dcdf;
        --gears-ontertiarycontainer-color: #141c1d;

        /*** Neutral colors ***/
        --gears-surfacedim-color: #d2dbe7;
        --gears-surface-color: #dfe5f0;
        --gears-surfacebright-color: #051C2C;
        --gears-surface-dialog-color-bg:#051C2C;

        --gears-surfacecontainerlowest-color: #051C2C;
        --gears-surfacecontainerlow-color: #07273e;
        --gears-surfacecontainer-color: #09324f;
        --gears-surfacecontainerhigh-color: #0b3e61;
        --gears-surfacecontainerhighest-color: #0d4972;

        --gears-onsurface-color: #ecf7ff;
        --gears-onsurfacevariant-color: #818083;
        --gears-outline-color: #c2c2c2;
        --gears-outlinevariant-color: #dfdfdf;

        /*INVERSE COLORS*/
        --gears-inversesurface-color: #303030;
        --gears-sys-color-inverse-on-surface: #f2f2f2;
        --gears-inverseprimary-color: #1149ff;
        --gears-oninverseprimary-color: #fff;


    /*** Additional colors ***/
        --gears-error-color: #ad1010;
        --gears-onerror-color: #ffd7d7;
        --gears-errorcontainer-color: #ffe5e0;
        --gears-onerrorcontainer-color: #dd4c4c;

        
        --gears-warning-color: #fec57e;
        --gears-onwarning-color: #f8e3ee;
        --gears-warningcontainer-color: #e7368d;
        --gears-onwarningcontainer-color: #f8e3ee;

        --gears-info-color: #e7368d;
        --gears-oninfo-color: #f1f0ec;
        --gears-infocontainer-color: #e7368d;
        --gears-oninfocontainer-color: #1f1901;

        --gears-gold-color: #ffcc00;
        --gears-ongold-color: #251e02;
        --gears-goldcontainer-color: #f8f3ea;
        --gears-ongoldcontainer-color: #221601;
}