/*  */
:root {
    --theme-category: 'Images';
    /* background-image: html */
    --image-background: url('../../img/ausbzcir/bg.blue-poly.1920-1050.jpg');
    --image-ico-colored-medium: url('../../img/ausbzcir/logo.ausbcir.colored_128.png');
    --image-ico-emboss: url('../../img/ausbzcir/logo.ausbcir.emb_out_512_181818_swords.png');
    --image-ico-emb-width: 12rem;
    --image-ico-emb-x: center;
    --image-ico-emb-y: 90%;
}

:root {    
    /* background-color: div.container */
    --color-background: #ffffff;
    --color-background-secondary: #eeeeee;
    /* color: .button, button, input[submit, reset, button] :.button-primary
     *        .button, button, input[submit, reset, button] :.button-primary :focus 
     *
     * background-color: input[email, number, search, text, tel, url, password], textarea, select */
    --color-primary: #ffffff;
    /**/
    --color-primary-overlay: #ffffffee; 
    /* color: a, .button, button, input[submit, reset, button] 
     *
     * background-color,
     * border-color: .button, button, input[submit, reset, button] :.button-primary */
    --color-primary-accent: #3f6e8d;
    /* color: body */
    --color-primary-text: #222;

    --color-secondary-text: #203746;

    --color-primary-shadow: #0000003D;
    /* border-color: .button, button, input[submit, reset, button],
     *               input[email, number, search, text, tel, url, password], textarea, select
     * border-top: hr
     * border-bottom: th, td */
    --color-secondary: #3f6e8d;
    /* 
     * background-color,
     * border-color: a:hover, 
     *               .button, button, input[submit, reset, button] :hover :focus
     *               .button, button, input[submit, reset, button] :.button-primary :hover :focus  */
    --color-secondary-accent: #203746; 
    /* background, 
     * border-color: code */
    --color-code-area: #3f6e8d;
    /* color: code */
    --color-code-text: #ffffff;
    /* color: input[email, number, search, text, tel, url, password]
     * border-color: input[email, number, search, text, tel, url, password] */
    --color-error: #db0050 !important;
    --color-warning: #dbc70d !important;
    --color-success: #9ad424 !important;

    --color-environment-offen: #dbc70d;
    --color-environment-nfd: #db0050;
    --color-environment-test: #4e7f71; 
}

:root {
    /* body */
    --fonts: 'Raleway', Arial;
    --font-icons: 'Font Awesome';
    --font-generics: sans-serif;
    /* body */
    --font-weight-body: 400;
    --font-weight-heading: 600;
    --font-weight-button: 400;
    --font-weight-label: 500;
    --font-weight-icon: 900;
    /* body, h1, h2, h3, h4, h5, h6 */
    --font-size: 1.5rem; 
    /* base font-size 10px; { font-size: 62.5%; }
     * px = rem * base font-size */
    --font-size-h1: calc(var(--font-size) * 58 / 15);
    --font-size-h2: calc(var(--font-size) * 43 / 15);
    --font-size-h3: calc(var(--font-size) * 34 / 15);
    --font-size-h4: calc(var(--font-size) * 27 / 15);
    --font-size-h5: calc(var(--font-size) * 22 / 15);
    --font-size-h6: calc(var(--font-size) * 18 / 15);

    --font-size-button: calc(var(--font-size) * 12 / 15);
    --font-size-label: calc(var(--font-size) * 12 / 15);
    --font-size-code: calc(var(--font-size) * 15 / 15);

    --font-size-tiny: calc(var(--font-size) * 5 / 15);
    --font-size-small: calc(var(--font-size) * 1 / 2);
    --font-size-medium: calc(var(--font-size) * 10 / 15);
}

:root {
    /* --container-s-break: 576px; */
    --container-s: 540px;
    /* --container-m-break: 768px; */
    --container-m: 720px;
    /* --container-l-break: 992px; */
    --container-l: 960px;
    /* --container-x-break: 1200px; */
    --container-x: 1140px;
    /* --container-2x-break: 1400px; */
    --container-2x: 1320px;

    --container-padding: 20px;
}

:root {
    --columns-padding-left: 12px; 
    --columns-padding-right: 12px; 

    --line-height-h1: 1.2;
    --line-height-h2: 1.25;
    --line-height-h3: 1.3;
    --line-height-h4: 1.35;
    --line-height-h5: 1.4;
    --line-height-h6: 1.5;
    
    --line-height-body: 1.6;
    --line-height-table: 1.1;

    --input-height: calc(var(--font-size) * 2.25);

    --button-padding-horizontal: 30px;
    --button-height: calc(var(--font-size-button) * 2.75);
}

:root {
    /* border-radius: drop-zone */
    --border-radius: 7px; 
    --border-weight:1px;
    --border-table: 1px;
    --border-hr: 1px;

    --margin-2t:.25rem;
    --margin-t:.5rem;
    --margin-s:1rem;
    --margin-m:1.25rem;
    --margin-l:1.5rem;
    --margin-x:1.75rem;
    --margin-2x:2rem;
    --margin-3x:2.5rem;
}

:root{
    --theme-category: 'Dropzone';
    --zone-ico-emboss: var(--image-ico-emboss);
    --zone-ico-size: 256px;
    --zone-ico-offset: calc(256px / 5);
    /* background-color: drop-zone */
    --zone-color-background: var(--color-primary-overlay);
    /* color: div#drop-label */
    --zone-color-primary: var(--color-primary-accent);
    /* border-color: drop-zone */
    --zone-color-secondary: var(--color-secondary);
    /* content: drop-icon */
    --zone-icon: '\f093';
    /* font-size: drop-icon */
    --zone-icon-size: 3em;
    --zone-icon-style: normal;

    --zone-text: '';
    --zone-text-font: monospace;
    --zone-text-size: 2em;

    --zone-border-style: dashed;
    --zone-border-width: 3px;
}

:root{
    --switch-height:2.5rem;
    --switch-slider-height:calc(2.5rem * 3 / 4);
    --switch-width:5rem;
    --switch-slider-width:calc(5rem * 1 / 2);
    --switch-transition-time:.4s;
}