/*
 * Maison Joaya — Composants design system
 *
 * Styles pour les 5 composants base : button, card, eyebrow, field, drawer.
 * Dépend de tokens.css (chargé avant).
 *
 * Référence : docs/BRAND/DESIGN-TOKENS.md, docs/BRAND/MOTION-SYSTEM.md
 * Implémentation : Sprint 8 (PHASE 8).
 *
 * @version 1.0.0
 */

/* =========================================================
   1. Button
   ========================================================= */

.mj-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mj-space-2);

	font-family: var(--mj-font-sans);
	font-weight: var(--mj-fw-medium);
	letter-spacing: var(--mj-ls-wide);
	line-height: 1;

	border: var(--mj-border-default) solid transparent;
	border-radius: var(--mj-radius-sm);
	cursor: pointer;

	background: transparent;
	color: var(--mj-text-primary);

	min-height: 44px; /* WCAG 2.5.5 — touch target */
	padding: 0 var(--mj-space-5);

	transition:
		background-color var(--mj-duration-fast) var(--mj-ease-standard),
		border-color var(--mj-duration-fast) var(--mj-ease-standard),
		color var(--mj-duration-fast) var(--mj-ease-standard),
		transform var(--mj-duration-fast) var(--mj-ease-out),
		box-shadow var(--mj-duration-fast) var(--mj-ease-out);

	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* Sizes */
.mj-button--sm {
	font-size: var(--mj-text-xs);
	min-height: 36px;
	padding: 0 var(--mj-space-3);
}
.mj-button--md {
	font-size: var(--mj-text-sm);
	min-height: 44px;
	padding: 0 var(--mj-space-5);
}
.mj-button--lg {
	font-size: var(--mj-text-base);
	min-height: 52px;
	padding: 0 var(--mj-space-6);
}

/* Variants */
.mj-button--primary {
	background-color: var(--mj-accent-primary);
	color: var(--mj-text-inverse);
	border-color: var(--mj-accent-primary);
}
.mj-button--primary:hover:not(.mj-button--disabled) {
	background-color: var(--mj-accent-hover);
	border-color: var(--mj-accent-hover);
	transform: translateY(-1px);
	box-shadow: var(--mj-shadow-hover);
}
.mj-button--primary:active:not(.mj-button--disabled) {
	transform: translateY(0);
	background-color: var(--mj-accent-active);
}

.mj-button--secondary {
	background-color: transparent;
	color: var(--mj-text-primary);
	border-color: var(--mj-border-default);
}
.mj-button--secondary:hover:not(.mj-button--disabled) {
	background-color: var(--mj-bg-surface);
	border-color: var(--mj-text-primary);
}

.mj-button--ghost {
	background-color: transparent;
	color: var(--mj-text-primary);
	border-color: transparent;
}
.mj-button--ghost:hover:not(.mj-button--disabled) {
	background-color: var(--mj-bg-surface);
}

.mj-button--link {
	background: transparent;
	border: 0;
	color: var(--mj-accent-primary);
	padding: 0;
	min-height: auto;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mj-button--link:hover:not(.mj-button--disabled) {
	color: var(--mj-accent-hover);
}

.mj-button--icon {
	padding: 0;
	min-height: 44px;
	min-width: 44px;
	aspect-ratio: 1;
}

/* Full width */
.mj-button--full {
	width: 100%;
}

/* States */
.mj-button--disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.mj-button--loading .mj-button__label {
	opacity: 0.6;
}

/* Icon */
.mj-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mj-button .mj-icon {
	width: 1.1em;
	height: 1.1em;
}

/* Spinner */
.mj-button__spinner {
	width: 1em;
	height: 1em;
	animation: mj-spin 0.8s linear infinite;
}

@keyframes mj-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* =========================================================
   2. Card
   ========================================================= */

.mj-card {
	display: block;
	background-color: var(--mj-bg-elevated);
	border-radius: var(--mj-radius-md);
	overflow: hidden;
	transition: transform var(--mj-duration-base) var(--mj-ease-elegant);
}

.mj-card:hover {
	transform: translateY(-4px);
}

.mj-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mj-card__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--mj-bg-surface);
}

.mj-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--mj-duration-slow) var(--mj-ease-elegant);
}

.mj-card:hover .mj-card__image--primary {
	transform: scale(1.04);
}

.mj-card__image--secondary {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--mj-duration-base) var(--mj-ease-standard);
}

.mj-card--has-hover-image:hover .mj-card__image--secondary {
	opacity: 1;
}

.mj-card__badges {
	position: absolute;
	top: var(--mj-space-3);
	left: var(--mj-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--mj-space-1);
}

.mj-card__badge {
	background-color: var(--joaya-ink-50);
	color: var(--mj-text-primary);
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-2xs);
	font-weight: var(--mj-fw-medium);
	letter-spacing: var(--mj-ls-wider);
	text-transform: uppercase;
	padding: var(--mj-space-1) var(--mj-space-2);
	border-radius: var(--mj-radius-sm);
}

.mj-card__body {
	padding: var(--mj-space-4) var(--mj-space-3);
}

.mj-card__eyebrow {
	margin-bottom: var(--mj-space-2);
}

.mj-card__title {
	font-family: var(--mj-font-serif);
	font-size: var(--mj-text-md);
	font-weight: var(--mj-fw-medium);
	line-height: var(--mj-lh-snug);
	margin: 0 0 var(--mj-space-1);
	color: var(--mj-text-primary);
}

.mj-card__subtitle {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-sm);
	color: var(--mj-text-secondary);
	margin: 0 0 var(--mj-space-2);
}

.mj-card__rating {
	display: flex;
	align-items: center;
	gap: var(--mj-space-2);
	margin: var(--mj-space-2) 0;
}

.mj-card__stars {
	display: inline-flex;
	gap: 1px;
}

.mj-card__star {
	color: var(--joaya-ink-200);
	font-size: var(--mj-text-sm);
}

.mj-card__star--full,
.mj-card__star--half {
	color: var(--joaya-warning-500);
}

.mj-card__rating-text {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-xs);
	color: var(--mj-text-muted);
}

.mj-card__pricing {
	display: flex;
	align-items: baseline;
	gap: var(--mj-space-2);
	margin-top: var(--mj-space-2);
}

.mj-card__price {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-base);
	font-weight: var(--mj-fw-medium);
	color: var(--mj-text-primary);
}

.mj-card__price-compare {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-sm);
	color: var(--mj-text-muted);
	text-decoration: line-through;
}

.mj-card__stock {
	display: block;
	margin-top: var(--mj-space-2);
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-xs);
	color: var(--joaya-warning-700);
}

.mj-card__cta {
	display: block;
	margin-top: var(--mj-space-3);
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-xs);
	letter-spacing: var(--mj-ls-wide);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	color: var(--mj-text-primary);
}

/* =========================================================
   3. Field
   ========================================================= */

.mj-field {
	display: flex;
	flex-direction: column;
	gap: var(--mj-space-2);
	margin-bottom: var(--mj-space-4);
}

.mj-field__label {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-sm);
	font-weight: var(--mj-fw-medium);
	color: var(--mj-text-primary);
}

.mj-field__required {
	color: var(--mj-error);
	margin-left: 0.15em;
}

.mj-field__control {
	display: block;
}

.mj-field__input,
.mj-field__textarea,
.mj-field__select {
	width: 100%;
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-base);
	color: var(--mj-text-primary);
	background-color: var(--mj-bg-elevated);
	border: var(--mj-border-default) solid var(--mj-border-default);
	border-radius: var(--mj-radius-sm);
	padding: var(--mj-space-3) var(--mj-space-4);
	min-height: 48px; /* mobile touch */
	transition:
		border-color var(--mj-duration-fast) var(--mj-ease-standard),
		box-shadow var(--mj-duration-fast) var(--mj-ease-standard);
}

.mj-field__textarea {
	min-height: 120px;
	resize: vertical;
	line-height: var(--mj-lh-normal);
}

.mj-field__input:focus,
.mj-field__textarea:focus,
.mj-field__select:focus {
	outline: none;
	border-color: var(--mj-accent-primary);
	box-shadow: var(--mj-shadow-focus);
}

.mj-field--error .mj-field__input,
.mj-field--error .mj-field__textarea,
.mj-field--error .mj-field__select {
	border-color: var(--mj-error);
}

.mj-field--success .mj-field__input,
.mj-field--success .mj-field__textarea,
.mj-field--success .mj-field__select {
	border-color: var(--mj-success);
}

.mj-field__help {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-xs);
	color: var(--mj-text-muted);
	margin: 0;
}

.mj-field__error {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-xs);
	color: var(--mj-error);
	margin: 0;
}

/* Checkbox */
.mj-field__checkbox-label {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--mj-space-2);
	cursor: pointer;
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-sm);
	color: var(--mj-text-primary);
}

.mj-field__checkbox {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--mj-accent-primary);
}

/* Radio */
.mj-field__radio-group {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mj-space-2);
}

.mj-field__legend {
	font-family: var(--mj-font-sans);
	font-size: var(--mj-text-sm);
	font-weight: var(--mj-fw-medium);
	margin: 0 0 var(--mj-space-2);
}

.mj-field__radio-label {
	display: inline-flex;
	align-items: center;
	gap: var(--mj-space-2);
	cursor: pointer;
}

.mj-field__radio {
	width: 1.25rem;
	height: 1.25rem;
	cursor: pointer;
	accent-color: var(--mj-accent-primary);
}

/* =========================================================
   4. Drawer
   ========================================================= */

.mj-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--mj-z-drawer);
	pointer-events: none;
}

.mj-drawer:not([hidden]) {
	pointer-events: auto;
}

.mj-drawer__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--mj-bg-overlay);
	opacity: 0;
	transition: opacity var(--mj-duration-base) var(--mj-ease-standard);
}

.mj-drawer:not([hidden]) .mj-drawer__backdrop {
	opacity: 1;
}

.mj-drawer__panel {
	position: absolute;
	background-color: var(--mj-bg-elevated);
	display: flex;
	flex-direction: column;
	box-shadow: var(--mj-shadow-xl);
	will-change: transform;
	transition: transform var(--mj-duration-slow) var(--mj-ease-elegant);
}

/* Position right (default) */
.mj-drawer--right .mj-drawer__panel {
	top: 0;
	right: 0;
	height: 100%;
	transform: translateX(100%);
}
.mj-drawer--right:not([hidden]) .mj-drawer__panel {
	transform: translateX(0);
}

/* Position left */
.mj-drawer--left .mj-drawer__panel {
	top: 0;
	left: 0;
	height: 100%;
	transform: translateX(-100%);
}
.mj-drawer--left:not([hidden]) .mj-drawer__panel {
	transform: translateX(0);
}

/* Position bottom (mobile-first bottom sheet) */
.mj-drawer--bottom .mj-drawer__panel {
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 90dvh;
	border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;
	transform: translateY(100%);
}
.mj-drawer--bottom:not([hidden]) .mj-drawer__panel {
	transform: translateY(0);
}

/* Sizes (mostly relevant for right/left) */
.mj-drawer--sm .mj-drawer__panel { width: min(360px, 100vw); }
.mj-drawer--md .mj-drawer__panel { width: min(440px, 100vw); }
.mj-drawer--lg .mj-drawer__panel { width: min(560px, 100vw); }
.mj-drawer--xl .mj-drawer__panel { width: min(720px, 100vw); }
.mj-drawer--full .mj-drawer__panel { width: 100vw; }

/* Mobile : tous les drawers right/left passent en bottom sheet (option) */
@media (max-width: 639px) {
	.mj-drawer--right.mj-drawer--mobile-bottom .mj-drawer__panel,
	.mj-drawer--left.mj-drawer--mobile-bottom .mj-drawer__panel {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100vw;
		height: auto;
		max-height: 90dvh;
		border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;
		transform: translateY(100%);
	}
	.mj-drawer--right.mj-drawer--mobile-bottom:not([hidden]) .mj-drawer__panel,
	.mj-drawer--left.mj-drawer--mobile-bottom:not([hidden]) .mj-drawer__panel {
		transform: translateY(0);
	}
}

/* Drag handle (bottom sheet) */
.mj-drawer__drag-handle {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--mj-space-3) 0 var(--mj-space-2);
	cursor: grab;
	touch-action: none;
}
.mj-drawer__drag-handle:active {
	cursor: grabbing;
}
.mj-drawer__drag-bar {
	width: 40px;
	height: 4px;
	background-color: var(--mj-border-default);
	border-radius: var(--mj-radius-full);
}

/* Header */
.mj-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mj-space-4);
	padding: var(--mj-space-4) var(--mj-space-5);
	border-bottom: var(--mj-border-thin) solid var(--mj-border-subtle);
	flex-shrink: 0;
}

.mj-drawer__title {
	font-family: var(--mj-font-serif);
	font-size: var(--mj-text-xl);
	font-weight: var(--mj-fw-medium);
	margin: 0;
	color: var(--mj-text-primary);
}

.mj-drawer__close {
	margin-left: auto;
}

/* Body */
.mj-drawer__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--mj-space-5);
}

/* Footer */
.mj-drawer__footer {
	border-top: var(--mj-border-thin) solid var(--mj-border-subtle);
	padding: var(--mj-space-4) var(--mj-space-5);
	padding-bottom: max(var(--mj-space-4), env(safe-area-inset-bottom));
	background-color: var(--mj-bg-elevated);
	flex-shrink: 0;
}