/*
 * FGLaw — Base
 * Global tokens and element defaults.
 */

:root {
	/* Palette — deliberately restrained and easy to replace. */
	--fg-color-ink: #2A2422;
	--fg-color-ink-soft: #675D57;
	--fg-color-paper: #EDE8DF;
	--fg-color-paper-deep: #EDE8DF;
	--fg-color-white: #ffffff;
	--fg-color-line: rgba(31, 33, 30, 0.18);
	--fg-color-line-strong: rgba(31, 33, 30, 0.32);
	--fg-color-accent: #B99C7E;

	--fg-color-wine: #512526;
	--fg-color-sand: #B99C7E;

	--fg-font-size-xs: 0.75rem;
	--fg-font-size-sm: 0.875rem;
	--fg-font-size-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--fg-font-size-lg: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem);
	--fg-font-size-h3: clamp(1.45rem, 1.15rem + 0.9vw, 2.1rem);
	--fg-font-size-h2: clamp(2rem, 1.45rem + 1.9vw, 3.65rem);
	--fg-font-size-h1: clamp(3.2rem, 2.2rem + 4vw, 7.2rem);

	--fg-line-body: 1.72;
	--fg-line-heading: 0.96;
	--fg-letter-eyebrow: 0.18em;

	/* Layout. */
	--fg-content-width: 78rem;
	--fg-text-width: 48rem;
	--fg-narrow-width: 42rem;
	--fg-gutter: clamp(1.25rem, 2.5vw, 3rem);

	/* Spacing. */
	--fg-space-2xs: 0.375rem;
	--fg-space-xs: 0.75rem;
	--fg-space-sm: 1.25rem;
	--fg-space-md: clamp(2rem, 4vw, 4rem);
	--fg-space-lg: clamp(4rem, 8vw, 8rem);
	--fg-space-xl: clamp(6rem, 12vw, 12rem);

	/* Motion. */
	--fg-transition-fast: 180ms ease;
	--fg-transition-base: 320ms cubic-bezier(.2,.7,.2,1);

	/* Geometry. */
	--fg-radius-sm: 0.125rem;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--fg-color-paper);
	color: var(--fg-color-ink);
	
	font-size: var(--fg-font-size-base);
	line-height: var(--fg-line-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--fg-color-ink);
	font-weight: 400;
	letter-spacing: -0.035em;
	margin-block: 0;
}

p {
	margin-block: 0 1.35em;
}

a {
	color: inherit;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--fg-color-accent);
}

img {
	height: auto;
	max-width: 100%;
}

::selection {
	background: var(--fg-color-ink);
	color: var(--fg-color-paper);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}