/**
 * Dungeon Magnets — Design tokens
 *
 * Inspirés du thème Kanoa utilisé sur https://www.guillaumelehericey.fr/
 * (Lupin de Garenne) : palette monochrome claire, typographies Outfit
 * (titres) / DM Sans (texte), bords fins #c8c8c8, surfaces très claires,
 * accent « noir » #111 pour les CTA. Tout est exposé en variables CSS
 * pour que builder.css, viewer.css et admin.css restent cohérents.
 *
 * Les fontes Outfit et DM Sans sont fournies par le thème hôte sur le
 * site cible ; nous ne les importons PAS ici (respect de la contrainte
 * « aucune dépendance CDN »). La stack déclarée bascule sur system-ui
 * si les fontes ne sont pas chargées, ce qui reste visuellement proche.
 */

:root {
	/* --- Palette (cf. theme.json Kanoa) --- */
	--dmb-color-primary:        #111111; /* Texte & CTA */
	--dmb-color-primary-hover:  #2b2b2b;
	--dmb-color-secondary:      #555555; /* Texte secondaire */
	--dmb-color-muted:          #666666; /* Meta, légendes */
	--dmb-color-bg:             #ffffff;
	--dmb-color-surface:        #fafafa;
	--dmb-color-surface-alt:    #f6f6f6; /* « Background Gray » Kanoa */
	--dmb-color-border:         #c8c8c8; /* « Additional Gray » Kanoa */
	--dmb-color-border-soft:    #e5e5e5;

	--dmb-color-canvas:         #f6f6f6; /* Scène / stage (frigo blanc cassé) */
	--dmb-color-canvas-border:  #c8c8c8;

	--dmb-color-on-primary:     #ffffff;
	--dmb-color-success:        #16a34a;
	--dmb-color-error:          #dc2626;

	/* --- Typographie --- */
	--dmb-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dmb-font-heading: "Outfit", var(--dmb-font-body);
	--dmb-font-size-xs: 12px;
	--dmb-font-size-sm: 13px;
	--dmb-font-size-md: 14px;
	--dmb-font-size-lg: 16px;
	--dmb-font-size-xl: 20px;
	--dmb-letter-caps:  .04em;

	/* --- Forme & profondeur --- */
	--dmb-radius-sm: 4px;
	--dmb-radius-md: 6px;
	--dmb-radius-lg: 10px;
	--dmb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
	--dmb-shadow-md: 0 6px 20px rgba(0, 0, 0, .08);
	--dmb-shadow-lg: 0 10px 40px rgba(0, 0, 0, .15);
	--dmb-transition: .2s ease;
}

/* Racine neutre appliquée à tous les écrans du plugin : fontes + lissage
 * cohérent sans polluer le reste de la page (classes locales uniquement). */
.dmb-builder-root,
.dmb-viewer-root,
.dmb-list,
.dmb-dialog,
#dmb-admin-library,
.dmb-toasts {
	font-family: var(--dmb-font-body);
	color: var(--dmb-color-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Titres : Outfit, graisse 600, sans text-transform imposé pour laisser
 * les contextes décider (éditeur / liste publique). */
.dmb-builder-root h1, .dmb-builder-root h2, .dmb-builder-root h3,
.dmb-viewer-root h1, .dmb-viewer-root h2, .dmb-viewer-root h3,
.dmb-list-card h1, .dmb-list-card h2, .dmb-list-card h3,
.dmb-dialog h1, .dmb-dialog h2, .dmb-dialog h3 {
	font-family: var(--dmb-font-heading);
	font-weight: 600;
	color: var(--dmb-color-primary);
	letter-spacing: 0;
}

/* Boutons de base — transitions douces façon Kanoa (scale(1.02) au hover). */
.dmb-btn,
.dmb-builder-root .button,
.dmb-dialog .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--dmb-color-bg);
	color: var(--dmb-color-primary);
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-sm);
	padding: 8px 14px;
	font: 500 var(--dmb-font-size-sm) / 1.2 var(--dmb-font-body);
	cursor: pointer;
	text-decoration: none;
	-webkit-transition: transform var(--dmb-transition),
		background-color var(--dmb-transition),
		border-color var(--dmb-transition),
		color var(--dmb-transition);
	transition: transform var(--dmb-transition),
		background-color var(--dmb-transition),
		border-color var(--dmb-transition),
		color var(--dmb-transition);
}
.dmb-btn:hover,
.dmb-builder-root .button:hover,
.dmb-dialog .button:hover {
	border-color: var(--dmb-color-primary);
	transform: scale(1.02);
}
.dmb-btn:active,
.dmb-builder-root .button:active,
.dmb-dialog .button:active {
	transform: scale(1);
}
.dmb-btn[disabled],
.dmb-builder-root .button[disabled] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}
.dmb-btn-primary,
.dmb-builder-root .button-primary,
.dmb-dialog .button-primary {
	background: var(--dmb-color-primary);
	color: var(--dmb-color-on-primary);
	border-color: var(--dmb-color-primary);
}
.dmb-btn-primary:hover,
.dmb-builder-root .button-primary:hover,
.dmb-dialog .button-primary:hover {
	background: var(--dmb-color-primary-hover);
	border-color: var(--dmb-color-primary-hover);
	color: var(--dmb-color-on-primary);
}

/* Champs de formulaire — bordures fines, focus noir discret. */
.dmb-builder-root input[type="text"],
.dmb-builder-root input[type="email"],
.dmb-dialog input[type="text"],
.dmb-dialog input[type="email"] {
	background: var(--dmb-color-bg);
	color: var(--dmb-color-primary);
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-sm);
	padding: 8px 10px;
	font: 400 var(--dmb-font-size-md) / 1.3 var(--dmb-font-body);
	transition: border-color var(--dmb-transition);
}
.dmb-builder-root input:focus,
.dmb-dialog input:focus {
	outline: none;
	border-color: var(--dmb-color-primary);
}