/* Colors */
:root {
    --color-primary: #1d2b4e;
    --color-secondary: #d1c29b;

    --color-accent: #007cce;

    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #0dcaf0;

    --color-dark: #231f20;
    --color-light: #ffffff;
    --color-muted: #6c757d;

    --color-ipsos-primary: #2f469c;
    --color-ipsos-secondary: #009d9c;
    --color-ipsos-primary-light: #3546a8;
    --color-ipsos-secondary-light: #00afa9;
    --color-yellow-light: #ffffd0;

    --color-gray-200: #333333;
    --color-gray-300: #404040;
    --color-gray-400: #666666;
    --color-gray-500: #808080;
    --color-gray-600: #999999;
    --color-gray-700: #adadad;
    --color-gray-800: #d0d0d0;
    --color-gray-900: #e7e7e7;
    --color-gray-950: #f0f0f0;
    --color-gray-1000: #fafafa;

    --bg-ipsos: #38ffe8;

    --bg-primary: #e7e7e7;
    --bg-secondary: #f9f6f1;

    --bg-success: hsl(152, 69%, 81%);
    --bg-danger: hsl(354, 70%, 79%);
    --bg-warning: hsl(45, 100%, 86%);
    --bg-info: hsl(190, 90%, 80%);

    --bg-muted: #b0b5ba;

    /* Backwards compatibility while this old variable is in the dashboard config data... */
    --color-neutral-white: var(--color-light);
}

/* Typography */
:root {
    --font-body: 'Barlow', Arial, sans-serif;
    --font-header: 'Roboto Slab', Arial, sans-serif;
    --font-header-alt: 'Roboto Medium', Arial, sans-serif;

    --font-monospace: Consolas, 'Courier New', monospace;

    --font-color: var(--color-dark);
    --font-color-header: var(--color-dark);

    --font-size-base: 14px;
    --font-line-height-base: 1.42857;

    --font-size-x-small: 0.71rem;
    --font-size-xs: 0.71rem;
    --font-size-small: 0.86rem;
    --font-size-sm: 0.86rem;
    --font-size: 1rem;
    --font-size: 1rem;
    --font-size-large: 1.29rem;
    --font-size-lg: 1.29rem;
    --font-size-x-large: 1.71rem;
    --font-size-xl: 1.71rem;
}

/* Layout */
:root {
    --radius-base: var(--grid-size);
    --radius-panel: calc(var(--grid-size) * 8);

    --header-bg: var(--color-gray-1000);
}

/* Variables */
:root {
    --header-height: 80px;
    --footer-height: 70px;

    --transition-time-short: 100ms;
    --transition-time: 200ms;
    --transition-time-long: 600ms;
}