/*
 * Charte FFVélo : palette du kit de communication (kitcommunication.ffvelo.fr).
 * Police et fond repris de l'ancien formulaire (assemblee-generale.ffvelo.fr).
 */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/open-sans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/open-sans-latin-italic.woff2") format("woff2");
}

:root {
    /*
     * ========================================
     * COULEURS
     * ========================================
     */

    /* Couleur principale */
    --color-primary: #292675;
    --color-primary-hover: #1b195a;

    /* Rouge FFVélo (logo) */
    --color-accent: #e2001a;
    --color-accent-dark: #c81e1d;

    /* Couleurs secondaires */
    --color-secondary: #2e3192;

    /* Texte */
    --color-text: #222222;
    --color-text-muted: #6b6b78;
    --color-text-section: #292675;

    /* Surfaces */
    --color-white: #ffffff;
    --color-input-background: #ffffff;
    --color-surface-muted: #edf0f9;
    --color-border: #dcdee5;
    --color-input-border: #cbcbcb;

    /* États */
    --color-error: #721c24;
    --color-error-background: #f8d7da;
    --color-success: #2f6f3e;
    --color-success-background: #e6f4ea;

    /* Date limite */
    --color-deadline-background: #fde8ea;
    --color-deadline-text: var(--color-accent-dark);


    /*
     * ========================================
     * TYPOGRAPHIE
     * ========================================
     */

    --font-family-base: "Open Sans", Arial, sans-serif;

    --font-size-base: 1rem;
    --font-size-small: 0.9rem;
    --font-size-title: 2rem;
    --font-size-section: 1.25rem;

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /*
     * ========================================
     * ESPACEMENTS
     * ========================================
     */

    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;


    /*
     * ========================================
     * BORDURES
     * ========================================
     */

    --border-width: 1px;
    --border-radius-sm: 7px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;


    /*
     * ========================================
     * OMBRES
     * ========================================
     */

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);


    /*
     * ========================================
     * FORMULAIRES
     * ========================================
     */

    --input-padding: 12px 14px;
    --input-focus-shadow: 0 0 0 3px rgba(41, 38, 117, 0.2);

    --textarea-min-height: 130px;


    /*
     * ========================================
     * LAYOUT
     * ========================================
     */

    --page-max-width: 1000px;
}