:root {
    --hue-pink: 0.41;
    --hue-red: 27.77;
    --hue-deep-orange: 36.55;
    --hue-orange: 64.49305408048187;
    --hue-amber: 84.43;
    --hue-lime: 111.65;
    --hue-light-green: 130.58;
    --hue-green: 144.31;
    --hue-teal: 184.38;
    --hue-cyan: 210.9385318522298;
    --hue-light-blue: 238.46;
    --hue-indigo: 275.54;
    --hue-deep-purple: 300;
    --hue-purple: 321.42;

    --bs-body-color: #212529;
    --bs-tertiary-bg: #f8f9fa;
    --bs-body-bg: #fff;


    --hue-active: var(--hue-purple);

    --color-primary-white: oklch(93.83% 0.0265 var(--hue-active)); /*100*/
    --color-primary-ultra-light: oklch(87.74% 0.052 var(--hue-active)); /*200*/
    --color-primary-light: oklch(73.57% 0.118 var(--hue-active)); /*400*/
    --color-primary: oklch(65.63% 0.157 var(--hue-active)); /*500*/
    --color-primary-dark: oklch(57.32% 0.194 var(--hue-active)); /*600*/
    --color-primary-ultra-dark: oklch(38% 0.12 var(--hue-active)); /*700*/
    --color-primary-black: oklch(25% 0.05 var(--hue-active)); /*800*/

    --color-purple-ultra-light: oklch(87.74% 0.052 var(--hue-purple)); /*200*/
    --color-purple-light: oklch(73.57% 0.118 var(--hue-purple)); /*400*/
    --color-purple: oklch(65.63% 0.157 var(--hue-purple)); /*500*/
    --color-purple-dark: oklch(57.32% 0.194 var(--hue-purple)); /*600*/
    --color-purple-ultra-dark: oklch(38% 0.12 var(--hue-purple)); /*700*/

    --color-orange-ultra-light: oklch(87.74% 0.052 var(--hue-orange)); /*200*/
    --color-orange-light: oklch(73.57% 0.118 var(--hue-orange)); /*400*/
    --color-orange: oklch(65.63% 0.157 var(--hue-orange)); /*500*/
    --color-orange-dark: oklch(57.32% 0.194 var(--hue-orange)); /*600*/
    --color-orange-ultra-dark: oklch(38% 0.12 var(--hue-orange)); /*700*/

    --color-text: #303030;
    --color-text-light: #707070;
    --color-background: #f3f2f7;

    --hue-success: 144.31;
    --color-success: oklch(64.27% 0.215 var(--hue-success));
    --color-success-light: oklch(68.75% 0.18 var(--hue-success));
    --color-success-ultra-light: oklch(89.31% 0.06 var(--hue-success));
    --color-success-white: oklch(93.83% 0.0265 var(--hue-success));
    --color-success-dark: oklch(57.32% 0.194 var(--hue-success));

    --hue-warning: 84.93;
    --color-warning: oklch(64.27% 0.215 var(--hue-warning));
    --color-warning-light: oklch(68.75% 0.18 var(--hue-warning));
    --color-warning-ultra-light: oklch(89.31% 0.06 var(--hue-warning));
    --color-warning-white: oklch(93.83% 0.0265 var(--hue-warning));
    --color-warning-dark: oklch(57.32% 0.194 var(--hue-warning));

    --hue-danger: 28.81;
    --color-danger: oklch(64.27% 0.215 var(--hue-danger));
    --color-danger-light: oklch(68.75% 0.18 var(--hue-danger));
    --color-danger-ultra-light: oklch(89.31% 0.06 var(--hue-danger));
    --color-danger-white: oklch(93.83% 0.0265 var(--hue-danger));
    --color-danger-dark: oklch(57.32% 0.194 var(--hue-danger));

    /* Catégories d'utilisateurs : une teinte chacune, des teintes bien distinctes.
       solid = fond de l'avatar (initiales en blanc, contraste ≥ 4.5:1) ;
       bg / fg / bd = chip et étiquette teintés (DESIGN_SYSTEM.md, Avatar utilisateur). */
    --cat-prof-hue: var(--hue-indigo);
    --cat-eleve-hue: var(--hue-light-blue);
    --cat-parent-hue: var(--hue-deep-orange);
    --cat-admin-hue: var(--hue-teal);

    --cat-prof-solid: oklch(50% 0.15 var(--cat-prof-hue));
    --cat-prof-bg: oklch(95% 0.025 var(--cat-prof-hue));
    --cat-prof-fg: oklch(42% 0.15 var(--cat-prof-hue));
    --cat-prof-bd: oklch(88% 0.05 var(--cat-prof-hue));

    --cat-eleve-solid: oklch(50% 0.15 var(--cat-eleve-hue));
    --cat-eleve-bg: oklch(95% 0.025 var(--cat-eleve-hue));
    --cat-eleve-fg: oklch(42% 0.15 var(--cat-eleve-hue));
    --cat-eleve-bd: oklch(88% 0.05 var(--cat-eleve-hue));

    --cat-parent-solid: oklch(50% 0.15 var(--cat-parent-hue));
    --cat-parent-bg: oklch(95% 0.025 var(--cat-parent-hue));
    --cat-parent-fg: oklch(42% 0.15 var(--cat-parent-hue));
    --cat-parent-bd: oklch(88% 0.05 var(--cat-parent-hue));

    --cat-admin-solid: oklch(50% 0.1 var(--cat-admin-hue));
    --cat-admin-bg: oklch(95% 0.02 var(--cat-admin-hue));
    --cat-admin-fg: oklch(40% 0.1 var(--cat-admin-hue));
    --cat-admin-bd: oklch(88% 0.04 var(--cat-admin-hue));
}