/* Socle Thèmes Hugo — base commune (facultative mais recommandée) : page, sélection, focus, titres, menu des thèmes.
 * À charger après tokens.css et avant le CSS de l'application. Ne pas modifier dans une application. */

html { -webkit-tap-highlight-color: transparent; }

body {
	background-color: var(--bg);
	background-image: var(--paper-image);
	background-size: var(--paper-size);
	background-repeat: var(--paper-repeat);
	color: var(--text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--highlight); color: var(--text); }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Titres dans la police du thème : classe à poser sur les titres d'interface (h1, h2 de page, en-têtes de cartes) */
.th-titre {
	font-family: var(--font-title);
	font-weight: var(--title-weight);
	letter-spacing: normal;
}

/* Trait tremblé du Carnet (sans effet ailleurs) : à poser sur un cadre décoratif, jamais sur du texte */
.th-trait { filter: var(--stroke-filter); }

/* Texte long (descriptions, résumés, notes) */
.th-lecture {
	font-family: var(--font-reading);
	line-height: 1.6;
}

/* Menu des thèmes (Themes.menu ou [data-themes-menu]) */
.th-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px;
}
.th-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}
.th-item:hover { background: var(--bg-card-hover); }
.th-item.th-actif { font-weight: 700; }
.th-item.th-actif::after { content: '✓'; margin-left: auto; color: var(--primary); }
.th-pastille {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--border);
	background: linear-gradient(135deg, var(--bg) 0 50%, var(--primary) 50% 100%);
}
.th-pastille-auto { background: linear-gradient(135deg, #f5f5fa 0 50%, #0f0f1a 50% 100%); border-color: #8888a8; }