/*
 * base.css — html/body, dark mode transitions, focus ring, skip-link, sélection.
 */

html {
	font-family:      var(--font-body);
	font-size:        16px;
	scroll-behavior:  smooth;
	color-scheme:     light dark;
	background-color: var(--bg);
	color:            var(--fg);
	/* Transition bg/color uniquement pour éviter des repaints en cascade */
	transition: background-color var(--transition), color var(--transition);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
		transition:      none;
	}

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

body {
	font-size:        var(--text-base);
	line-height:      var(--lh-normal);
	color:            var(--fg-muted);
	background-color: var(--bg);
}

/* ── Site shell ──────────────────────────────────────────────────── */

.site {
	display:        flex;
	flex-direction: column;
	min-height:     100vh;
}

.site-main {
	flex: 1;
}

/* ── Focus ring WCAG 2.1 AA ──────────────────────────────────────── */

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

:focus:not(:focus-visible) {
	outline: none;
}

/* ── Skip link ───────────────────────────────────────────────────── */

.skip-link {
	position:        absolute;
	top:             -100%;
	left:            0;
	z-index:         9999;
	padding:         var(--space-2) var(--space-4);
	background:      var(--accent);
	color:           #fff;
	font-weight:     var(--fw-semi);
	font-size:       var(--text-sm);
	text-decoration: none;
	border-radius:   0 0 var(--radius-sm) 0;
	white-space:     nowrap;
}

.skip-link:focus {
	top: 0;
}

/* ── Text selection ──────────────────────────────────────────────── */

::selection {
	background-color: var(--bw-red-light);
	color:            var(--bw-anthracite);
}

[data-theme="dark"] ::selection {
	background-color: var(--bw-red-light);
	color:            var(--fg);
}

/* ── Scrollbar (WebKit) ──────────────────────────────────────────── */

::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: var(--surface); }
::-webkit-scrollbar-thumb        { background: var(--bw-gray-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--bw-gray-dark); }