/* ============================================================
   DESIGN SYSTEM — CHRISTOPHE-SEILER.COM
   ------------------------------------------------------------
   Jetons partagés par toutes les applications de l'écosystème.
   Ce fichier ne contient AUCUN sélecteur de composant : rien
   que des variables. Il peut être repris tel quel ailleurs.
   ============================================================ */

/* ------------------------------------------------------------
   1. POLICES
   DM Sans pour les titres, Inter pour l'interface.
   font-display: swap — le texte reste lisible pendant le
   chargement, ce qui vaut mieux qu'une page blanche.
   ------------------------------------------------------------ */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/dm-sans-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------
   2. PALETTE DE MARQUE
   Ces sept couleurs ne changent jamais, quel que soit le thème.
   Les thèmes ne font que les affecter à des rôles.
   ------------------------------------------------------------ */
:root {
	--forest-900: #2F332D;
	--forest-800: #343832;
	--forest-700: #3F453D;
	--sage-500:   #7A8576;
	--spring-200: #D1E3CA;
	--sand-100:   #E8DFD2;

	/* Terracotta : réservé aux erreurs et aux actions destructrices.
	   Jamais en couleur d'accent générale — c'est ce qui lui garde
	   sa force quand elle apparaît. */
	--terracotta: #B9785D;

	/* ---- Typographie ---- */
	--font-titre: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:  ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

	/* Échelle typographique fluide : une seule valeur par palier,
	   qui s'adapte à la largeur sans point de rupture. */
	--t-xs:   0.75rem;
	--t-sm:   0.8125rem;
	--t-base: 0.9375rem;
	--t-md:   1rem;
	--t-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--t-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--t-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--t-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);

	--lh-serre: 1.2;
	--lh-titre: 1.25;
	--lh-texte: 1.6;

	/* ---- Espacement ---- */
	--e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
	--e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4rem;

	/* ---- Rayons ---- */
	--radius:    16px;
	--radius-sm: 10px;
	--radius-xs: 8px;
	--radius-pill: 999px;

	/* ---- Mouvement ---- */
	--ease:     cubic-bezier(0.32, 0.72, 0, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-rapide: 0.15s;
	--t-moyen:  0.25s;
	--t-lent:   0.4s;

	/* ---- Empilement ---- */
	--z-entete: 60;
	--z-toast:  120;
	--z-modale: 140;
	--z-skip:   200;

	/* ---- Gabarit ---- */
	--largeur:       880px;
	--largeur-large: 1240px;
	--entete-h:      62px;
	--cible-tactile: 44px;

	/* ---- Encoches ---- */
	--enc-haut:   env(safe-area-inset-top, 0px);
	--enc-droite: env(safe-area-inset-right, 0px);
	--enc-bas:    env(safe-area-inset-bottom, 0px);
	--enc-gauche: env(safe-area-inset-left, 0px);
}

/* ------------------------------------------------------------
   3. THÈME CLAIR  (défaut)
   ------------------------------------------------------------ */
:root,
[data-theme='light'] {
	color-scheme: light;

	--bg:             #F7F8F4;
	--surface:        #FFFFFF;
	--surface-subtle: #EEF1EA;
	--surface-hover:  #E7EBE2;

	--primary:        #3F453D;
	--primary-dark:   #2F332D;
	--primary-contre: #FFFFFF;

	--text:           #2F332D;
	--text-secondary: #5F675C;
	--text-muted:     #7A8576;

	--border:        #DDE3D8;
	--border-strong: #C3CDBC;

	--accent:      #D1E3CA;
	--accent-fort: #4A6B3E;
	--accent-doux: #EAF2E5;

	--sable:      #E8DFD2;
	--sable-doux: #F4EFE7;

	--ok:        #3F6B4A;
	--ok-fond:   #E7F1E6;
	--attention: #8A6A2F;
	--att-fond:  #F7EFDF;
	--danger:      #9C4A31;
	--danger-fond: #F7E8E2;

	/* Ombres très discrètes : l'interface doit respirer, pas
	   flotter. Deux couches, opacité faible, teintées de vert
	   plutôt que de noir pur. */
	--ombre-1: 0 1px 2px rgba(47, 51, 45, 0.04), 0 1px 3px rgba(47, 51, 45, 0.03);
	--ombre-2: 0 2px 6px rgba(47, 51, 45, 0.05), 0 4px 14px rgba(47, 51, 45, 0.04);
	--ombre-3: 0 8px 24px rgba(47, 51, 45, 0.09), 0 2px 8px rgba(47, 51, 45, 0.05);

	--halo: 0 0 0 3px rgba(63, 69, 61, 0.18);
}

/* ------------------------------------------------------------
   4. THÈME SOMBRE
   Pas une inversion : les rôles changent. Le vert clair devient
   la couleur d'action, les surfaces s'éclaircissent par paliers,
   et les bordures portent la séparation à la place des ombres —
   une ombre ne se voit pas sur fond sombre.
   ------------------------------------------------------------ */
[data-theme='dark'] {
	color-scheme: dark;

	--bg:             #1D211C;
	--surface:        #252A24;
	--surface-subtle: #2F332D;
	--surface-hover:  #383D36;

	--primary:        #D1E3CA;
	--primary-dark:   #E2F0DC;
	--primary-contre: #1D211C;

	--text:           #F2F5EE;
	--text-secondary: #C4CCC0;
	--text-muted:     #929D8F;

	--border:        #3F453D;
	--border-strong: #545C51;

	--accent:      #D1E3CA;
	--accent-fort: #D1E3CA;
	--accent-doux: rgba(209, 227, 202, 0.10);

	--sable:      #E8DFD2;
	--sable-doux: rgba(232, 223, 210, 0.10);

	--ok:        #A8D8B0;
	--ok-fond:   rgba(168, 216, 176, 0.12);
	--attention: #E6C285;
	--att-fond:  rgba(230, 194, 133, 0.12);
	--danger:      #E4A08A;
	--danger-fond: rgba(228, 160, 138, 0.12);

	--ombre-1: 0 1px 2px rgba(0, 0, 0, 0.30);
	--ombre-2: 0 2px 8px rgba(0, 0, 0, 0.35);
	--ombre-3: 0 10px 30px rgba(0, 0, 0, 0.45);

	--halo: 0 0 0 3px rgba(209, 227, 202, 0.28);
}

/* ------------------------------------------------------------
   5. THÈME SYSTÈME
   data-theme="system" suit la préférence de l'appareil. Le
   script du <head> pose déjà la valeur résolue pour éviter le
   flash ; cette règle est le filet de sécurité si le script
   n'a pas pu s'exécuter.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	[data-theme='system'] {
		color-scheme: dark;

		--bg:             #1D211C;
		--surface:        #252A24;
		--surface-subtle: #2F332D;
		--surface-hover:  #383D36;

		--primary:        #D1E3CA;
		--primary-dark:   #E2F0DC;
		--primary-contre: #1D211C;

		--text:           #F2F5EE;
		--text-secondary: #C4CCC0;
		--text-muted:     #929D8F;

		--border:        #3F453D;
		--border-strong: #545C51;

		--accent-fort: #D1E3CA;
		--accent-doux: rgba(209, 227, 202, 0.10);
		--sable-doux:  rgba(232, 223, 210, 0.10);

		--ok:        #A8D8B0;
		--ok-fond:   rgba(168, 216, 176, 0.12);
		--attention: #E6C285;
		--att-fond:  rgba(230, 194, 133, 0.12);
		--danger:      #E4A08A;
		--danger-fond: rgba(228, 160, 138, 0.12);

		--ombre-1: 0 1px 2px rgba(0, 0, 0, 0.30);
		--ombre-2: 0 2px 8px rgba(0, 0, 0, 0.35);
		--ombre-3: 0 10px 30px rgba(0, 0, 0, 0.45);

		--halo: 0 0 0 3px rgba(209, 227, 202, 0.28);
	}
}