/* ==========================================================================
   Jetons de design — source unique des couleurs, tailles et effets.
   Chargé par le dashboard admin ET par l'espace bénévole (/app/).

   Deux niveaux :
   1. Les primitives (--sarcelle-500, --pierre-200…) : la palette brute.
   2. Les jetons sémantiques (--couleur-texte, --couleur-surface…) : ce que
      les composants utilisent. Le mode sombre ne redéfinit que ce second
      niveau (bloc @media prefers-color-scheme en fin de fichier).
   Règle : un composant n'utilise JAMAIS une primitive directement.

   Identité : sarcelle profonde (confiance, solidarité, engagement durable)
   sur des neutres « pierre » légèrement chauds (accueil, chaleur humaine).
   Ratios de contraste vérifiés (clair et sombre) : docs/07-design/01-palette-et-jetons.md.
   ========================================================================== */

:root {
    /* ---- Couleur principale : sarcelle --------------------------------- */
    --sarcelle-50: #effcf8;
    --sarcelle-100: #d5f5ec;
    --sarcelle-200: #ade9da;
    --sarcelle-300: #77d4c0;
    --sarcelle-400: #40b8a1;
    --sarcelle-500: #1f9a85;
    --sarcelle-600: #147d6c;
    --sarcelle-700: #136558;  /* blanc dessus : 6,93:1 */
    --sarcelle-800: #135148;  /* blanc dessus : 9,14:1 */
    --sarcelle-900: #12433c;  /* blanc dessus : 11,09:1 */

    /* ---- Neutres : pierre (gris chaud) --------------------------------- */
    --pierre-0: #ffffff;
    --pierre-50: #f8f7f4;
    --pierre-100: #f1efea;
    --pierre-200: #e4e1da;
    --pierre-300: #cdc8bf;
    --pierre-400: #a19b90;
    --pierre-500: #716b63;    /* 5,1:1 sur blanc, 4,8:1 sur pierre-50 */
    --pierre-600: #5c5750;    /* 7,16:1 sur blanc */
    --pierre-700: #46423c;
    --pierre-800: #2f2c28;
    --pierre-900: #1c1a17;    /* 16,2:1 sur pierre-50 */

    /* ---- Couleurs sémantiques (texte / fond / bordure) ----------------- */
    --succes-texte: #166534;  /* 6,76:1 sur son fond */
    --succes-fond: #ecfdf3;
    --succes-bordure: #a6e3bd;
    --succes-plein: #15803d;

    --alerte-texte: #92400e;  /* 6,84:1 sur son fond */
    --alerte-fond: #fffbeb;
    --alerte-bordure: #fcd34d;
    --alerte-plein: #d97706;

    --erreur-texte: #b42318;  /* 6,05:1 sur son fond, 6,57:1 sur blanc */
    --erreur-fond: #fef3f2;
    --erreur-bordure: #fecdca;
    --erreur-plein: #b42318;
    --erreur-plein-survol: #912018;

    --info-texte: #1e4fa8;    /* 7,05:1 sur son fond */
    --info-fond: #eff6ff;
    --info-bordure: #bfdbfe;

    /* ---- Jetons sémantiques utilisés par les composants ---------------- */
    --couleur-fond: var(--pierre-50);
    --couleur-surface: var(--pierre-0);
    --couleur-surface-douce: var(--pierre-100);
    --couleur-surface-survol: var(--pierre-100);
    --couleur-texte: var(--pierre-900);
    --couleur-texte-secondaire: var(--pierre-600);
    --couleur-texte-discret: var(--pierre-500);
    --couleur-bordure: var(--pierre-200);
    --couleur-bordure-forte: var(--pierre-300);
    /* Bordure des champs : ≥ 3:1 sur blanc (WCAG 1.4.11), ici 5,1:1. */
    --couleur-bordure-champ: var(--pierre-500);
    --couleur-accent: var(--sarcelle-700);
    --couleur-accent-survol: var(--sarcelle-800);
    --couleur-accent-doux: var(--sarcelle-50);
    --couleur-accent-texte: var(--sarcelle-800);
    --couleur-sur-accent: #ffffff;
    /* Anneau de focus : 5:1 sur blanc, 4,7:1 sur le fond de page. */
    --couleur-focus: var(--sarcelle-600);
    --couleur-halo-focus: var(--sarcelle-100);
    --couleur-accent-bordure: var(--sarcelle-200);
    --couleur-accent-vif: var(--sarcelle-300);
    --couleur-surface-laterale: var(--pierre-100);
    --couleur-ligne-survol: var(--pierre-50);
    /* En-têtes collants translucides (effet « verre »). */
    --couleur-surface-verre: rgb(255 255 255 / 0.92);
    --couleur-voile: rgb(28 26 23 / 0.4);
    --couleur-badge-texte: var(--pierre-700);
    --couleur-avatar-fond: var(--sarcelle-100);
    --couleur-avatar-texte: var(--sarcelle-800);
    --couleur-piste: var(--pierre-200);
    --couleur-jauge: var(--sarcelle-600);
    --couleur-squelette: var(--pierre-100);
    --couleur-squelette-reflet: var(--pierre-50);
    --couleur-sur-danger: #ffffff;
    --alerte-icone-fond: #fef3c7;

    /* ---- Typographie ---------------------------------------------------- */
    --police: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-titre: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Échelle fluide : de 320 px à 1440 px de large. */
    --texte-xs: 0.8125rem;
    --texte-sm: 0.875rem;
    --texte-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --texte-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --texte-xl: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
    --texte-2xl: clamp(1.5rem, 1.3rem + 0.95vw, 2.125rem);
    --texte-3xl: clamp(1.875rem, 1.55rem + 1.5vw, 2.75rem);
    --interligne: 1.55;
    --interligne-serre: 1.2;
    --graisse-normale: 400;
    --graisse-moyenne: 500;
    --graisse-forte: 600;
    --graisse-titre: 650;

    /* ---- Espacements (base 4 px) --------------------------------------- */
    --espace-1: 0.25rem;
    --espace-2: 0.5rem;
    --espace-3: 0.75rem;
    --espace-4: 1rem;
    --espace-5: 1.25rem;
    --espace-6: 1.5rem;
    --espace-8: 2rem;
    --espace-10: 2.5rem;
    --espace-12: 3rem;
    --espace-16: 4rem;

    /* ---- Rayons, ombres, mouvements ------------------------------------ */
    --rayon-sm: 6px;
    --rayon: 10px;
    --rayon-lg: 14px;
    --rayon-xl: 20px;
    --rayon-pilule: 999px;

    --ombre-xs: 0 1px 2px rgb(28 26 23 / 0.05);
    --ombre-sm: 0 1px 3px rgb(28 26 23 / 0.07), 0 1px 2px -1px rgb(28 26 23 / 0.05);
    --ombre-md: 0 6px 16px -4px rgb(28 26 23 / 0.1), 0 2px 4px -2px rgb(28 26 23 / 0.06);
    --ombre-lg: 0 24px 48px -12px rgb(28 26 23 / 0.25);

    --duree-rapide: 120ms;
    --duree: 180ms;
    --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Cible tactile minimale (WCAG 2.5.5 / RGAA) : 44 px. */
    --cible: 2.75rem;
    --largeur-contenu: 72rem;

    /* Contrôles natifs (date, heure, barres de défilement) dans le bon thème. */
    color-scheme: light;
}

/* Mouvements réduits : aucune animation ni transition perceptible. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duree-rapide: 0ms;
        --duree: 0ms;
    }
}

/* ==========================================================================
   Mode sombre (préférence du système). Seuls les jetons SÉMANTIQUES changent :
   les composants n'ont rien à savoir. Fond « pierre » très sombre et chaud,
   accent sarcelle éclairci (texte sombre sur les boutons principaux).
   Ratios vérifiés : docs/07-design/01-palette-et-jetons.md (section « Mode sombre »).
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --couleur-fond: #141311;
        --couleur-surface: #1d1b18;
        --couleur-surface-douce: #262420;
        --couleur-surface-survol: #2c2925;
        --couleur-surface-laterale: #191815;
        --couleur-ligne-survol: #23211d;
        --couleur-surface-verre: rgb(29 27 24 / 0.9);
        --couleur-voile: rgb(0 0 0 / 0.6);

        --couleur-texte: #f3f1ec;              /* 15,2:1 sur la surface */
        --couleur-texte-secondaire: #cbc5bb;   /* 10,0:1 */
        --couleur-texte-discret: #a39c90;      /* 6,3:1 */
        --couleur-bordure: #35322d;
        --couleur-bordure-forte: #4a463f;
        --couleur-bordure-champ: #8b8478;      /* 4,6:1 (≥ 3:1) */

        --couleur-accent: var(--sarcelle-300);          /* 9,8:1 sur la surface */
        --couleur-accent-survol: var(--sarcelle-200);
        --couleur-accent-doux: #163530;
        --couleur-accent-texte: var(--sarcelle-200);    /* 9,7:1 sur accent-doux */
        --couleur-accent-bordure: #24584f;
        --couleur-accent-vif: var(--sarcelle-500);
        --couleur-sur-accent: var(--sarcelle-900);      /* 6,3:1 sur l'accent */
        --couleur-focus: var(--sarcelle-400);           /* 7,6:1 sur le fond */
        --couleur-halo-focus: #1c4740;

        --couleur-badge-texte: #e4e1da;
        --couleur-avatar-fond: #1c4740;
        --couleur-avatar-texte: var(--sarcelle-100);
        --couleur-piste: #3a3631;
        --couleur-jauge: var(--sarcelle-400);
        --couleur-squelette: #262420;
        --couleur-squelette-reflet: #302d29;

        --succes-texte: #86efac;
        --succes-fond: #10261a;
        --succes-bordure: #1f5a37;
        --succes-plein: #22c55e;

        --alerte-texte: #fcd34d;
        --alerte-fond: #2a1f09;
        --alerte-bordure: #6b4b0e;
        --alerte-plein: #f59e0b;
        --alerte-icone-fond: #3d2d0c;

        --erreur-texte: #fca5a5;
        --erreur-fond: #2e1513;
        --erreur-bordure: #6e2620;
        /* Bouton « danger » : texte blanc 4,8:1, contour 3,6:1 sur la surface. */
        --erreur-plein: #d92d20;
        --erreur-plein-survol: #b42318;

        --info-texte: #93c5fd;
        --info-fond: #0f1d33;
        --info-bordure: #1e3a66;

        --ombre-xs: 0 1px 2px rgb(0 0 0 / 0.4);
        --ombre-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4);
        --ombre-md: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.4);
        --ombre-lg: 0 24px 48px -12px rgb(0 0 0 / 0.7);
    }
}