/* Design tokens: every color, font, size and timing used by the site */
:root {
	/* colors of the islands */
	--color-basalt: #141312;
	--color-basalt-raised: #1e1c1a;
	--color-salt: #f3f1ec;
	--color-salt-muted: #b9b4aa;
	--color-atlantic: #6fa8d6;
	--color-ochre: #d9a25a;
	--color-verde: #7db383;
	--color-bougainvillea: #d67ba3;

	/* roles */
	--color-background: var(--color-basalt);
	--color-surface: var(--color-basalt-raised);
	--color-text: var(--color-salt);
	--color-text-muted: var(--color-salt-muted);
	--color-line: rgba(243, 241, 236, 0.22);
	--color-focus: var(--color-salt);
	--color-header-background: rgba(20, 19, 18, 0.92);
	--color-scrim: linear-gradient(to top, rgba(20, 19, 18, 0.92) 0%, rgba(20, 19, 18, 0.55) 45%, rgba(20, 19, 18, 0) 100%);
	/* a theme's color, set on cards and filters from the theme's tone */
	--tone: var(--color-text-muted);

	/* type */
	/* the device's serif, as the site always used */
	--font-text: 'Merriweather', serif;
	--font-display: var(--font-text);
	--font-size-small: 0.875rem;
	--font-size-ui: 0.9375rem;
	--font-size-text: 1.125rem;
	--font-size-lead: 1.25rem;
	--font-size-h3: 1.375rem;
	--font-size-h2: 1.75rem;
	--font-size-card-title: clamp(1.5rem, 6vw, 2rem);
	--font-size-title: clamp(2.25rem, 9vw, 4rem);
	--line-height-text: 1.65;
	--line-height-display: 1.15;
	--measure: 65ch;

	/* space */
	--space-gutter: 1rem;
	--space-xs: 0.25rem;
	--space-s: 0.5rem;
	--space-m: 1rem;
	--space-l: 2rem;
	--space-xl: 3.5rem;
	--size-header: 3.5rem;
	--size-target: 2.75rem;
	--size-container: 64rem;
	--size-wide: 56rem;
	--radius-filter: 1.375rem;

	/* lists */
	--ratio-card-image: 3 / 2;
	--columns-card: 2fr 3fr;
	--opacity-other-language: 0.55;
	--scale-other-language: 0.85;

	/* motion */
	--duration-quick: 150ms;
	--duration-slow: 400ms;
}

@media (min-width: 40rem) {
	:root {
		--space-gutter: 2rem;
	}
}