:root {
    --primary: #368efe;
    --secondary: #374766;
    --tertiary: #101624;

    --primary-light: color-mix(in srgb, var(--primary), white 50%);
    --primary-dark: color-mix(in srgb, var(--primary), black 40%);

    --secondary-light: color-mix(in srgb, var(--secondary), white 85%);
    --secondary-dark: color-mix(in srgb, var(--secondary), black 10%);

    --tertiary-light: color-mix(in srgb, var(--tertiary), white 85%);
    --tertiary-dark: color-mix(in srgb, var(--tertiary), black 20%);

    --background: #f3f3f2;
    --text: var(--tertiary);
    --text-muted: color-mix(in srgb, var(--tertiary), white 45%);

    --success: #4F7942;
    --danger: #B03A2E;
    --warning: #D4A017;
    --info: #5C7285;

    --border: color-mix(in srgb, var(--secondary), black 8%);
    --card-bg: var(--secondary);

    --shadow: 0 1rem 3rem -1rem rgba(34, 34, 34, 0.08);
    --shadow-hover: 0 2rem 4rem -1.5rem rgba(34, 34, 34, 0.14);

    --font-title: "Merriweather", Georgia, serif;
    --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* -----------------------------------------------
   RESET
------------------------------------------------ */

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

img,
video {
    max-width: 100%;
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}


/* -----------------------------------------------
   GLOBAL
------------------------------------------------ */

body {
    font-family: var(--font-text);
    background-color: var(--background);
    color: var(--text);
    font-size: 2rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

hr {
    margin: 20px 0;
}


/* -----------------------------------------------
   UTILITAIRES
------------------------------------------------ */

.success {
    color: var(--success);
    font-weight: 800;
}

.danger {
    color: var(--danger);
    font-weight: 800;
}

.warning {
    color: var(--warning);
    font-weight: 800;
}

.info {
    color: var(--info);
    font-weight: 800;
}