/**
  rules of:

- color palette
- size?? variables

 */
:root{
    /* color palette */
    --color200: #000000FF;
    --color100: #FFFFFFFF;
    --color1: #4F46E5FF;
    --color2: #6366F1FF;
    --color3: #E2E8F0FF;
    --color4: #0000001E;
    --color5: #00000060;
    --color6: #1E293BFF;
    --color7: #DC2626FF;
    --color8: #64748BFF;
    --color9: #F1F5F9FF;
    --color10: #94A3B8FF;
    --color11: #FFFFFF14;
    --color12: #0000000A;
    --color13: #000000DD;
    --color14: #94A3B81E;
    --color15: #F8FAFCFF;
    --color16: #2DD4BFFF;
    --color17: #C7D2FEFF;
    --color18: #312E81FF;
    --color19: #CBD5E1FF;
    --color20: #0F172AFF;
    --color21: #F87171FF;
    --color22: #7F1D1DFF;
    --color23: #F97316FF;
    --color24: #22C55EFF; /* additional chapts colors */
    --color25: #f59e0bFF; /* additional chapts colors */
    --color26: #ef4444FF; /* additional chapts colors */
    --color27: #3B82F6FF; /* additional chapts colors */

    /* color settings */
    /* backgrounds */
    --primary-background-color: var(--color1);
    --primary-light-background-color: var(--color17);
    --accent-background-color: var(--color6);
    --accent-light-background-color: var(--color19);
    --warn-background-color: var(--color7);
    --warn-light-background-color: var(--color21);
    --basic-background-color: var(--color3);
    --disabled-background-color: var(--color4);
    --disabled2-background-color: var(--color5);
    --content-background-color: var(--color100);
    --content2-background-color: var(--color9);
    --content3-background-color: var(--color15);
    --hover-background-color: var(--color11);
    --hover2-background-color: var(--color12);
    --hover3-background-color: var(--color14);
    --highlight-background-color: var(--color16);

    /* text colors */
    --primary-text-color: var(--color6);
    --primary-light-text-color: var(--color18);
    --accent-text-color: var(--color2);
    --accent-light-text-color: var(--color20);
    --disabled-text-color: var(--color5);
    --content-text-color: var(--color200);
    --white-text-color: var(--color100);
    --icon-color: var(--color8);
    --icon2-color: var(--color10);
    --icon3-color: var(--color3);
    --secondary-text-color: var(--color8);
    --dropdown-text-color: var(--color13);
    --warn-text-color: var(--color7);
    --warn-light-text-color: var(--color22);
    --gold-text-color: var(--color23);
    --highlight-text-color: var(--color16);
    --green-text-color: var(--color24);
    --yellow-text-color: var(--color25);
    --red-text-color: var(--color26);
    --blue-text-color: var(--color27);

    /* border colors */
    --control-border-color: var(--color3);
    --control-accent-border-color: var(--color2);
    --content-border-color: var(--color3);
    --fieldblock-warn-border-color: var(--color7);
}