:root {
    /*
        Spacing and corners
    */
    --mobile-minimum-target-size: 40px;
    --baseline: 22px;
    --grid-baseline: 22px;
    --gutter: 15px;
    /**/
    --rounded-border-radius: 10px;
    --box-padding: 15px;
    --btn-group-child-spacing: 12px;
    --btn-group-bottom-margin: 0px;
    /*
        Brand colours
    */
    --brand-color1: #fe8a02;
    --brand-color2: #3452e2;
    --site-bg-color: #00cdb6;
    --modal-bg-color: rgba(0,0,0,0.38); /* Spinner/modal background */
    /*
        Logos
    */
    --fd-logo-light: block;
    --fd-logo-dark: none;
    /**/
    --logo-header-color: none;
    --logo-header-light: block;
    --logo-header-dark: none;
    /**/
    --logo-footer-color: none;
    --logo-footer-light: block;
    --logo-footer-dark: none;
    /*
        Navigation: Used for both primary and top nav
    */
    --nav-icon-color: var(--base-font-color);
    --nav-link-color: var(--base-font-color);
    --nav-link-hover-color: var(--base-font-color-alt);
    --nav-hint-color: var(--base-font-color-alt);
    /*
        Base fonts
    */
    /*--typeface: url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');*/
    --font-family: "Open Sans", sans-serif;
    --base-font-color-alt: #404040;
    --base-font-color: #ffffff;
    --font-size-base: 16px;
    --font-size-reduced: 12px;
    /**/
    --h1-font-size: 40px;
    --h1-line-height: 48px;
    --h1-font-weight: 700;
    --h1-color: --brand-color1;
    /**/
    --h2-font-size: 22px;
    --h2-line-height: 1.4;
    --h2-font-weight: 600;
    --h2-color: --brand-color1;
    /**/
    --h3-font-size: 20px;
    --h3-line-height: 1.4;
    --h3-font-weight: 600;
    --h3-color: #c7452f;
    /**/
    --h4-font-size: 18px;
    --h4-line-height: 1.4;
    --h4-font-weight: 600;
    --h4-color: --brand-color1;
    /* 
    Buttons
        First, common properties:
    */
    --button-pading-top: 10px;
    --button-pading-sides: 30px;
    --button-border-radius: 6px;
    --button-border-width: 2px;
    --button-font-weight: 600;
    --button-text-transform: none;
    /*
        Second, override properties:
    */
    --button-default-bg: var(--brand-color1);
    --button-default-color: #ffffff;
    --button-default-border-color: #ffffff;
    /*---*/
    --button-progressive-bg: var(--brand-color2);
    --button-progressive-color: #ffffff;
    --button-progressive-border-color: #ffffff;
    /*---*/
    --button-destructive-bg: #d11b1b;
    --button-destructive-color: #ffffff;
    --button-destructive-border-color: #ffffff;
    /*---*/
    --button-ghost-bg: transparent;
    --button-ghost-color: var(--base-font-color);
    --button-ghost-border-color: var(--base-font-color);
    /*
    Button hover for all types. */
    --button-hover-bg: #ffffff;
    --button-hover-color: var(--brand-color1);
    --button-hover-border-color: var(--brand-color1);
    /* 
        Icons
    */
    --icon-color: var(--base-font-color);
    /*
        box-shadow
    */
    --box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.15);
    /*
        Tooltips
    */
    --bubble-bg-color: #333333;
    --bubble-text-color: #ffffff;
    --bubble-bg-color-critical: #dd0000;
    --bubble-text-color-critical: #ffffff;
    --tooltip-cursor: help;
    /*
        Forms
    */
    --form-input-bg-color: #ffffff;
    --form-input-font-color: #333333;
    --form-input-border-color: #333333;
    --form-input-border-width: 3px;
    --form-validation-color: var(--text-error);
    --form-helper-text-color: inherit;
    --form-helper-text-size: var(--font-size-reduced);
    --form-disabled-background-color: #dddddd;
    /*
        Definition list
    */
    --definition-term-weight: normal;
    --definition-desc-weight: normal;
}

:root {
    /*See the file: lighting.css for coresponding css rule.*/
    /* Default */
    --bg-white: #ffffff;
    --on-white: #404040;
    --bg-highlight: rgba(255, 255, 255, 0.5);
    --on-highlight: #444444;
    --bg-shade: rgba(0, 0, 0, 0.2);
    --on-shade: #eee;
    /*/*/
    --primary: #96c11f;
    --on-primary: red;
    --on-primary-highlight: green;
    --on-primary-shade: #ffffff;
    /*/*/
    --secondary: #262d80;
    --on-secondary: brown;
    --on-secondary-highlight: purple;
    --on-secondary-shade: yellow;
    /*/*/
    --bg-info: rgba(255, 255, 255, 0.5);
    --on-info: #444444;
    /*/*/
    --bg-warning: #ffc000;
    --on-warning: #444444;
    /*/*/
    --bg-error: #d11b1b;
    --on-error: #ffffff;
    /*/*/
    --bg-success: #7c9f1a;
    --on-success: #ffffff;
    /* text */
    --text-default: #262d80;
    --text-alt: var(--base-font-color-alt);
    --text-primary: var(--primary);
    --text-secondary: var(--secondary);
    --text-light: #eeeeee;
    --text-dark: #444444;
    --text-info: #0000d7;
    --text-success: #00b700;
    --text-warning: #d7a000;
    --text-error: #d70000;
}