@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Logo - principales */
    --sm-blue: #2E52A1;
    --sm-red: #E5173A;
    --sm-white: #FFFFFF;
    --sm-black: #000000;

    /* Secondaires */
    --sm-s2-blue: #2E52A1;
    --sm-s2-taupe: #CCB69B;
    --sm-s2-wine: #AF1B3F;
    --sm-s2-peach: #EFC69B;
    --sm-s2-red: #E6173A;
    --sm-s2-lime: #C5D86D;
    --sm-s2-cream: #FFEDDF;
    --sm-s2-navy: #0D1321;

    /* Mapping des variables existantes de utils.css */
    --main-color: var(--sm-red);
    --main-color-light: var(--sm-s2-red);
    --main-blue: var(--sm-blue);

    --text-black: var(--sm-s2-navy);
    --text-gray: #5f6b7d;
    --input-label-color: #64748b;

    --main-font: "Libre Franklin", sans-serif;
    --cursive-font: "Libre Franklin", sans-serif;

    --gold-color: var(--sm-s2-peach);
    --success: #6f8f2f;
    --danger: var(--sm-red);
    --primary: var(--sm-blue);
    --info: var(--sm-s2-blue);
    --royal-blue: var(--sm-blue);

    --blue-gray-color: #4a76a8;
    --border-color: #d9dde6;
    --main-background: var(--sm-s2-cream);

    --page-header-bgColor: var(--sm-white);
    --page-header-bgColor-hover: var(--sm-blue);
    --page-header-txtColor: var(--sm-s2-navy);
    --page-header-headingColor: var(--sm-red);

    --page-content-bgColor: var(--sm-white);
    --page-content-txtColor: var(--sm-s2-navy);
    --page-content-blockColor: var(--sm-white);

    --white: #fff;
    --black: #000;

    --switch-bgLightModeColor: #c5d7ff;
    --switch-sunColor: #efc69b;
    --switch-moonColor: #f4f4f4;
    --switch-bgDarkModeColor: #1f1f27;
}

html, body, button, input, select, textarea {
    font-family: var(--main-font) !important;
}

/* Boutons/classes existantes */
.bg-main-color {
    background-color: var(--main-color) !important;
}

.hover-main-color:hover {
    background-color: var(--main-color) !important;
}

.bg-main-blue {
    background-color: var(--main-blue) !important;
}

.text-main-color {
    color: var(--main-color) !important;
}

.text-main-blue {
    color: var(--main-blue) !important;
}

.submit-btn,
.btn-submit {
    background-color: var(--main-blue) !important;
    color: #fff !important;
}

.bg-btn-add {
    background-color: var(--sm-blue) !important;
    color: #fff !important;
}

.bg-btn-update {
    background-color: var(--sm-s2-wine) !important;
    color: #fff !important;
}

.bg-btn-delete {
    background-color: var(--sm-red) !important;
    color: #fff !important;
}

.page-header .admin-menu a:hover,
.page-header .admin-menu button:hover,
.page-header .admin-menu a.active-link,
.page-header .admin-menu button.active-link {
    background: #264690 !important;
    color: #fff !important;
}

.page-header .admin-menu a:hover iconify-icon,
.page-header .admin-menu button:hover iconify-icon,
.page-header .admin-menu a.active-link iconify-icon,
.page-header .admin-menu button.active-link iconify-icon {
    color: #fff !important;
}

/* login/welcome background helper */
.bg-main-gradient {
    background: linear-gradient(225deg, var(--sm-blue), var(--sm-white)) !important;
}

/* logo sizing global */
.page-header .logo img,
.brand img {
    max-height: 70px;
    width: auto;
}