:root {

     /* https://colorffy.com/css-generator?color=1F679D */
     --color-primary-a0: #ffffff;
     --color-primary-a10: #cbd4d7;
     --color-primary-a20: #99abb1;
     --color-primary-a30: #69838c;
     --color-primary-a40: #3a5d69;
     --color-primary-a50: #003a48; /* Primary: logo & text */
     --color-primary-a60: #082f3a;
     --color-primary-a70: #0b252d;
     --color-primary-a80: #0c1b20;
     --color-primary-a90: #071114;
     --color-primary-a100: #000000;

     /* Secondary 1 */
     --color-secondary-a0: #ffffff;
     --color-secondary-a10: #d5dfeb;
     --color-secondary-a20: #acbfd7;
     --color-secondary-a30: #83a1c4;
     --color-secondary-a40: #5783b0;
     --color-secondary-a50: #1f679d; /* Secondary: titles */
     --color-secondary-a60: #1f527c;
     --color-secondary-a70: #1d3e5c;
     --color-secondary-a80: #182b3d;
     --color-secondary-a90: #111922;
     --color-secondary-a100: #000000;

     --color-ternary-a0: #ffffff;
     --color-ternary-a10: #e0f5f8;
     --color-ternary-a20: #c1eaf1;
     --color-ternary-a30: #9fe0ea;
     --color-ternary-a40: #7ad5e3;
     --color-ternary-a50: #4acadc; /* Ternary: titles & subtitles */
     --color-ternary-a60: #3f9eac;
     --color-ternary-a70: #33747e;
     --color-ternary-a80: #264d53;
     --color-ternary-a90: #18282b;
     --color-ternary-a100: #000000;

     /* Secondary 2 */
     --color-secondary2-a0: #ffffff;
     --color-secondary2-a10: #e0e6e1;
     --color-secondary2-a20: #c1cdc4;
     --color-secondary2-a30: #a3b5a7;
     --color-secondary2-a40: #869d8c;
     --color-secondary2-a50: #6a8671; /* Secondary: titles */
     --color-secondary2-a60: #546a5a;
     --color-secondary2-a70: #404f43;
     --color-secondary2-a80: #2c362e;
     --color-secondary2-a90: #1a1e1b;
     --color-secondary2-a100: #000000;

     --color-ternary2-a0: #ffffff;
     --color-ternary2-a10: #e4f5eb;
     --color-ternary2-a20: #c9ead7;
     --color-ternary2-a30: #ade0c4;
     --color-ternary2-a40: #90d5b1;
     --color-ternary2-a50: #72ca9e; /* Ternary: titles & subtitles */
     --color-ternary2-a60: #5b9e7c;
     --color-ternary2-a70: #45745c;
     --color-ternary2-a80: #304d3e;
     --color-ternary2-a90: #1c2822;
     --color-ternary2-a100: #000000;

     /* Secondary: background & text */
     --color-secondary-bg-a0: #ffffff;
     --color-secondary-bg-a10: #faf9fa;
     --color-secondary-bg-a20: #f4f3f5;
     --color-secondary-bg-a30: #efecf0;
     --color-secondary-bg-a40: #e9e6eb;
     --color-secondary-bg-a50: #e4e0e6; /* Secondary: bg & titles */
     --color-secondary-bg-a60: #b2afb3;
     --color-secondary-bg-a70: #828083;
     --color-secondary-bg-a80: #555456;
     --color-secondary-bg-a90: #2c2c2d;
     --color-secondary-bg-a100: #000000;

     /* Extra attention or announcement */
     --color-extra-attention-a0: #ffffff;
     --color-extra-attention-a10: #ffdbdc;
     --color-extra-attention-a20: #ffb7bb;
     --color-extra-attention-a30: #ff909a;
     --color-extra-attention-a40: #ff667b;
     --color-extra-attention-a50: #f92a5e; /* Extra attention2 */
     --color-extra-attention-a60: #c3294b;
     --color-extra-attention-a70: #8f2539;
     --color-extra-attention-a80: #5f1e28;
     --color-extra-attention-a90: #321517;
     --color-extra-attention-a100: #000000;

     /* Extra attention2 (lighter) or announcement */
     --color-extra-attention-light-a0: #ffffff;
     --color-extra-attention-light-a10: #ffe6e9;
     --color-extra-attention-light-a20: #ffced3;
     --color-extra-attention-light-a30: #ffb5be;
     --color-extra-attention-light-a40: #fb9ba9;
     --color-extra-attention-light-a50: #f78195; /* Extra attention2 (lighter) */
     --color-extra-attention-light-a60: #c16675;
     --color-extra-attention-light-a70: #8d4d57;
     --color-extra-attention-light-a80: #5d353b;
     --color-extra-attention-light-a90: #301e20;
     --color-extra-attention-light-a100: #000000;

     /* Extra attention (more flashy) */
     --color-extra-attention-flashy-a0: #ffffff;
     --color-extra-attention-flashy-a10: #ffe7d1;
     --color-extra-attention-flashy-a20: #ffcfa3;
     --color-extra-attention-flashy-a30: #ffb776;
     --color-extra-attention-flashy-a40: #ff9f47;
     --color-extra-attention-flashy-a50: #ff8600; /* Extra attention (more flashy) */
     --color-extra-attention-flashy-a60: #c76a0e;
     --color-extra-attention-flashy-a70: #924f12;
     --color-extra-attention-flashy-a80: #603612;
     --color-extra-attention-flashy-a90: #321e0d;
     --color-extra-attention-flashy-a100: #000000;


     /** Examples */
     .bg-primary {
          color: var(--color-primary-a50);
          background-color: var(--color-primary-a10);
     }

     /* text */
     --color-plain-background: white;
     --color-on-plain-title: var(--color-primary-a50);

     /* button */
     --color-on-plain-button-bg: var(--color-primary-a50);
     --color-on-plain-button-bg-hover: var(--color-primary-a70);
     --color-on-plain-button-after-bg: var(--color-secondary-a50);
     --color-on-plain-button-bg-hover-if-after: var(--color-secondary-a50);
     --color-on-plain-button-focus: var(--color-ternary-a50);
     --color-on-plain-button-text: white;

     /* dropdown */
     --color-on-plain-dropdown-bg: var(--color-primary-a50);
     --color-on-plain-dropdown-border: var(--color-primary-a80);
     --color-on-plain-dropdown-item-text: white;
     --color-on-plain-dropdown-item-bg: var(--color-primary-a50);
     --color-on-plain-dropdown-item-hover-bg: var(--color-primary-a70);
     --color-on-plain-dropdown-subitem-hover-bg: var(--color-primary-a90);

     /* input */
     --color-input-border: black;
}