/* ── tokens/shape.css ── */
:root {
	--radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
	--radius-xl: 24px; --radius-2xl: 32px; --radius-3xl: 48px; --radius-4xl: 64px;
	--radius-pill: 9999px;
	--radius-button: 8px; --radius-input: 8px;
	--radius-tile: 24px; --radius-card: 32px; --radius-card-lg: 48px;
	--radius-panel: 64px;
	--radius-tag: 9999px; --radius-nav-pill: 9999px;
	--border-width: 1px;
	/* Plat par principe : la profondeur vient du contraste de surfaces */
	--shadow-none: none;
	--shadow-overlay: 0 32px 80px -32px rgba(26, 22, 19, 0.32);
	--focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--accent);
}

/* LES RAYONS SUR ÉTROIT.
   Les cotes du système sont dessinées pour de grandes surfaces : 64 px sur une
   bande qui fait 1440 de large, c'est une inflexion ; sur 375, c'est un quart
   de cercle, et la carte se met à ressembler à une pastille. Les rayons se
   règlent donc à l'échelle de l'écran, en un seul endroit — les jetons — pour
   que tout ce qui les emploie suive sans qu'on ait à les reprendre un à un.

   Les pilules et les étiquettes gardent leur rayon : leur forme EST le rond. */
@media (max-width: 860px) {
	:root {
		--radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px;
		--radius-3xl: 20px; --radius-4xl: 24px;
		--radius-tile: 10px; --radius-card: 14px; --radius-card-lg: 16px;
		--radius-panel: 24px;
	}
}