:root {
    /* --- Color --- */
    --t-font-color: black !important;
    --t-color-white: #ffffff;
    --t-color-black: #000000;
    --t-color-surface-00: #ffffff;
    --t-color-surface-01: #f9f9f9;
    --t-color-surface-02: #f4f4f4;
    --t-color-surface-03: #eaeaea;
    --t-color-surface-04: #e0e0e0;
    --t-color-surface-05: #cccccc;
    --t-color-surface-06: #b3b3b3;
    --t-color-surface-07: #999999;
    --t-color-surface-08: #666666;
    --t-color-surface-09: #4d4d4d;
    --t-color-surface-10: #333333;
    --t-color-surface-11: #222222;
    --t-color-surface-12: #1a1a1a;
    --t-color-surface-blue-01: #f4f8fa;
    --t-color-surface-blue-02: #e3e7eb;
    --t-color-surface-blue-03: #d5dade;
    --t-color-surface-blue-04: #c7cdd2;
    --t-color-surface-blue-05: #b9c0c6;
    --t-color-surface-blue-06: #abb3bb;
    --t-color-surface-blue-07: #9da6af;
    --t-color-surface-blue-08: #8f99a3;
    --t-color-surface-blue-09: #818c97;
    --t-color-surface-blue-10: #73808b;
    --t-color-surface-blue-11: #65747f;
    --t-color-surface-blue-12: #576873;
    --t-color-blue-01: #e0f7ff;
    --t-color-blue-02: #b3e9ff;
    --t-color-blue-03: #80d9ff;
    --t-color-blue-04: #2cb7f2;
    --t-color-blue-05: #05abf2;
    --t-color-blue-06: #0599d8;
    --t-color-blue-07: #0486bf;
    --t-color-blue-08: #0373a5;
    --t-color-blue-09: #02608c;
    --t-color-blue-10: #014e72;
    --t-color-blue-11: #003c59;
    --t-color-blue-12: #002840;
    --t-color-turquoise-01: #e0f8f7;
    --t-color-turquoise-02: #b3ebe9;
    --t-color-turquoise-03: #80deda;
    --t-color-turquoise-04: #4dd0cc;
    --t-color-turquoise-05: #26c3bd;
    --t-color-turquoise-06: #20b7b1;
    --t-color-turquoise-07: #169f9a;
    --t-color-turquoise-08: #1d8b87;
    --t-color-turquoise-09: #147f78;
    --t-color-turquoise-10: #0e6961;
    --t-color-turquoise-11: #09524a;
    --t-color-turquoise-12: #043b33;
    --t-color-red-01: #ffe5e5;
    --t-color-red-02: #f9b8b8;
    --t-color-red-03: #ff8080;
    --t-color-red-04: #f05d5d;
    --t-color-red-05: #da3838;
    --t-color-red-06: #c02424;
    --t-color-red-07: #c81818;
    --t-color-red-08: #9e1b1b;
    --t-color-red-09: #951f1f;
    --t-color-red-10: #800000;
    --t-color-red-11: #6e0e10;
    --t-color-red-12: #4d0000;
    --t-color-orange-01: #fff4e0;
    --t-color-orange-02: #ffdbb3;
    --t-color-orange-03: #ffbf80;
    --t-color-orange-04: #ff9f43;
    --t-color-orange-05: #ff8500;
    --t-color-orange-06: #e67300;
    --t-color-orange-07: #cc6600;
    --t-color-orange-08: #b35900;
    --t-color-orange-09: #994d00;
    --t-color-orange-10: #803d00;
    --t-color-orange-11: #662e00;
    --t-color-orange-12: #4d1f00;
    --t-color-green-01: #e6ffe6;
    --t-color-green-02: #a1fbc9;
    --t-color-green-03: #8aecb5;
    --t-color-green-04: #5ddf97;
    --t-color-green-05: #28c76f;
    --t-color-green-06: #20b25f;
    --t-color-green-07: #19974e;
    --t-color-green-08: #127d3e;
    --t-color-green-09: #0b632e;
    --t-color-green-10: #06491e;
    --t-color-green-11: #03300e;
    --t-color-green-12: #001900;
    --t-color-purple-01: #f5e6ff;
    --t-color-purple-02: #e0b3ff;
    --t-color-purple-03: #cc80ff;
    --t-color-purple-04: #b34dff;
    --t-color-purple-05: #9c3add;
    --t-color-purple-06: #7c20c5;
    --t-color-purple-07: #621ca7;
    --t-color-purple-08: #5414a7;
    --t-color-purple-09: #3d1196;
    --t-color-purple-10: #2a1285;
    --t-color-purple-11: #140862;
    --t-color-purple-12: #080850;
    --t-color-pink-01: #ffe6f0;
    --t-color-pink-02: #ffb3d8;
    --t-color-pink-03: #ff80bf;
    --t-color-pink-04: #ff4da6;
    --t-color-pink-05: #d6207a;
    --t-color-pink-06: #da1e7c;
    --t-color-pink-07: #c2166c;
    --t-color-pink-08: #b30059;
    --t-color-pink-09: #99004d;
    --t-color-pink-10: #800040;
    --t-color-pink-11: #660033;
    --t-color-pink-12: #4d0026;
    --t-color-yellow-01: #fffbe5;
    --t-color-yellow-02: #fff0b3;
    --t-color-yellow-03: #ffe680;
    --t-color-yellow-04: #ffdb4d;
    --t-color-yellow-05: #eec525;
    --t-color-yellow-06: #e6b800;
    --t-color-yellow-07: #cca300;
    --t-color-yellow-08: #b38f00;
    --t-color-yellow-09: #997a00;
    --t-color-yellow-10: #806600;
    --t-color-yellow-11: #665100;
    --t-color-yellow-12: #4d3d00;
    /* Sementic / Component Specific */
    /* ----- Button Control ----- */
    --t-btn-color-primary: var(--t-color-blue-05);
    --t-btn-color-secondary: var(--t-color-blue-12);
    --t-btn-color-tertiary: var(--t-color-surface-blue-07);
    --t-btn-color-warning: var(--t-color-red-08);
    --t-btn-color-primary-hover: var(--t-color-blue-04);
    --t-btn-color-secondary-hover: var(--t-color-blue-11);
    --t-btn-color-tertiary-hover: var(--t-color-surface-blue-08);
    --t-btn-color-warning-hover: var(--t-color-red-10);
    --t-btn-color-primary-disabled: var(--t-color-blue-02);
    --t-btn-color-secondary-disabled: var(--t-color-surface-blue-03);
    --t-btn-color-tertiary-disabled: var(--t-color-surface-blue-02);
    --t-btn-color-warning-disabled: var(--t-color-red-02);
    /* ----- Badge Control ----- */
    --t-bdg-color-blue: var(--t-color-blue-05);
    --t-bdg-color-green: var(--t-color-green-07);
    --t-bdg-color-black: var(--t-color-surface-10);
    --t-bdg-color-purple: var(--t-color-purple-07);
    --t-bdg-color-navy: var(--t-color-blue-10);
    --t-bdg-color-red: var(--t-color-red-05);
    --t-bdg-color-orange: var(--t-color-orange-07);
    --t-bdg-color-yellow: var(--t-color-yellow-07);
    --t-bdg-color-lightgrey-bg: var(--t-color-surface-01);
    --t-bdg-color-lightgrey-line: var(--t-color-surface-blue-02);
    /* ----- Input Label Control ----- */
    --t-input-label-color: var(--t-color-surface-11);
    /* ----- Input Control ----- */
    --t-input-border-default: 1px solid var(--t-color-surface-blue-06);
    --t-input-border-hover: 1px solid var(--t-color-surface-blue-09);
    --t-input-border-focused: 1px solid var(--t-color-surface-blue-12);
    --t-input-border-disabled: 1px solid var(--t-color-surface-blue-04);
    --t-input-border-readonly: 1px solid var(--t-color-surface-blue-04);


    --t-input-bg-default: var(--t-color-white);
    --t-input-bg-hover: var(--t-color-white);
    --t-input-bg-focused:  var(--t-color-white);
    --t-input-bg-disabled: var(--t-color-surface-02);
    --t-input-bg-readonly: var(--t-color-surface-02);


    --t-input-text-color-default: var(--t-color-surface-10);
    --t-input-text-color-hover: var(--t-color-surface-10);
    --t-input-text-color-focused: var(--t-color-surface-12);
    --t-input-text-color-disabled: var(--t-color-surface-06);
    --t-input-text-color-readonly: var(--t-color-surface-06);


    --t-input-ph-color-default: var(--t-color-surface-06);
    --t-input-ph-color-focused: var(--t-color-surface-08);
    --t-input-ph-color-disabled: var(--t-color-surface-06);
    --t-input-ph-color-readonly: var(--t-color-surface-06);

    /* ----- Form Controls Control ----- */
    --t-form-control-color: var(--t-color-blue-05);
    --t-form-control-border-color: var(--t-color-surface-04);
    --t-form-control-background: var(--t-color-white);
    --t-form-control-disabled-color: var(--t-color-surface-06);
    --t-form-control-disabled-background: var(--t-color-surface-02);
    /* ----- Input Validation Control ----- */
    --t-input-valid-color: var(--t-color-blue-05);
    --t-input-valid-border-color: var(--t-color-blue-05);
    --t-input-invalid-color: var(--t-color-red-05);
    --t-input-invalid-border-color: var(--t-color-red-05);
    --t-input-warning-color: var(--t-color-yellow-05);
    --t-input-warning-border-color: var(--t-color-yellow-05);
    /*  =========  Pattern =========*/
    /*  ----- Navbar -----  */
    --t-navbar-color-default: var(--t-color-white);
    --t-navbar-color-hover: var(--t-color-white);
    --t-navbar-color-active: var(--t-color-blue-05);
    --t-navbar-bg-default: var(--t-color-blue-04);
    --t-navbar-bg-hover: var(--t-color-blue-05);
    --t-navbar-bg-active: var(--t-color-white);
    --t-navbar-shadow: 2px 0px 8px -3px rgba(0,0,0,0.3);
    /* page header*/
    --t-page-header-bg: var(--t-color-surface-blue-01);
    --t-page-header-shadow: 0px 2px 8px -3px rgba(0,0,0,0.3);
    /*    page footer*/
    --t-page-footer-bg: var(--t-color-surface-blue-01);
    --t-page-footer-shadow: 0px -2px 8px -3px rgba(0,0,0,0.3);
    /*   page body*/
    --t-page-body-color: var(--t-color-surface-blue-01);
    --t-grid-bg: var(--t-color-white);
    --t-card-bg: var(--t-color-surface-00);
    /*Modal*/
    --t-modal-bg: var(--t-color-surface-00);
    --t-modal-border: 1px solid var(--t-color-blue-05) !important;
    --t-modal-radius: var(--t-radius-md) !important;
}