/*
 *      $Revision$
 *      $Id$
 *      Global CSS-variables (for all interfaces)
 */

/*************
**  GLOBAL  **
**************/
:root {
    /* COLORS */
    /* Aareon kleuren 2022 */
    --aareon-ink-blue: #002C67;
    --aareon-sky-blue: #00B0F0;
    --aareon-urban-grey: #343F4D;
    --aareon-fuchsia: #E02D93;
    --aareon-berry: #73007E;
    --aareon-tangerine: #F59D04;
    --aareon-grapefruit: #CC5252;
    --aareon-ocean-green: #0FD3BB;
    --aareon-pine-green: #007764;

    --aareon-color-1: #041260;

    --aareon-color-2: #1770f6;
    --aareon-color-3: #f98c73;
    --aareon-color-4: #ebe3dd;
    --aareon-color-5: #f7f3f0;

    --aareon-color-6: #fdd9cb;
    --aareon-color-7: #5cb02e;
    --aareon-color-8: #bde8a1;

    /* Aareon kleuren 2025 */
    --color-aareon-blue:           #051163;
    --color-aareon-bright-blue:    #086DFB;
    --color-aareon-light-blue:     #A4CBFF;
    --color-aareon-sand:           #F7F3F0;
    --color-aareon-stone:          #EBE3DC;
    --color-aareon-coral:          #FF7F62;

    --color-aareon-peach:          #FFD8CA;
    --color-aareon-green:          #50B214;
    --color-aareon-light-green:    #B9E99C;
    --color-aareon-headline-black: #081326; /* Ook hardcoded in header.inc (!) */
    --color-aareon-body-copy-gray: #384152;

    /* Afgeleide kleuren */
    --accent-dark:      color-mix(in srgb, var(--accent-color) 50%, #000000);
    --accent-darker:    color-mix(in srgb, var(--accent-color) 25%, #000000);
    --accent-light:     color-mix(in srgb, var(--accent-color) 50%, #FFFFFF);
    --accent-lighter:   color-mix(in srgb, var(--accent-color) 25%, #FFFFFF);

    /* Deze 2 worden berekend in header.inc;
        --main-color-contrast:      #FFFFFF;
        --accent-color-contrast:    #FFFFFF;
    */

    /* Wat semantische variabel-namen voor Aareon kleuren */
    --fclt-color-main: var(--aareon-ink-blue);
    --fclt-color-soft-1: var(--aareon-sky-blue);
    --fclt-color-soft-2: var(--aareon-tangerine);
    --fclt-color-soft-3: var(--aareon-ocean-green);
    --fclt-color-soft-4: var(--aareon-fuchsia);

    --fclt-color-hard-1: var(--aareon-ink-blue);
    --fclt-color-hard-2: var(--aareon-grapefruit);
    --fclt-color-hard-3: var(--aareon-pine-green);
    --fclt-color-hard-4: var(--aareon-berry);

    --fclt-bg-lowlight: color-mix(in srgb, currentColor 5%, transparent);

    --fclt-body-color: var(--bs-body-color);
    --fclt-body-bg: var(--bs-body-bg);

    --fclt-body-color-2: color-mix(in srgb, var(--fclt-body-color) 2%, var(--fclt-body-bg));
    --fclt-body-color-5: color-mix(in srgb, var(--fclt-body-color) 5%, var(--fclt-body-bg));
    --fclt-body-color-10: color-mix(in srgb, var(--fclt-body-color) 10%, var(--fclt-body-bg));
    --fclt-body-color-25: color-mix(in srgb, var(--fclt-body-color) 25%, var(--fclt-body-bg));
    --fclt-body-color-50: color-mix(in srgb, var(--fclt-body-color) 50%, var(--fclt-body-bg));

    /* Verschillende Aareon grijstinten */
    --fclt-color-grey-5: color-mix(in srgb, var(--aareon-urban-grey) 5%, transparent);
    --fclt-color-grey-10: color-mix(in srgb, var(--aareon-urban-grey) 10%, transparent);
    --fclt-color-grey-25: color-mix(in srgb, var(--aareon-urban-grey) 25%, transparent);
    --fclt-color-grey-40: color-mix(in srgb, var(--aareon-urban-grey) 40%, transparent);

    /* General */
    --fclt-color-grey: rgb(128, 128, 128);
    --fclt-color-grey-50: rgba(128, 128, 128, 0.5);
    --fclt-color-bad: rgb(156, 0, 6);
    --fclt-color-bad-contrast: rgb(255, 199, 206);
    --fclt-color-good: rgb(0, 97, 0);
    --fclt-color-good-contrast: rgb(198, 239, 206);
    --fclt-color-neutral: rgb(94, 61, 0);
    --fclt-color-neutral-contrast: rgb(255, 235, 156);

    --fclt-color-red: rgb(236, 24, 24);
    --fclt-color-red-contrast: rgb(255, 255, 255);

    /* Specifics */
    --menuiconcolor-gradient: linear-gradient(to bottom, var(--main-color), color-mix(in srgb, var(--main-color) 75%, rgb(0, 0, 0)));

    /* Card */
    --fclt-card-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05),
                       -2px 2px 2px rgba(0, 0, 0, .05);

    /* Borders */
    --fclt-border-width: 1px;

    /* Typography */
    --fontfamily:       Segoe UI, Arial, Helvetica, sans-serif;
    --fontfamily_alt:   Tahoma, Arial, Helvetica, sans-serif; /* Ex-template, functioneel, dunner lettertype */

    --fclt-font-size-s: 12px;
    --fclt-font-size-m: 14px;
    --fclt-font-size-l: 16px;

    --headertextcolor:  var(--color-aareon-headline-black);
    --textcolor:        var(--color-aareon-body-copy-gray);

    /* Bootstrap overrules */
    --fclt-border-radius-input: 5px;
    --fclt-border-radius: .25rem;
    --fclt-border-radius-lg: var(--bs-border-radius, .375rem);
    --fclt-border-radius-xl: .5rem;
    --fclt-border-radius-xxl: .75rem;
    --fclt-border-radius-3xl: 20px;
    --fclt-border-color: color-mix(in srgb, var(--bs-body-color) 15%, transparent);
    --fclt-border: var(--fclt-border-width) solid var(--fclt-border-color);

    /* Gaps */
    --fclt-gap-sm: 0.25em;
    --fclt-gap: 0.5em;
    --fclt-gap-lg: 0.75em;
    --fclt-gap-xl: 1em;

    --fclt-card-padding: 0.75em;

    /* Animations */
    --fclt-animation-duration-xs: 75ms; /* Click / activate */
    --fclt-animation-duration-s: 150ms; /* Hover / focus */
    --fclt-animation-duration: 250ms;   /* Voor kleine UI elementen (cards, dropdowns, tooltip) */
    --fclt-animation-duration-l: 400ms; /* Voor grotere UI elementen (cardkolommen, slide-in panelen, accordion) */

    /* Font Awesome */
    --fa-animation-duration: 1s;

    /* Reusable dimensions */
    --fclt-frameheader-height: 2rem;

    /* Ex-template variables; */
    --linkcolor:           var(--color-aareon-bright-blue);
    --linkhovercolor:      var(--color-aareon-coral);
    --requiredbordercolor: #D50000;

    --portalkopcolor:      var(--textcolor);
    --headercolor:         var(--headertextcolor);

    --activetabbackgroundcolor:     #FCFCFC; /* 99% wit, 1% zwart */
    --activetabcolor:               var(--headertextcolor);
    --inactivetabbackgroundcolor:   #E6E6E6; /* 90% wit, 10% zwart */;
    --inactivetabcolor:             var(--textcolor);

    --buttonbackgroundcolor:          var(--main-color);
    --buttoncolor:                    var(--main-color-contrast);
    --buttonhoverbackgroundcolor:     var(--accent-color);
    --buttonhovercolor:               var(--accent-color-contrast);
    --buttonbackgroundcolormediumlow: #F2F2F2; /* 95% wit, 5% zwart */;
    --buttoncolormediumlow:           var(--headertextcolor);

    /* berekend; --frameheaderbackgroundcolor:     #F2F2F2; /* 95% wit, 5% zwart */;
    /* berekend; --frameheadercolor:               var(--headertextcolor); /* accent-light is licht genoeg om hoog contrast te garanderen */

    --inlineactionbackgroundcolor:    var(--main-color-contrast);
    --inlineactioncolor:              var(--main-color);

    --menubackgroundcolor:          #F2F2F2; /* 95% wit, 5% zwart, zie ook; header.inc (!) */;
    --menucolor:                    var(--headertextcolor);
    --menukophoverbackgroundcolor:  #E6E6E6; /* 90% wit, 10% zwart */;
    --menukophovercolor:            var(--headertextcolor);

    --menuitembackgroundcolor:      #FFFFFF;
    --menuitemcolor:                var(--textcolor);
    --menuitemhoverbackgroundcolor: #F2F2F2; /* 95% wit, 5% zwart */;
    --menuitemhovercolor:           var(--textcolor);

    --notesbackgroundcolor:         var(--main-color);

    --welcomebackgroundcolor:       #FFFFFF;
    --welcomecolor:                 var(--headertextcolor);

    --tableheaderbackgroundcolor:   #F2F2F2; /* 95% wit, 5% zwart */;
    --tableheadercolor:             var(--headertextcolor);
}
