/* --------------------------------------------------------------------

Tarification Solidarité Transport
Default Theme Variables
Le Studio, Worldline

-------------------------------------------------------------------- */

@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/Raleway-Regular.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'Raleway-Semi-Bold';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/Raleway-SemiBold.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'Raleway-Bold';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/Raleway-Bold.ttf);
}

:root {
    /* Fonts */
    --stackr: 'Raleway', Helvetica, Arial, sans-serif;
    --stacksb: 'Raleway-Semi-Bold', Helvetica, Arial, sans-serif;
    --stackb: 'Raleway-Bold', Helvetica, Arial, sans-serif;

    /* Media queries */
    /* Les variables ne peuvent pas être utilisées dans les conditons des media-queries. */
    --tablet-min-width: 48rem;
    --desktop-min-width: 65rem;
    --desktop-container-max-width: 108rem;
    --tst-header-bg-padding-y: 1rem;
    --tst-header-bg-padding-x: 2rem;
    --tst-go-to-top-size: 53px;
    --tst-footer-top-distance: calc(1rem + var(--tst-go-to-top-size)); /* Taille de l'image "Go to top" : 53px*53px */

    /* Fonts */
    /* Mobile/Texte XXS (10) */
    --font-size-xxs: 1rem;
    --line-height-xxs: 150%;
    /* Mobile/Texte XS (11) */
    --font-size-xs: 1.1rem;
    --line-height-xs: 150%;
    /* Texte S */
    --font-size-s: 1.5rem;
    --line-height-s: 150%;
    /* Mobile/Texte S semibold */
    --font-size-s-alert: 1.2rem;
    /* Mobile/Texte courant (15) */
    --font-size-courant: 1.5rem;
    --line-height-courant: 150%;
    /* Texte M */
    --font-size-m: 1.8rem;
    --line-height-m: 150%;
    /* Mobile/H2 bold (30) */
    --font-size-h2: 3rem;
    --line-height-h2: 130%;
    /* Mobile/H3 bold (26) */
    --font-size-h3: 2.6rem;
    --line-height-h3: 130%;
    /* Mobile/H4 bold (20) */
    --font-size-h4: 2rem;
    --line-height-h4: 140%;
    /* Mobile/H5, H6 bold (15) */
    --font-size-h5-h6: 1.5rem;
    --line-height-h5-h6: 150%;
    /* Ordinateur/Légende (11) */
    --font-size-legend: 1.1rem;
    --line-height-legend: 150%;
    /* Ordinateur/Texte Formulaire regular (16) */
    --font-size-formulaire: 1.6rem;
    --line-height-formulaire: 150%;
    /* Font-size du délimiteur "OU" sur la page de login */
    --font-size-login-or-delimiter: 2rem;
    --line-height-login-or-delimiter: 150%;


    /* Radius */
    --radius-regular: 0.6rem;

    /* Main colors */
    --idfm-blue: rgb(0, 80, 170);
    /* Bleu d'interaction (Figma) */
    --interaction-blue: #1972D2;
    --focus-blue: #0050AA;
    --light-blue: #F5F9FF; /* Figma: --Bleu-clair */
    --medium-blue: #DEEEFF;
    --idfm-light-blue: #64B5F6;
    --black: #000;

    /* Neutral colors */
    /* Anthracite (Figma) */
    --neutral-text: #25303B;
    /* Gris foncé (Figma) */
    --neutral-dark: #53606E;
    --neutral-medium: #DDDDDD;
    --neutral-light: #F0F0F0;
    /* Blanc (Figma) */
    --neutral-white: #FFF;
    --neutral-secondary: #364152;

    /* Accent colors */
    --accent-warning: #FDB557;
    --accent-error: #C73333;
    --accent-validation: #00873C;
    --gradient-neutral-gray: linear-gradient(90deg, #1d2931, rgba(29, 41, 49, 0) 1.5rem) #25303b;

    /* Figma error color */
    --login-error-color: #CC3939; /* Figma --Rouge-Rouge */
    --login-error-color-to-delete: #D2053C; /* Figma --erreur-color-to-delete */
    /* Character count colors */
    --character-count-color: #df1116;
    --character-count-background-color: #ffefef;

    /* Bandeau colors */
    --bandeau-background-color: #f0f8ff;

    /* "Go to top" icon colors */
    --go-to-top-icon-color: #6e7f92;

    /* Error/Warning/Success colors */
    --error-color: #D60000;
    --warning-color: #a96003;
    --success-color: #358226;

    /* Fraud colors */
    --fraud-border-color: #dee2e6;

    /* Button colors */
    --button-disabled-color: #666666;
    --button-disabled-border-color: #999999;

    /* Figma theme colors (to be used in CSS) */
    /* Primary */
    --theme-primary-background-color: var(--neutral-text);
    --theme-primary-text-color: var(--neutral-white);
    --theme-primary-text-hover-color: var(--idfm-light-blue);
    --theme-primary-border-color: var(--neutral-dark);

    /* Frame */
    --theme-frame-background-color: var(--neutral-light);
    --theme-frame-text-color: var(--neutral-text);
    --theme-frame-label-color: var(--neutral-dark);

    /* Neutral */
    --theme-neutral-background-color: var(--neutral-white);
    --theme-neutral-text-color: var(--neutral-text);
    --theme-neutral-link-hover-color: var(--black);
    --theme-neutral-border-color: var(--neutral-dark);
    --theme-neutral-box-shadow: var(--medium-blue);

    /* Neutral Secondary */
    --theme-neutral-secondary-background-color: var(--light-blue);
    --theme-neutral-secondary-text-color: var(--neutral-text);
    --theme-neutral-secondary-box-shadow: #D2E1F0;

    /* Button */
    --theme-button-background-color: var(--interaction-blue);
    --theme-button-background-hover-color: var(--focus-blue);
    --theme-button-text-color: var(--neutral-white);
    --theme-button-text-hover-color: var(--neutral-white);
    --theme-button-disabled-background-color: var(--neutral-light);
    --theme-button-disabled-text-color: var(--neutral-dark);

    /* Secondary button */
    --theme-secondary-button-background-color: var(--neutral-white);
    --theme-secondary-button-background-hover-color: var(--neutral-light);
    --theme-secondary-button-text-color: var(--interaction-blue);
    --theme-secondary-button-text-hover-color: var(--focus-blue);
    --theme-secondary-button-disabled-background-color: var(--neutral-light);
    --theme-secondary-button-disabled-text-color: var(--neutral-dark);

    /* Go to top icon */
    --theme-go-to-top-icon-background-color: var(--neutral-dark);
    --theme-go-to-top-icon-background-hover-color: var(--go-to-top-icon-color);

    /** Footer **/
    --theme-footer-background-color: var(--neutral-dark);
    --theme-footer-text-color: var(--neutral-white);

    /* Bandeau */
    --theme-bandeau-background-color: var(--bandeau-background-color);
    --theme-bandeau-text-color: var(--neutral-text);

    /* CGU */
    --theme-cgu-background-color: var(--bandeau-background-color);
    --theme-cgu-text-color: var(--interaction-blue);
    --theme-cgu-background-hover-color: var(--interaction-blue);
    --theme-cgu-text-hover-color: var(--neutral-white);

    /* Input */
    --theme-input-label-text-color: var(--neutral-dark);
    --theme-input-text-color: var(--neutral-text);
    --theme-input-background-color: var(--theme-neutral-background-color);
    --theme-input-border-color: var(--theme-neutral-border-color);
    --theme-input-error-color: var(--login-error-color);
    --theme-input-error-color-to-delete: var(--login-error-color-to-delete);
    --theme-input-disabled-text-color: var(--neutral-dark);
    --theme-input-disabled-background-color: var(--neutral-light);
    --theme-input-disabled-border-color: var(--neutral-dark);

    /* Geoportal colors */
    --theme-geoportal-popin-background-color: #ddeaf8;
    --theme-geoportal-popin-item-label-color: #333333;
    --theme-geoportal-popin-even-background-color: var(--neutral-white);
    --theme-geoportal-popin-even-item-label-color: #333333;
    --theme-geoportal-popin-items-border: var(--neutral-medium);

    /* Table */
    --theme-table-th-background-color: var(--medium-blue);
    --theme-table-th-text-color: var(--black);
    --theme-table-tr-odd-background-color: var(--neutral-white);
    --theme-table-tr-odd-text-color: var(--neutral-text);
    --theme-table-tr-even-background-color: var(--neutral-light);
    --theme-table-tr-even-text-color: var(--neutral-text);
    --theme-table-box-shadow: var(--medium-blue);

    .dark-theme {
        /* Primary */
        --theme-primary-background-color: var(--neutral-dark);
        --theme-primary-text-color: var(--light-blue);
        --theme-primary-text-hover-color: var(--neutral-medium);
        --theme-primary-border-color: var(--neutral-white);

        /* Frame */
        --theme-frame-background-color: var(--neutral-dark);
        --theme-frame-text-color: var(--neutral-white);
        --theme-frame-label-color: var(--neutral-white);

        /* Neutral */
        --theme-neutral-background-color: var(--neutral-text);
        --theme-neutral-text-color: var(--neutral-white);
        --theme-neutral-link-hover-color: var(--neutral-light);
        --theme-neutral-border-color: var(--neutral-dark);
        --theme-neutral-box-shadow: var(--black);

        /* Neutral Secondary */
        --theme-neutral-secondary-background-color: var(--focus-blue);
        --theme-neutral-secondary-text-color: var(--neutral-white);
        --theme-neutral-secondary-box-shadow: var(--black);

        /* Button */
        --theme-button-background-color: var(--interaction-blue);
        --theme-button-background-hover-color: var(--focus-blue);
        --theme-button-text-color: var(--medium-blue);
        --theme-button-text-hover-color: var(--medium-blue);
        --theme-button-disabled-background-color: var(--neutral-dark);
        --theme-button-disabled-text-color: var(--neutral-light);

        /* Secondary button */
        --theme-secondary-button-background-color: var(--neutral-text);
        --theme-secondary-button-background-hover-color: var(--neutral-text);
        --theme-secondary-button-text-color: var(--neutral-white);
        --theme-secondary-button-text-hover-color: var(--neutral-light);
        --theme-secondary-button-disabled-background-color: var(--neutral-dark);
        --theme-secondary-button-disabled-text-color: var(--neutral-light);

        /* Go to top icon */
        --theme-go-to-top-icon-background-color: var(--go-to-top-icon-color);
        --theme-go-to-top-icon-background-hover-color: var(--neutral-dark);

        /** Footer **/
        --theme-footer-background-color: var(--neutral-dark);
        --theme-footer-text-color: var(--neutral-white);

        /* Bandeau */
        --theme-bandeau-background-color: var(--interaction-blue);
        --theme-bandeau-text-color: var(--neutral-white);

        /* CGU */
        --theme-cgu-background-color: var(--interaction-blue);
        --theme-cgu-text-color: var(--bandeau-background-color);
        --theme-cgu-background-hover-color: var(--focus-blue);
        --theme-cgu-text-hover-color: var(--neutral-white);

        /* Input */
        --theme-input-label-text-color: var(--neutral-light);
        --theme-input-text-color: var(--light-blue);
        --theme-input-background-color: var(--neutral-text);
        --theme-input-error-color: var(--login-error-color);
        --theme-input-error-color-to-delete: var(--login-error-color-to-delete);
        --theme-input-disabled-text-color: var(--neutral-medium);
        --theme-input-disabled-background-color: var(--neutral-secondary);
        --theme-input-disabled-border-color: var(--neutral-dark);

        /* Geoportal colors */
        --theme-geoportal-popin-background-color: var(--neutral-dark);
        --theme-geoportal-popin-item-label-color: var(--neutral-light);
        --theme-geoportal-popin-even-background-color: var(--neutral-text);
        --theme-geoportal-popin-even-item-label-color: var(--neutral-light);
        --theme-geoportal-popin-items-border: var(--neutral-dark);

        /* Table */
        --theme-table-th-background-color: var(--focus-blue);
        --theme-table-th-text-color: var(--neutral-light);
        --theme-table-tr-odd-background-color: var(--neutral-text);
        --theme-table-tr-odd-text-color: var(--neutral-light);
        --theme-table-tr-even-background-color: var(--neutral-dark);
        --theme-table-tr-even-text-color: var(--neutral-white);
        --theme-table-box-shadow: var(--black);
    }
}

/* For windows with width higher than 48rem (tablet breakpoint) */
@media (min-width: 48rem) {
    :root {
        /* Ordinateur/Texte XXS (12) */
        --font-size-xxs: 1.2rem;
        /* Ordinateur/Texte XS (14) */
        --font-size-xs: 1.4rem;
        /* Ordinateur/Texte S (16) */
        --font-size-s: 1.6rem;
        --font-size-s-alert: 1.6rem;
        /* Texte M */
        --font-size-m: 2rem;
        /* Ordinateur/Texte courant (18) */
        --font-size-courant: 1.8rem;
        /* Ordinateur/H2 bold (36) */
        --font-size-h2: 3.6rem;
        /* Ordinateur/H3 bold (28) */
        --font-size-h3: 2.8rem;
        /* Ordinateur/H4 bold (22) */
        --font-size-h4: 2.2rem;
        /* Ordinateur/H5, H6 bold (18) */
        --font-size-h5-h6: 1.8rem;
        /* Ordinateur/Texte Formulaire regular (16) */
        --font-size-formulaire: 1.6rem;
    }
}