/*
 * md3-tokens.css — Tokens Material Design 3
 * ============================================
 * Toutes les variables CSS du système de design.
 * Ce fichier ne génère AUCUN style visible.
 * Il définit uniquement les tokens utilisés par md3-base.css et md3-components.css.
 *
 * Source officielle : https://m3.material.io/foundations/design-tokens/overview
 *
 * PERSONNALISATION :
 * Pour adapter la palette à votre marque, modifiez uniquement les valeurs
 * dans :root (mode clair) et @media (prefers-color-scheme: dark).
 * Tous les composants s'adaptent automatiquement.
 *
 * Outil officiel de génération de palette MD3 :
 * https://material-foundation.github.io/material-theme-builder/
 */

/* =============================================================================
	SCHÉMA DE COULEURS — MODE CLAIR (par défaut)
============================================================================= */

:root {
/* ── Couleur Primaire ──────────────────────────────────────────────────── */
	--md-sys-color-primary:                 #8F4953;
	--md-sys-color-on-primary:              #FFFFFF;
	--md-sys-color-primary-container:       #FFD9DC;
	--md-sys-color-on-primary-container:    #72333C;

/* ── Couleur Secondaire ───────────────────────────────────────────────── */
	--md-sys-color-secondary:               #765659;
	--md-sys-color-on-secondary:            #FFFFFF;
	--md-sys-color-secondary-container:     #FFD9DC;
	--md-sys-color-on-secondary-container:  #5C3F42;

/* ── Couleur Tertiaire ────────────────────────────────────────────────── */
	--md-sys-color-tertiary:                #785830;
	--md-sys-color-on-tertiary:             #FFFFFF;
	--md-sys-color-tertiary-container:      #FFDDB7;
	--md-sys-color-on-tertiary-container:   #5E411B;

/* ── Couleur Erreur ───────────────────────────────────────────────────── */
	--md-sys-color-error:                   #BA1A1A;
	--md-sys-color-on-error:                #FFFFFF;
	--md-sys-color-error-container:         #FFDAD6;
	--md-sys-color-on-error-container:      #93000A;

/* ── Fond & Surface ───────────────────────────────────────────────────── */
	--md-sys-color-background:              #FFF8F7;
	--md-sys-color-on-background:           #22191A;
	--md-sys-color-surface:                 #FFF8F7;
	--md-sys-color-on-surface:              #22191A;
	--md-sys-color-surface-variant:         #F4DDDE;
	--md-sys-color-on-surface-variant:      #524344;

/* ── Niveaux de conteneur de surface (MD3 tonal surface) ─────────────── */
	--md-sys-color-surface-dim:             #DED8E1;
	--md-sys-color-surface-bright:          #FFFBFE;
	--md-sys-color-surface-container-lowest:  #FFFFFF;
	--md-sys-color-surface-container-low:     #F7F2FA;
	--md-sys-color-surface-container:         #F3EDF7;
	--md-sys-color-surface-container-high:    #ECE6F0;
	--md-sys-color-surface-container-highest: #E6E0E9;

/* ── Contours ─────────────────────────────────────────────────────────── */
	--md-sys-color-outline:                 #847374;
	--md-sys-color-outline-variant:         #D7C1C3;

/* ── Ombre & Scrim ────────────────────────────────────────────────────── */
	--md-sys-color-shadow:                  #000000;
	--md-sys-color-scrim:                   #000000;

/* ── Inverse ──────────────────────────────────────────────────────────── */
	--md-sys-color-inverse-surface:         #382E2F;
	--md-sys-color-inverse-on-surface:      #FEEDED;
	--md-sys-color-inverse-primary:         #FFB2BA;

/* ── Teinte de surface (tonal elevation) ──────────────────────────────── */
/* MD3 applique la couleur primaire en overlay semi-transparent sur les surfaces élevées pour signifier l'élévation. */
	--md-sys-color-surface-tint:            #8F4953;
	
	--md-sys-color-primary-fixed: #FFD9DC;
	--md-sys-color-on-primary-fixed: #3B0713;
	--md-sys-color-primary-fixed-dim: #FFB2BA;
	--md-sys-color-on-primary-fixed-variant: #72333C;
	
	--md-sys-color-secondary-fixed: #FFD9DC;
	--md-sys-color-on-secondary-fixed: #2C1518;
	--md-sys-color-secondary-fixed-dim: #E5BDC0;
	--md-sys-color-on-secondary-fixed-variant: #5C3F42;
	
	--md-sys-color-tertiary-fixed: #FFDDB7;
	--md-sys-color-on-tertiary-fixed: #2A1700;
	--md-sys-color-tertiary-fixed-dim: #E9BF8F;
	--md-sys-color-on-tertiary-fixed-variant: #5E411B;
	
	--md-sys-color-surface-dim: #E7D6D7;
	--md-sys-color-surface-bright: #FFF8F7;
	--md-sys-color-surface-container-lowest: #FFFFFF;
	--md-sys-color-surface-container-low: #FFF0F0;
	--md-sys-color-surface-container: #FCEAEA;
	--md-sys-color-surface-container-high: #F6E4E5;
	--md-sys-color-surface-container-highest: #F0DEDF;

/* ==========================================================================
	ÉCHELLE TYPOGRAPHIQUE MD3
	Roboto est la police MD3 de référence. Chargez-la via Google Fonts ou
	remplacez par votre propre police dans les tokens --md-sys-typescale-*.
========================================================================== */

/* ── Familles de polices ──────────────────────────────────────────────── */
	--md-sys-typescale-display-font: 	"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--md-sys-typescale-headline-font: 	"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--md-sys-typescale-title-font: 		"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--md-sys-typescale-body-font: 		"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--md-sys-typescale-label-font:		"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

/* ── Display Large ─────────────────────────────────────────────────────── */
	--md-sys-typescale-display-large-size:          3.5625rem;   /* 57px */
	--md-sys-typescale-display-large-line-height:   4rem;        /* 64px */
	--md-sys-typescale-display-large-tracking:      -0.015625rem;/* -0.25px */
	--md-sys-typescale-display-large-weight:        400;

/* ── Display Medium ────────────────────────────────────────────────────── */
	--md-sys-typescale-display-medium-size:         2.8125rem;   /* 45px */
	--md-sys-typescale-display-medium-line-height:  3.25rem;     /* 52px */
	--md-sys-typescale-display-medium-tracking:     0;
	--md-sys-typescale-display-medium-weight:       400;

/* ── Display Small ─────────────────────────────────────────────────────── */
	--md-sys-typescale-display-small-size:          2.25rem;     /* 36px */
	--md-sys-typescale-display-small-line-height:   2.75rem;     /* 44px */
	--md-sys-typescale-display-small-tracking:      0;
	--md-sys-typescale-display-small-weight:        400;

/* ── Headline Large ────────────────────────────────────────────────────── */
	--md-sys-typescale-headline-large-size:         2rem;        /* 32px */
	--md-sys-typescale-headline-large-line-height:  2.5rem;      /* 40px */
	--md-sys-typescale-headline-large-tracking:     0;
	--md-sys-typescale-headline-large-weight:       400;

/* ── Headline Medium ───────────────────────────────────────────────────── */
	--md-sys-typescale-headline-medium-size:        1.75rem;     /* 28px */
	--md-sys-typescale-headline-medium-line-height: 2.25rem;     /* 36px */
	--md-sys-typescale-headline-medium-tracking:    0;
	--md-sys-typescale-headline-medium-weight:      400;

/* ── Headline Small ────────────────────────────────────────────────────── */
	--md-sys-typescale-headline-small-size:         1.5rem;      /* 24px */
	--md-sys-typescale-headline-small-line-height:  2rem;        /* 32px */
	--md-sys-typescale-headline-small-tracking:     0;
	--md-sys-typescale-headline-small-weight:       400;

/* ── Title Large ───────────────────────────────────────────────────────── */
	--md-sys-typescale-title-large-size:            1.375rem;    /* 22px */
	--md-sys-typescale-title-large-line-height:     1.75rem;     /* 28px */
	--md-sys-typescale-title-large-tracking:        0;
	--md-sys-typescale-title-large-weight:          400;

/* ── Title Medium ──────────────────────────────────────────────────────── */
	--md-sys-typescale-title-medium-size:           1rem;        /* 16px */
	--md-sys-typescale-title-medium-line-height:    1.5rem;      /* 24px */
	--md-sys-typescale-title-medium-tracking:       0.009375rem; /* 0.15px */
	--md-sys-typescale-title-medium-weight:         500;

/* ── Title Small ───────────────────────────────────────────────────────── */
	--md-sys-typescale-title-small-size:            0.875rem;    /* 14px */
	--md-sys-typescale-title-small-line-height:     1.25rem;     /* 20px */
	--md-sys-typescale-title-small-tracking:        0.00625rem;  /* 0.1px */
	--md-sys-typescale-title-small-weight:          500;

/* ── Body Large ────────────────────────────────────────────────────────── */
	--md-sys-typescale-body-large-size:             1rem;        /* 16px */
	--md-sys-typescale-body-large-line-height:      1.5rem;      /* 24px */
	--md-sys-typescale-body-large-tracking:         0.03125rem;  /* 0.5px */
	--md-sys-typescale-body-large-weight:           400;

/* ── Body Medium ───────────────────────────────────────────────────────── */
	--md-sys-typescale-body-medium-size:            0.875rem;    /* 14px */
	--md-sys-typescale-body-medium-line-height:     1.25rem;     /* 20px */
	--md-sys-typescale-body-medium-tracking:        0.015625rem; /* 0.25px */
	--md-sys-typescale-body-medium-weight:          400;

/* ── Body Small ────────────────────────────────────────────────────────── */
	--md-sys-typescale-body-small-size:             0.75rem;     /* 12px */
	--md-sys-typescale-body-small-line-height:      1rem;        /* 16px */
	--md-sys-typescale-body-small-tracking:         0.025rem;    /* 0.4px */
	--md-sys-typescale-body-small-weight:           400;

/* ── Label Large ───────────────────────────────────────────────────────── */
	--md-sys-typescale-label-large-size:            0.875rem;    /* 14px */
	--md-sys-typescale-label-large-line-height:     1.25rem;     /* 20px */
	--md-sys-typescale-label-large-tracking:        0.00625rem;  /* 0.1px */
	--md-sys-typescale-label-large-weight:          500;

/* ── Label Medium ──────────────────────────────────────────────────────── */
	--md-sys-typescale-label-medium-size:           0.75rem;     /* 12px */
	--md-sys-typescale-label-medium-line-height:    1rem;        /* 16px */
	--md-sys-typescale-label-medium-tracking:       0.03125rem;  /* 0.5px */
	--md-sys-typescale-label-medium-weight:         500;

/* ── Label Small ───────────────────────────────────────────────────────── */
	--md-sys-typescale-label-small-size:            0.6875rem;   /* 11px */
	--md-sys-typescale-label-small-line-height:     1rem;        /* 16px */
	--md-sys-typescale-label-small-tracking:        0.03125rem;  /* 0.5px */
	--md-sys-typescale-label-small-weight:          500;

/* ==========================================================================
	FORMES (SHAPE) — Rayons de coins
========================================================================== */

	--md-sys-shape-corner-none:        0px;
	--md-sys-shape-corner-extra-small: 4px;
	--md-sys-shape-corner-small:       8px;
	--md-sys-shape-corner-medium:      12px;
	--md-sys-shape-corner-large:       16px;
	--md-sys-shape-corner-extra-large: 28px;
	--md-sys-shape-corner-full:        9999px;

/* ==========================================================================
	ÉLÉVATION — Ombres portées
	MD3 combine ombres et "tonal elevation" (teinte de couleur primaire).
========================================================================== */

	--md-sys-elevation-level0: none;
	--md-sys-elevation-level1:
		0px 1px 2px 0px rgba(0,0,0,.3),
		0px 1px 3px 1px rgba(0,0,0,.15);
	--md-sys-elevation-level2:
		0px 1px 2px 0px rgba(0,0,0,.3),
		0px 2px 6px 2px rgba(0,0,0,.15);
	--md-sys-elevation-level3:
		0px 1px 3px 0px rgba(0,0,0,.3),
		0px 4px 8px 3px rgba(0,0,0,.15);
	--md-sys-elevation-level4:
		0px 2px 3px 0px rgba(0,0,0,.3),
		0px 6px 10px 4px rgba(0,0,0,.15);
	--md-sys-elevation-level5:
		0px 4px 4px 0px rgba(0,0,0,.3),
		0px 8px 12px 6px rgba(0,0,0,.15);

/* ==========================================================================
	COUCHES D'ÉTAT (STATE LAYERS)
	Opacités MD3 pour les états interactifs
========================================================================== */

	--md-sys-state-hover-opacity:             0.08;
	--md-sys-state-focus-opacity:             0.12;
	--md-sys-state-pressed-opacity:           0.12;
	--md-sys-state-dragged-opacity:           0.16;
	--md-sys-state-disabled-content-opacity:  0.38;
	--md-sys-state-disabled-container-opacity: 0.12;

/* ==========================================================================
	MOUVEMENT (MOTION)
========================================================================== */

/* ── Durées ────────────────────────────────────────────────────────────── */
	--md-sys-motion-duration-short1:      50ms;
	--md-sys-motion-duration-short2:      100ms;
	--md-sys-motion-duration-short3:      150ms;
	--md-sys-motion-duration-short4:      200ms;
	--md-sys-motion-duration-medium1:     250ms;
	--md-sys-motion-duration-medium2:     300ms;
	--md-sys-motion-duration-medium3:     350ms;
	--md-sys-motion-duration-medium4:     400ms;
	--md-sys-motion-duration-long1:       450ms;
	--md-sys-motion-duration-long2:       500ms;

/* ── Courbes d'accélération (easing) ──────────────────────────────────── */
	--md-sys-motion-easing-emphasized:          cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-emphasized-decel:    cubic-bezier(0.05, 0.7, 0.1, 1);
	--md-sys-motion-easing-emphasized-accel:    cubic-bezier(0.3, 0, 0.8, 0.15);
	--md-sys-motion-easing-standard:            cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-standard-decel:      cubic-bezier(0, 0, 0, 1);
	--md-sys-motion-easing-standard-accel:      cubic-bezier(0.3, 0, 1, 1);

/* ==========================================================================
	ESPACEMENT (utilitaire, non officiel MD3 mais cohérent)
	Basé sur une grille de 4dp
========================================================================== */

	--md-spacing-1:   4px;
	--md-spacing-2:   8px;
	--md-spacing-3:   12px;
	--md-spacing-4:   16px;
	--md-spacing-5:   20px;
	--md-spacing-6:   24px;
	--md-spacing-8:   32px;
	--md-spacing-10:  40px;
	--md-spacing-12:  48px;
	--md-spacing-16:  64px;
	--md-spacing-20:  80px;
	--md-spacing-24:  96px;
}

/* =============================================================================
	SCHÉMA DE COULEURS — MODE SOMBRE
	Activé automatiquement si l'OS est en dark mode.
	Ajoutez la classe .reverse-color-scheme sur <html> pour forcer le light/dark mode en JS.
============================================================================= */

@media (prefers-color-scheme: dark) {
	html:not(.reverse-color-scheme) {
		--md-sys-color-primary: #FFB2BA;
		--md-sys-color-on-primary: #561D27;
		--md-sys-color-primary-container: #72333C;
		--md-sys-color-on-primary-container: #FFD9DC;
		
		--md-sys-color-secondary: #E5BDC0;
		--md-sys-color-on-secondary: #43292C;
		--md-sys-color-secondary-container: #5C3F42;
		--md-sys-color-on-secondary-container: #FFD9DC;
		
		--md-sys-color-tertiary: #E9BF8F;
		--md-sys-color-on-tertiary: #442B07;
		--md-sys-color-tertiary-container: #5E411B;
		--md-sys-color-on-tertiary-container: #FFDDB7;
		
		--md-sys-color-error: #FFB4AB;
		--md-sys-color-on-error: #690005;
		--md-sys-color-error-container: #93000A;
		--md-sys-color-on-error-container: #FFDAD6;
		
		--md-sys-color-background: #1A1112;
		--md-sys-color-on-background: #F0DEDF;
		
		--md-sys-color-surface-tint: #FFB2BA;
		--md-sys-color-surface: #1A1112;
		--md-sys-color-on-surface: #F0DEDF;
		--md-sys-color-surface-variant: #524344;
		--md-sys-color-on-surface-variant: #D7C1C3;
		
		--md-sys-color-outline: #9F8C8D;
		--md-sys-color-outline-variant: #524344;
		--md-sys-color-shadow: #000000;
		--md-sys-color-scrim: #000000;
		
		--md-sys-color-inverse-surface: #F0DEDF;
		--md-sys-color-inverse-on-surface: #382E2F;
		--md-sys-color-inverse-primary: #8F4953;
		
		--md-sys-color-primary-fixed: #FFD9DC;
		--md-sys-color-on-primary-fixed: #3B0713;
		--md-sys-color-primary-fixed-dim: #FFB2BA;
		--md-sys-color-on-primary-fixed-variant: #72333C;
		
		--md-sys-color-secondary-fixed: #FFD9DC;
		--md-sys-color-on-secondary-fixed: #2C1518;
		--md-sys-color-secondary-fixed-dim: #E5BDC0;
		--md-sys-color-on-secondary-fixed-variant: #5C3F42;
		
		--md-sys-color-tertiary-fixed: #FFDDB7;
		--md-sys-color-on-tertiary-fixed: #2A1700;
		--md-sys-color-tertiary-fixed-dim: #E9BF8F;
		--md-sys-color-on-tertiary-fixed-variant: #5E411B;
		
		--md-sys-color-surface-dim: #1A1112;
		--md-sys-color-surface-bright: #413737;
		--md-sys-color-surface-container-lowest: #140C0D;
		--md-sys-color-surface-container-low: #22191A;
		--md-sys-color-surface-container: #261D1E;
		--md-sys-color-surface-container-high: #312828;
		--md-sys-color-surface-container-highest: #3D3233;

	/* Les ombres sont moins visibles en dark mode — MD3 compense
		   avec la tonal elevation (teinte de couleur sur les surfaces). */
		--md-sys-elevation-level1:
			0px 1px 2px 0px rgba(90,70,70,.6),
			0px 1px 3px 1px rgba(90,70,70,.3);
		--md-sys-elevation-level2:
			0px 1px 2px 0px rgba(90,70,70,.6),
			0px 2px 6px 2px rgba(90,70,70,.3);
		--md-sys-elevation-level3:
			0px 1px 3px 0px rgba(90,70,70,.6),
			0px 4px 8px 3px rgba(90,70,70,.3);
		--md-sys-elevation-level4:
			0px 2px 3px 0px rgba(90,70,70,.6),
			0px 6px 10px 4px rgba(90,70,70,.3);
		--md-sys-elevation-level5:
			0px 4px 4px 0px rgba(90,70,70,.6),
			0px 8px 12px 6px rgba(90,70,70,.3);
	}

	html:not(.reverse-color-scheme) .em-icon {
		filter: invert(1);
	}
}

@media not(prefers-color-scheme: dark) {
	html.reverse-color-scheme {
		--md-sys-color-primary: #FFB2BA;
		--md-sys-color-on-primary: #561D27;
		--md-sys-color-primary-container: #72333C;
		--md-sys-color-on-primary-container: #FFD9DC;
		
		--md-sys-color-secondary: #E5BDC0;
		--md-sys-color-on-secondary: #43292C;
		--md-sys-color-secondary-container: #5C3F42;
		--md-sys-color-on-secondary-container: #FFD9DC;
		
		--md-sys-color-tertiary: #E9BF8F;
		--md-sys-color-on-tertiary: #442B07;
		--md-sys-color-tertiary-container: #5E411B;
		--md-sys-color-on-tertiary-container: #FFDDB7;
		
		--md-sys-color-error: #FFB4AB;
		--md-sys-color-on-error: #690005;
		--md-sys-color-error-container: #93000A;
		--md-sys-color-on-error-container: #FFDAD6;
		
		--md-sys-color-background: #1A1112;
		--md-sys-color-on-background: #F0DEDF;
		
		--md-sys-color-surface-tint: #FFB2BA;
		--md-sys-color-surface: #1A1112;
		--md-sys-color-on-surface: #F0DEDF;
		--md-sys-color-surface-variant: #524344;
		--md-sys-color-on-surface-variant: #D7C1C3;
		
		--md-sys-color-outline: #9F8C8D;
		--md-sys-color-outline-variant: #524344;
		--md-sys-color-shadow: #000000;
		--md-sys-color-scrim: #000000;
		
		--md-sys-color-inverse-surface: #F0DEDF;
		--md-sys-color-inverse-on-surface: #382E2F;
		--md-sys-color-inverse-primary: #8F4953;
		
		--md-sys-color-primary-fixed: #FFD9DC;
		--md-sys-color-on-primary-fixed: #3B0713;
		--md-sys-color-primary-fixed-dim: #FFB2BA;
		--md-sys-color-on-primary-fixed-variant: #72333C;
		
		--md-sys-color-secondary-fixed: #FFD9DC;
		--md-sys-color-on-secondary-fixed: #2C1518;
		--md-sys-color-secondary-fixed-dim: #E5BDC0;
		--md-sys-color-on-secondary-fixed-variant: #5C3F42;
		
		--md-sys-color-tertiary-fixed: #FFDDB7;
		--md-sys-color-on-tertiary-fixed: #2A1700;
		--md-sys-color-tertiary-fixed-dim: #E9BF8F;
		--md-sys-color-on-tertiary-fixed-variant: #5E411B;
		
		--md-sys-color-surface-dim: #1A1112;
		--md-sys-color-surface-bright: #413737;
		--md-sys-color-surface-container-lowest: #140C0D;
		--md-sys-color-surface-container-low: #22191A;
		--md-sys-color-surface-container: #261D1E;
		--md-sys-color-surface-container-high: #312828;
		--md-sys-color-surface-container-highest: #3D3233;
		
/* Les ombres sont moins visibles en dark mode — MD3 compense avec la tonal elevation (teinte de couleur sur les surfaces). */
		--md-sys-elevation-level1:
			0px 1px 2px 0px rgba(90,70,70,.6),
			0px 1px 3px 1px rgba(90,70,70,.3);
		--md-sys-elevation-level2:
			0px 1px 2px 0px rgba(90,70,70,.6),
			0px 2px 6px 2px rgba(90,70,70,.3);
		--md-sys-elevation-level3:
			0px 1px 3px 0px rgba(90,70,70,.6),
			0px 4px 8px 3px rgba(90,70,70,.3);
		--md-sys-elevation-level4:
			0px 2px 3px 0px rgba(90,70,70,.6),
			0px 6px 10px 4px rgba(90,70,70,.3);
		--md-sys-elevation-level5:
			0px 4px 4px 0px rgba(90,70,70,.6),
			0px 8px 12px 6px rgba(90,70,70,.3);
	}

	html.reverse-color-scheme .em-icon {
		filter: invert(1);
	}
}