/*
 * Maison Joaya — Design Tokens
 *
 * Source de vérité des tokens design système.
 * À enqueue AVANT main.css pour que main.css puisse référencer les variables.
 *
 * Référence : docs/BRAND/DESIGN-TOKENS.md
 * Implémentation : Sprint 8 (PHASE 8).
 *
 * @version 1.0.0
 */

:root {
	/* =========================================================
	   1. Couleurs — palette de base
	   ========================================================= */

	/* Sage — accent primaire */
	--joaya-sage-50:  #F4F6F2;
	--joaya-sage-100: #E5EBDF;
	--joaya-sage-200: #C7D2BC;
	--joaya-sage-300: #A4B596;
	--joaya-sage-400: #819776;
	--joaya-sage-500: #647B5A;
	--joaya-sage-600: #4F6448;
	--joaya-sage-700: #3D4F38;
	--joaya-sage-800: #2B3828;
	--joaya-sage-900: #1A2218;

	/* Blush — accent secondaire chaud */
	--joaya-blush-50:  #FAF1ED;
	--joaya-blush-100: #F3DDD3;
	--joaya-blush-200: #E8BCA9;
	--joaya-blush-300: #D89A82;
	--joaya-blush-400: #C57E64;
	--joaya-blush-500: #B0654D;
	--joaya-blush-600: #8F4F3C;
	--joaya-blush-700: #6D3B2D;
	--joaya-blush-800: #4A2820;
	--joaya-blush-900: #2C1813;

	/* Lilac — accent tertiaire */
	--joaya-lilac-50:  #F2EFF5;
	--joaya-lilac-100: #DFD7EA;
	--joaya-lilac-200: #BFB0D5;
	--joaya-lilac-300: #9D86BD;
	--joaya-lilac-400: #7E63A4;
	--joaya-lilac-500: #644A86;
	--joaya-lilac-600: #4F3A6C;
	--joaya-lilac-700: #3C2C52;
	--joaya-lilac-800: #281E37;
	--joaya-lilac-900: #15101D;

	/* Ink — neutrals chauds */
	--joaya-ink-50:  #FBFAF7;
	--joaya-ink-100: #F2F0EA;
	--joaya-ink-200: #E0DCD2;
	--joaya-ink-300: #C2BCB0;
	--joaya-ink-400: #99917F;
	--joaya-ink-500: #6E6754;
	--joaya-ink-600: #534C3D;
	--joaya-ink-700: #3B362B;
	--joaya-ink-800: #25221A;
	--joaya-ink-900: #15130E;

	/* Sémantiques */
	--joaya-success-50:  #ECF6EE;
	--joaya-success-500: #4E9D5C;
	--joaya-success-700: #2F6E3B;

	--joaya-warning-50:  #FBF5E6;
	--joaya-warning-500: #C29139;
	--joaya-warning-700: #8A6320;

	--joaya-error-50:  #FBEDED;
	--joaya-error-500: #B94A4A;
	--joaya-error-700: #843131;

	--joaya-info-50:  #ECF1F5;
	--joaya-info-500: #5B7A99;
	--joaya-info-700: #3D5570;

	/* =========================================================
	   2. Tokens fonctionnels (aliases)
	   ========================================================= */

	--mj-bg-page:        var(--joaya-ink-50);
	--mj-bg-surface:     var(--joaya-ink-100);
	--mj-bg-elevated:    #FFFFFF;
	--mj-bg-overlay:     rgba(25, 19, 14, 0.55);

	--mj-text-primary:   var(--joaya-ink-900);
	--mj-text-secondary: var(--joaya-ink-600);
	--mj-text-muted:     var(--joaya-ink-500);
	--mj-text-inverse:   var(--joaya-ink-50);

	--mj-border-subtle:  var(--joaya-ink-200);
	--mj-border-default: var(--joaya-ink-300);
	--mj-border-strong:  var(--joaya-ink-400);

	--mj-accent-primary: var(--joaya-sage-700);
	--mj-accent-hover:   var(--joaya-sage-800);
	--mj-accent-active:  var(--joaya-sage-900);

	--mj-success: var(--joaya-success-500);
	--mj-warning: var(--joaya-warning-500);
	--mj-error:   var(--joaya-error-500);
	--mj-info:    var(--joaya-info-500);

	--mj-focus-ring:        var(--joaya-sage-700);
	--mj-focus-ring-offset: 2px;
	--mj-focus-ring-width:  2px;

	/* =========================================================
	   3. Typographie
	   ========================================================= */

	--mj-font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
	--mj-font-sans:  "Manrope", "Inter", system-ui, -apple-system, sans-serif;
	--mj-font-mono:  "JetBrains Mono", "SF Mono", Consolas, monospace;

	/* Type scale — base mobile 16px */
	--mj-text-2xs: 0.6875rem;
	--mj-text-xs:  0.75rem;
	--mj-text-sm:  0.875rem;
	--mj-text-base: 1rem;
	--mj-text-md:  1.125rem;
	--mj-text-lg:  1.25rem;
	--mj-text-xl:  1.5rem;
	--mj-text-2xl: 1.875rem;
	--mj-text-3xl: 2.25rem;
	--mj-text-4xl: 2.75rem;
	--mj-text-5xl: 3.5rem;
	--mj-text-6xl: 4.25rem;

	/* Font weights */
	--mj-fw-light:    300;
	--mj-fw-regular:  400;
	--mj-fw-medium:   500;
	--mj-fw-semibold: 600;
	--mj-fw-bold:     700;

	/* Line heights */
	--mj-lh-display:  1.05;
	--mj-lh-heading:  1.15;
	--mj-lh-snug:     1.35;
	--mj-lh-normal:   1.5;
	--mj-lh-relaxed:  1.7;
	--mj-lh-loose:    2;

	/* Letter spacing */
	--mj-ls-tight:    -0.02em;
	--mj-ls-normal:   0;
	--mj-ls-wide:     0.02em;
	--mj-ls-wider:    0.08em;
	--mj-ls-widest:   0.15em;

	/* =========================================================
	   4. Espacement
	   ========================================================= */

	--mj-space-0:   0;
	--mj-space-1:   0.25rem;
	--mj-space-2:   0.5rem;
	--mj-space-3:   0.75rem;
	--mj-space-4:   1rem;
	--mj-space-5:   1.25rem;
	--mj-space-6:   1.5rem;
	--mj-space-8:   2rem;
	--mj-space-10:  2.5rem;
	--mj-space-12:  3rem;
	--mj-space-16:  4rem;
	--mj-space-20:  5rem;
	--mj-space-24:  6rem;
	--mj-space-32:  8rem;
	--mj-space-40:  10rem;
	--mj-space-48:  12rem;

	/* Sémantiques */
	--mj-inset-xs: var(--mj-space-2);
	--mj-inset-sm: var(--mj-space-3);
	--mj-inset-md: var(--mj-space-4);
	--mj-inset-lg: var(--mj-space-6);
	--mj-inset-xl: var(--mj-space-8);

	--mj-stack-xs: var(--mj-space-2);
	--mj-stack-sm: var(--mj-space-4);
	--mj-stack-md: var(--mj-space-6);
	--mj-stack-lg: var(--mj-space-10);
	--mj-stack-xl: var(--mj-space-16);

	--mj-inline-xs: var(--mj-space-2);
	--mj-inline-sm: var(--mj-space-3);
	--mj-inline-md: var(--mj-space-4);
	--mj-inline-lg: var(--mj-space-6);

	--mj-section-sm: var(--mj-space-12);
	--mj-section-md: var(--mj-space-16);
	--mj-section-lg: var(--mj-space-24);
	--mj-section-xl: var(--mj-space-32);

	/* Container */
	--mj-container-max:    1400px;
	--mj-container-narrow: 880px;
	--mj-container-wide:   1640px;

	--mj-gutter-mobile:  1.5rem;
	--mj-gutter-tablet:  2rem;
	--mj-gutter-desktop: 3.125rem;

	/* =========================================================
	   5. Bordures & radius
	   ========================================================= */

	--mj-border-thin:    1px;
	--mj-border-default: 1.5px;
	--mj-border-thick:   2px;

	--mj-radius-none:   0;
	--mj-radius-xs:     0.125rem;
	--mj-radius-sm:     0.25rem;
	--mj-radius-md:     0.5rem;
	--mj-radius-lg:     0.75rem;
	--mj-radius-xl:     1rem;
	--mj-radius-2xl:    1.5rem;
	--mj-radius-3xl:    2rem;
	--mj-radius-full:   9999px;

	/* =========================================================
	   6. Ombres
	   ========================================================= */

	--mj-shadow-none: none;
	--mj-shadow-xs:   0 1px 2px rgba(25, 19, 14, 0.04);
	--mj-shadow-sm:   0 2px 4px rgba(25, 19, 14, 0.06);
	--mj-shadow-md:   0 4px 12px rgba(25, 19, 14, 0.08);
	--mj-shadow-lg:   0 12px 24px rgba(25, 19, 14, 0.10);
	--mj-shadow-xl:   0 24px 48px rgba(25, 19, 14, 0.12);

	--mj-shadow-focus: 0 0 0 4px rgba(100, 123, 90, 0.20);
	--mj-shadow-hover: 0 8px 16px rgba(25, 19, 14, 0.10);

	/* =========================================================
	   7. Motion
	   ========================================================= */

	--mj-duration-instant: 80ms;
	--mj-duration-fast:    160ms;
	--mj-duration-base:    240ms;
	--mj-duration-slow:    360ms;
	--mj-duration-slower:  540ms;
	--mj-duration-slowest: 800ms;

	--mj-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--mj-ease-out:      cubic-bezier(0, 0, 0.2, 1);
	--mj-ease-in:       cubic-bezier(0.4, 0, 1, 1);
	--mj-ease-elegant:  cubic-bezier(0.32, 0.72, 0, 1);
	--mj-ease-spring:   cubic-bezier(0.5, 1.5, 0.5, 1);

	--mj-motion-fade:   opacity var(--mj-duration-base) var(--mj-ease-standard);
	--mj-motion-slide:  transform var(--mj-duration-base) var(--mj-ease-elegant);
	--mj-motion-scale:  transform var(--mj-duration-fast) var(--mj-ease-out);
	--mj-motion-drawer: transform var(--mj-duration-slow) var(--mj-ease-elegant);

	/* =========================================================
	   8. Z-index
	   ========================================================= */

	--mj-z-base:    0;
	--mj-z-raised:  10;
	--mj-z-sticky:  100;
	--mj-z-overlay: 1000;
	--mj-z-drawer:  1010;
	--mj-z-modal:   1020;
	--mj-z-toast:   1100;
	--mj-z-tooltip: 1200;

	/* =========================================================
	   9. Breakpoints (référence — utilisés en media queries)
	   ========================================================= */

	/* --mj-bp-sm: 640px; */
	/* --mj-bp-md: 1024px; */
	/* --mj-bp-lg: 1280px; */

}

/* =========================================================
   Desktop typography boost
   ========================================================= */

@media (min-width: 1024px) {
	:root {
		--mj-text-base: 1.0625rem;
		--mj-text-md:   1.1875rem;
		--mj-text-lg:   1.375rem;
		--mj-text-xl:   1.75rem;
		--mj-text-2xl:  2.125rem;
		--mj-text-3xl:  2.75rem;
		--mj-text-4xl:  3.5rem;
		--mj-text-5xl:  4.5rem;
		--mj-text-6xl:  6rem;

		--mj-section-md: var(--mj-space-20);
		--mj-section-lg: var(--mj-space-32);
		--mj-section-xl: var(--mj-space-48);
	}
}

/* =========================================================
   Reduced motion — désactivation totale animation pour a11y
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	:root {
		--mj-duration-instant: 0ms;
		--mj-duration-fast:    0ms;
		--mj-duration-base:    0ms;
		--mj-duration-slow:    0ms;
		--mj-duration-slower:  0ms;
		--mj-duration-slowest: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================
   Styles typographiques préconfigurés (utilities)
   ========================================================= */

.mj-display {
	font-family: var(--mj-font-serif);
	font-size: var(--mj-text-5xl);
	font-weight: var(--mj-fw-medium);
	line-height: var(--mj-lh-display);
	letter-spacing: var(--mj-ls-tight);
}

.mj-h1 {
	font-family: var(--mj-font-serif);
	font-size: var(--mj-text-4xl);
	font-weight: var(--mj-fw-medium);
	line-height: var(--mj-lh-display);
	letter-spacing: var(--mj-ls-tight);
}

.mj-h2 {
	font-family: var(--mj-font-serif);
	font-size: var(--mj-text-3xl);
	font-weight: var(--mj-fw-medium);
	line-height: var(--mj-lh-heading);
}

.mj-h3 {
	font-family: var(--mj-font-serif);
	font-size: var(--mj-text-2xl);
	font-weight: var(--mj-fw-regular);
	line-height: var(--mj-lh-heading);
}

.mj-h4 {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-lg);
	font-weight: var(--mj-fw-medium);
	line-height: var(--mj-lh-snug);
}

.mj-eyebrow,
.mj-eyebrow--ink,
.mj-eyebrow--sage,
.mj-eyebrow--blush,
.mj-eyebrow--lilac {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-2xs);
	font-weight: var(--mj-fw-medium);
	line-height: var(--mj-lh-snug);
	letter-spacing: var(--mj-ls-widest);
	text-transform: uppercase;
	display: inline-block;
}

.mj-eyebrow--ink   { color: var(--joaya-ink-700); }
.mj-eyebrow--sage  { color: var(--joaya-sage-700); }
.mj-eyebrow--blush { color: var(--joaya-blush-700); }
.mj-eyebrow--lilac { color: var(--joaya-lilac-700); }

.mj-body {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-base);
	font-weight: var(--mj-fw-regular);
	line-height: var(--mj-lh-normal);
}

.mj-lead {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-md);
	font-weight: var(--mj-fw-regular);
	line-height: var(--mj-lh-relaxed);
}

.mj-caption {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-xs);
	font-weight: var(--mj-fw-regular);
	line-height: var(--mj-lh-normal);
	color: var(--mj-text-muted);
}

/* =========================================================
   Focusable — focus ring AAA (cohérent C4 a11y)
   ========================================================= */

*:focus-visible {
	outline: var(--mj-focus-ring-width) solid var(--mj-focus-ring);
	outline-offset: var(--mj-focus-ring-offset);
}

/* =========================================================
   Container helper
   ========================================================= */

.mj-container {
	max-width: var(--mj-container-max);
	margin-inline: auto;
	padding-inline: var(--mj-gutter-mobile);
}

@media (min-width: 640px) {
	.mj-container {
		padding-inline: var(--mj-gutter-tablet);
	}
}

@media (min-width: 1024px) {
	.mj-container {
		padding-inline: var(--mj-gutter-desktop);
	}
}

.mj-container--narrow {
	max-width: var(--mj-container-narrow);
}

.mj-container--wide {
	max-width: var(--mj-container-wide);
}