@import "layout.css";
@import "elements.css";
@import "forms.css";
@import "tiles.css";
@import "tabs.css";
@import "icons.css";

:root {
    --accent-1: #91B25E;
    --accent-2: #1C836F; /* #60A889;*/
    --accent-3: #F2F7E6; /* #EBF1D6;*/
    --error: #D4351C;
    --error-header-text: white;
    --error-title-text: white;
    --error-contrast: white;
    --warning: #FFCC00;
    --warning-header-text: white;
    --warning-title-text: white;
    --warning-contrast: black;
    --success: #00703C;
    --success-header-text: white;
    --success-title-text: white;
    --success-contrast: white;
    --information: #1d70b8;
    --information-header-text: white;
    --information-title-text: white;
    --information-contrast: white;

    --focus-colour: #FD0;
    --focus-text: #0B0C0C;
}
.accent { background: var(--accent-1); }
.accent2 { background: var(--accent-2); }
.accent3 { background: var(--accent-3); }

body { font-family: 'Segoe UI', sans-serif; font-size: 13px; font-weight: 400; }


h1 { color: var(--accent-1); font-weight: 400; font-size: 32px; margin: 20px 0; }
h2 { color: var(--accent-2); font-weight: 400; font-size: 22px; margin: 20px 0; }
h4 { color: var(--accent-3); font-weight: 700; font-size: 16px; margin: 20px 0; text-transform: uppercase; }

a { text-decoration: none; color: var(--accent-1); }
a:hover { text-decoration: underline; }
h2 > a { color: var(--accent-2); }
h1 + h2 { font-size: 120%; font-weight: 400; color: var(--accent-3); letter-spacing: 2px; margin: -10px 0 20px; }
h1 + h2 > em { color: var(--accent-2); font-style: normal; font-weight: 200; }

ul.tiles.accent-1 li { background: var(--accent-1); }
ul.tiles.accent-2 li { background: var(--accent-2); }