/* =========================================================
   VARIABLES
   Global colours, spacing, borders and sizing
========================================================= */

:root {

    /* =========================
       BRAND COLOURS
    ========================= */

    --primary: #1c2674;
    --primary-dark: #161b4e;
    --primary-light: #eef1f7;

    /* =========================
       TEXT
    ========================= */

    --text: #161b4e;
    --text-muted: #666666;
    --text-light: #888888;

    /* =========================
       BACKGROUNDS
    ========================= */

    --background: #ffffff;
    --surface: #ffffff;
    --surface-light: #f8fafc;

    /* =========================
       BORDERS
    ========================= */

    --border: #e5e7eb;
    --border-light: #eeeeee;
    --border-dark: #d7dbe7;

    /* =========================
       SUCCESS
    ========================= */

    --success: #1f7a3d;
    --success-bg: #e3f7e8;

    /* =========================
       WARNING
    ========================= */

    --warning: #8a6d3b;
    --warning-bg: #fff3cd;

    /* =========================
       DANGER
    ========================= */

    --danger: #b00020;
    --danger-bg: #ffe5e5;

    /* =========================
       PROGRAMME THEME COLOURS
    ========================= */

    --theme-know: #1397df;
    --theme-express: #ec178f;
    --theme-well: #8e58a7;
    --theme-adventures: #67b539;
    --theme-action: #f08a00;
    --theme-future: #f2a6cb;

    /* =========================
       PROGRAMME THEME BACKGROUNDS
    ========================= */

    --theme-know-bg: #edf6fb;
    --theme-express-bg: #f9edf4;
    --theme-well-bg: #f3eef7;
    --theme-adventures-bg: #f1f6ec;
    --theme-action-bg: #f8f2eb;
    --theme-future-bg: #fbf1f6;

    /* =========================
       SPACING
    ========================= */

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 30px;
    --space-3xl: 40px;

    /* =========================
       BORDER RADIUS
    ========================= */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* =========================
       SITE WIDTH
    ========================= */

    --site-width: 1000px;
    --header-width: 1024px;
}