/* arzberger dr2pat - colors.css */
/* color variables */


:root {

/* # CSS1 ACCENT colors ── */

/* MAIN COLOR accents */
    --accent-A: #D94830;    /* accent-1-RED: #D94830 */
    --accent-B: #2679BC;    /* accent-2-BLUE: #2679BC */
    --accent-C: #1E2025;    /* footer-BLACK #1E2025 */

    --header-bg: var(--accent-A);
    --ederm-blue: var(--accent-B);
    --footer-bg: var(--accent-C);



/* 
accent-A: oklch(0.6021 0.1854 31.95)
accent-A: oklch(0.5603 0.1297 247.55)
color: oklch(from var(--accent-A) l calc(c + 90) h);
color: oklch(l c h / 0.5);= (l c h / alpha)
oklch(from var(--accent-A) l c h / 0.5);
color: oklch(50% 120 287 / 0.5);   
*/


/* primary colors */
--accent-A-hover: #D6391B;
--accent-A-shade-dark: #953d21;
--accent-B-hover: #1A6BB1;
--accent-C-shade-light: #313131; 
--white: #FFF;
--highlight-secondary: #446;


/* # CSS2 colors HEADER */

    --header-primary-txt: var(--white);
    --header-secondary-txt: var(--accent-A-shade-dark);
    --header-border: var(--header-secondary-txt);

    --header-nav-link-primary-txt-std:  var(--header-primary-txt);
    --header-nav-link-secondary-txt-std: var(--header-secondary-txt);
    --header-nav-link-secondary-txt-hover: var(--accent-C-shade-light);
    --header-nav-link-bg-hover: #31313122;


/* # CSS2 colors CONTENT → TODO! */
    --site-bg: #F8F7F2;
    --main-bg: var(--white);
    
    --table-hover: color-mix(in srgb, var(--accent-B) 10%, transparent);  /* fallback */
    --table-hover: oklch(from var(--accent-B) calc(l + 0.07) calc(c + 0.07) h / 0.1);  /* modern */


    --paginator-hover: var(--table-hover);
    --paginator-hover: oklch(from var(--accent-B) calc(l + 0.07) calc(c + 0.07) h / 0.2);  /* modern */
    --paginator-bg-current: oklch(from var(--accent-B-hover) l c h / 0.8);
    /* --paginator-bg-current: var(--accent-B-hover); */

    /* TEXT colors */
    --main-txt-std: #333;
    --main-txt-soft: #444;  /* #567 */
    --main-txt-muted: #898A8B;    /* muted paragraph */
    --main-txt-highlight-primary: var(--accent-B);
    /* --main-txt-highlight-secondary: var(--main-txt-soft); */
    /* --main-txt-highlight-secondary: color-mix(in srgb, var(--main-txt-std) 86%, transparent); */
    --main-txt-highlight-secondary: var(--highlight-secondary);
    --main-link-primary-txt-std: var(--accent-B);
    --main-link-primary-txt-hover: var(--accent-B-hover);
    --main-link-primary-bg-hover: #1A6BB122;



    /* needs an update in variable names: */
    --border-soft1: #D8D8D8;  
    --border-soft2: #EEE; 
    --border2: hsl(from #48b3ff h s calc(l+20)); 
    --table-header-bg: #F2F2F2;
    --text-dark: #1E2025;
    --text-dark: #333;
    --text-muted: #888;  
    --text-muted2: #AAA;  
    /* --text-light: #D2D2D288; */
    --text-light: #999;
    --text-bright: var(--white);
    --text-link: #4A90D9;


/* # CSS2 colors FOOTER */
    --footer-nav-hover-bg: var(--accent-C-shade-light);
    --footer-primary-txt: #CCC;
    --footer-nav-link-primary-txt-std: #CCC;
    --footer-nav-link-primary-txt-hover: #EEE;


/* #CSS2 colors other        
    --ederm-blue-hover: #1A6BB1;       btn-primary-bg-hover 
    --ederm-blue-light: #48b3ff;       
    --ederm-blue-dark: var(--ederm-blue-hover); */


/* # CSS2 colors CASE STATES */
    --state-archived: #CCC;         /* state 5 - archived/archiviert - #b0b0b0; */
    --state-closed: #FE603988;      /* state 4 - closed/geschlossen - #e05a5a; */
    --state-answered: #F9D936aa;    /* state 3 - answered/beantwortet - #d4a017; */
    --state-sent: #A2C61788;        /* state 2 - sent/gesendet - #5aab6e; */
    --state-opened: #58a2d7aa;      /* state 1 - opened/geöffnet - #4a90d9; */
    --state-created: var(--white);  /* state 0 - created/erstellt */
    --state-created-border: #CCC;   /* state 0 - border */
    --debug_off: #F9D936aa;


/* # CSS2 colors BUTTONS & FORMS**/  

    --btn-primary-bg-std: var(--accent-B);  /* backup: #2679BC */
    --btn-primary-bg-hover: var(--accent-B-hover); 
    --btn-primary-bg-active: var(--white);
    --btn-primary-bg-disabled: #D4D5D9;

    --btn-primary-txt-std: var(--white);
    --btn-primary-txt-hover: var(--white);
    --btn-primary-txt-active: var(--btn-primary-bg-hover);
    --btn-primary-txt-disabled: #A4A5A8;
/* v2: #cd3a25 #d6391b # fixme buttons */
    --btn-primaryRed-bg-std: var(--accent-A);/* backup: #D94830 */
    --btn-primaryRed-bg-hover: var(--accent-A-hover);  /* #cd3a25 #d6391b */
    --btn-primaryRed-bg-active: var(--btn-primary-bg-active);
    --btn-primaryRed-bg-disabled: #D4D5D9;

    --btn-primaryRed-txt-std: var(--btn-primary-txt-std);
    --btn-primaryRed-txt-hover: var(--btn-primary-txt-hover);
    --btn-primaryRed-txt-active: var(--btn-primaryRed-bg-hover);
    --btn-primaryRed-txt-disabled: var(--btn-primary-txt-disabled);

    --btn-primary-border-active: var(--btn-primary-bg-hover);
    --btn-primaryRed-border-active: var(--btn-primaryRed-bg-hover);
    --btn-secondaryRed-border-std: var(--btn-primaryRed-bg-hover);
    --btn-secondaryRed-border-hover: var(--btn-primaryRed-bg-hover);
    --btn-secondary-border-std: var(--btn-primary-bg-hover);
    --btn-secondary-border-hover: var(--btn-primary-bg-hover);

    --btn-secondary-bg-std: #EFEFEF;
    --btn-secondary-bg-std: var(--white);
    --btn-secondary-bg-hover: #F9F9F9;
    --btn-secondary-bg-active: var(--btn-primary-bg-hover);
    --btn-secondary-bg-disabled: var(--btn-primary-bg-disabled);

    --btn-secondary-txt-std: var(--btn-primary-bg-hover);
    --btn-secondary-txt-hover: var(--btn-primary-bg-hover);
    --btn-secondary-txt-active: #CDE5FF;
    --btn-secondary-txt-disabled: var(--btn-primary-txt-disabled);

    --btn-secondaryRed-bg-std: var(--btn-secondary-bg-std);
    --btn-secondaryRed-bg-hover: var(--btn-secondary-bg-hover);
    --btn-secondaryRed-bg-active: var(--btn-primaryRed-bg-hover);
    --btn-secondaryRed-bg-disabled: var(--btn-primaryRed-bg-disabled);

    --btn-secondaryRed-txt-std: var(--btn-primaryRed-bg-hover);
    --btn-secondaryRed-txt-hover: var(--btn-primaryRed-bg-hover);
    --btn-secondaryRed-txt-active: var(--btn-secondary-txt-active); /* #CDE5FF; */
    --btn-secondaryRed-txt-disabled: var(--btn-primaryRed-txt-disabled);

    --fieldset-bg-inactive: #FCFCFC;
    --fieldset-bg-active: var(--white);
    --fieldset-border-inactive: var(--btn-primary-txt-disabled);
    --fieldset-border-active: var(--accent-A);
    --fieldset-chat-border-active: var(--accent-B);

    --legend-bg-inactive: var(--fieldset-bg-inactive);
    --legend-bg-active: var(--fieldset-bg-active);
    --legend-border-active: var(--fieldset-border-active);
    --legend-txt-inactive: var(--btn-primary-txt-disabled);
    --legend-txt-active: var(--fieldset-border-active);

    --input-txt-inactive: var(--btn-primary-txt-disabled);
    --input-txt-active: #777;
}

/* # CSS2 GLASS gradients **/  

    .gradient-133-msghead  {
        background-image: linear-gradient(
            180deg,
            hsl(0deg 0% 100% / 0) 0%,
            hsl(0deg 0% 100% / 0.32) 5%,
            hsl(0deg 0% 100% / 0.6) 27%,
            hsl(0deg 0% 100% / 0.75) 55%,
            hsl(0deg 0% 100% / 1) 100% 
        );
    }

    .gradient-133-msgbody  {
        background-image: linear-gradient(
            0deg,
            hsl(0deg 0% 100% / 0) 0%,
            hsl(0deg 0% 100% / 0.13) 8%,
            hsl(0deg 0% 100% / 0.35) 15%,
            hsl(0deg 0% 100% / 0.75) 25%,
            hsl(0deg 0% 100% / 1) 100% 
        ); 
    }


/* # CSS1 NOTES  */
/* beautiful moss green:  #6A994E 

box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.3); 
filter: drop-shadow(2px 2px 6px #00000050);
color-mix(in srgb, var(--accent-A) 47%, transparent); 
*/

.white-gradient-alpha {
background-image: linear-gradient(
    180deg,
    hsl(0deg 0% 100%) 0%,
    hsl(300deg 100% 100%) 8%,
    hsl(300deg 100% 100%) 17%,
    hsl(300deg 100% 100%) 25%,
    hsl(300deg 100% 100%) 33%,
    hsl(300deg 100% 100%) 42%,
    hsl(300deg 100% 100%) 50%,
    hsl(300deg 100% 100%) 58%,
    hsl(300deg 100% 100%) 67%,
    hsl(300deg 100% 100%) 75%,
    hsl(300deg 100% 100%) 83%,
    hsl(300deg 100% 100%) 92%,
    hsl(0deg 0% 100%) 100%
  );
}

.colornames  {

    color: orange;
    color: tomato;
    color: indianred;
    color: crimson;
    color: firebrick;
    color: saddlebrown;

    color: moccasin;
    color: papayawhip;
    color: floralwhite;
    color: oldlace;
    color: honeydew;
    color: thistle;
    color: palevioletred;
    color: plum;
    color: deeppink;
    
    color: darkslategrey;
    color: teal;
    color: mediumturquoise;
    color: mediumaquamarine;
    color: mediumseagreen;
    color: forestgreen;
    color: darkolivegreen;

    color: midnightblue;
    color: royalblue;
    color: steelblue;
    color: dodgerblue;

}