:root {
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Emoji, Segoe UI Emoji, Segoe UI Symbol;
    
    /* global */
    --bar-color: #3e3e3e;
    --bar-icon-color: #ffffff;
    --ground-color: #e0e3e6;
    --surface-card-color: #ffffff;
    --surface-card-color-hover: #e9ecef;
    --surface-border-color: #d0d3d5;
    --text-color: #212529;
    --text-color-secondary: #6c757d;
    --p-button-primary-color: #ffffff;
    --tertiary-color: #6c757d;
    --tertiary-color-active: #545b62;
    /* global end */

    /* primary */
    --p-primary-950: #ECF3CF;
    --p-primary-900: #E0EBB2;
    --p-primary-800: #D4E495;
    --p-primary-700: #C8DC79;
    --p-primary-600: #BDD55C;
    --p-primary-500: #B1CD3F;
    --p-primary-400: #96AE36;
    --p-primary-300: #7C902C;
    --p-primary-200: #617123;
    --p-primary-100: #475219;
    --p-primary-50: #2C3310;
    /* primary end */

    /* secondary */
    --p-secondary-950: #FDD399;
    --p-secondary-900: #FCCA84;
    --p-secondary-800: #FCC170;
    --p-secondary-700: #FBB95B;
    --p-secondary-600: #FBB047;
    --p-secondary-500: #FAA732;
    --p-secondary-400: #E1962D;
    --p-secondary-300: #C88628;
    --p-secondary-200: #AF7523;
    --p-secondary-100: #96641E;
    --p-secondary-50: #7D5419;
    --p-secondary-rgb: 250, 167, 50;
    /* secondary end */

    /* success */
    --p-green-950: #ECF3CF;
    --p-green-900: #E0EBB2;
    --p-green-800: #D4E495;
    --p-green-700: #C8DC79;
    --p-green-600: #BDD55C;
    --p-green-500: #B1CD3F;
    --p-green-400: #96AE36;
    --p-green-300: #7C902C;
    --p-green-200: #617123;
    --p-green-100: #475219;
    --p-green-50: #2C3310;
    /* success end */

    /* info */
    --p-sky-950: #96CEF7;
    --p-sky-900: #80C4F5;
    --p-sky-800: #6BBAF3;
    --p-sky-700: #56B0F1;
    --p-sky-600: #41A6F0;
    --p-sky-500: #2C9CEE;
    --p-sky-400: #288CD6;
    --p-sky-300: #237DBE;
    --p-sky-200: #1F6DA7;
    --p-sky-100: #1A5E8F;
    --p-sky-50: #164E77;
    /* info end */

    /* warning */
    --p-orange-950: #FDE980;
    --p-orange-900: #FCE566;
    --p-orange-800: #FCE04D;
    --p-orange-700: #FBDC33;
    --p-orange-600: #FBD71A;
    --p-orange-500: #FAD300;
    --p-orange-400: #E1BE00;
    --p-orange-300: #C8A900;
    --p-orange-200: #AF9400;
    --p-orange-100: #967F00;
    --p-orange-50: #7D6A00;
    /* warning end */

    /* help */
    --p-purple-950: #D4AAFB;
    --p-purple-900: #CB99FA;
    --p-purple-800: #C288F9;
    --p-purple-700: #B977F9;
    --p-purple-600: #B166F8;
    --p-purple-500: #A855F7;
    --p-purple-400: #974DDE;
    --p-purple-300: #8644C6;
    --p-purple-200: #763BAD;
    --p-purple-100: #653394;
    --p-purple-50: #542B7C;
    /* help end */

    /* danger */
    --p-red-950: #F7A2A2;
    --p-red-900: #F58F8F;
    --p-red-800: #F47C7C;
    --p-red-700: #F26969;
    --p-red-600: #F15757;
    --p-red-500: #EF4444;
    --p-red-400: #D73D3D;
    --p-red-300: #BF3636;
    --p-red-200: #A73030;
    --p-red-100: #8F2929;
    --p-red-50: #782222;
    /* danger end */

    --p-content-background: var(--surface-card-color);
    --p-form-field-background: var(--surface-card-color);
}

:root[class*="my-app-dark"] {

    /* global */
    --bar-color: #3e3e3e;
    --bar-icon-color: #ffffff;
    --ground-color: #20262e;
    --surface-card-color: #2a323d;
    --surface-card-color-hover: #3d444d;
    --surface-border-color: #3f3f46;
    --text-color: #ffffff;
    --text-color-secondary: #989da1;
    --p-button-primary-color: #ffffff;
    --tertiary-color: #6c757d;
    --tertiary-color-active: #545b62;
    /* global end */

    /* primary */
    --p-primary-950: #ECF3CF;
    --p-primary-900: #E0EBB2;
    --p-primary-800: #D4E495;
    --p-primary-700: #C8DC79;
    --p-primary-600: #BDD55C;
    --p-primary-500: #B1CD3F;
    --p-primary-400: #96AE36;
    --p-primary-300: #7C902C;
    --p-primary-200: #617123;
    --p-primary-100: #475219;
    --p-primary-50: #2C3310;
    /* primary end */

    /* secondary */
    --p-secondary-950: #FDD399;
    --p-secondary-900: #FCCA84;
    --p-secondary-800: #FCC170;
    --p-secondary-700: #FBB95B;
    --p-secondary-600: #FBB047;
    --p-secondary-500: #FAA732;
    --p-secondary-400: #E1962D;
    --p-secondary-300: #C88628;
    --p-secondary-200: #AF7523;
    --p-secondary-100: #96641E;
    --p-secondary-50: #7D5419;
    --p-secondary-rgb: 250, 167, 50;
    /* secondary end */

    /* success */
    --p-green-950: #ECF3CF;
    --p-green-900: #E0EBB2;
    --p-green-800: #D4E495;
    --p-green-700: #C8DC79;
    --p-green-600: #BDD55C;
    --p-green-500: #B1CD3F;
    --p-green-400: #96AE36;
    --p-green-300: #7C902C;
    --p-green-200: #617123;
    --p-green-100: #475219;
    --p-green-50: #2C3310;
    /* success end */
    
    /* info */
    --p-sky-950: #96CEF7;
    --p-sky-900: #80C4F5;
    --p-sky-800: #6BBAF3;
    --p-sky-700: #56B0F1;
    --p-sky-600: #41A6F0;
    --p-sky-500: #2C9CEE;
    --p-sky-400: #288CD6;
    --p-sky-300: #237DBE;
    --p-sky-200: #1F6DA7;
    --p-sky-100: #1A5E8F;
    --p-sky-50: #164E77;
    /* info end */

    /* warning */
    --p-orange-950: #FDE980;
    --p-orange-900: #FCE566;
    --p-orange-800: #FCE04D;
    --p-orange-700: #FBDC33;
    --p-orange-600: #FBD71A;
    --p-orange-500: #FAD300;
    --p-orange-400: #E1BE00;
    --p-orange-300: #C8A900;
    --p-orange-200: #AF9400;
    --p-orange-100: #967F00;
    --p-orange-50: #7D6A00;
    /* warning end */

    /* help */
    --p-purple-950: #D4AAFB;
    --p-purple-900: #CB99FA;
    --p-purple-800: #C288F9;
    --p-purple-700: #B977F9;
    --p-purple-600: #B166F8;
    --p-purple-500: #A855F7;
    --p-purple-400: #974DDE;
    --p-purple-300: #8644C6;
    --p-purple-200: #763BAD;
    --p-purple-100: #653394;
    --p-purple-50: #542B7C;
    /* help end */

    /* danger */
    --p-red-950: #F7A2A2;
    --p-red-900: #F58F8F;
    --p-red-800: #F47C7C;
    --p-red-700: #F26969;
    --p-red-600: #F15757;
    --p-red-500: #EF4444;
    --p-red-400: #D73D3D;
    --p-red-300: #BF3636;
    --p-red-200: #A73030;
    --p-red-100: #8F2929;
    --p-red-50: #782222;
    /* danger end */

    --p-content-background: var(--surface-card-color);
    --p-form-field-background: var(--surface-card-color);
}