/* Shared components: text styles, buttons, form fields, icons. */

.title   { font-family: var(--f-display); font-size: var(--t-title); line-height: var(--lh-title); font-weight: 500; }
.title-s { font-family: var(--f-display); font-size: var(--t-title-s); line-height: var(--lh-title-s); font-weight: 500; }
.caps    { text-transform: uppercase; }
.body-s  { font-size: var(--t-body-s); line-height: var(--lh-body-s); }
.sub     { font-size: var(--t-sub); line-height: var(--lh-sub); font-weight: 500; }
.muted   { color: var(--c-text-2); }
.bg-dark .muted { color: inherit; opacity: 0.85; }

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
}

/* Buttons (Figma "Button" component: Primary, Secondary, Tertiary). */
.btns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	min-width: 176px;
	padding: 8px 16px;
	border: 1px solid var(--c-text);
	border-radius: var(--radius);
	font-family: var(--f-body);
	font-size: var(--t-button);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

.btn--primary {
	background: var(--c-text);
	color: var(--c-light);
}

.btn--primary:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

.btn--secondary {
	background: transparent;
	color: var(--c-text);
}

.btn--secondary:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-light);
}

.btn--tertiary {
	min-width: 0;
	min-height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.btn--tertiary .icon {
	width: 24px;
	height: 24px;
	padding: 4px;
	border-radius: 50%;
	transition: background-color 0.2s, color 0.2s;
}

/* Figma "Tertiary_Hover": the arrow sits in a filled circle. */
.btn--tertiary:hover .icon {
	background: var(--c-text);
	color: var(--c-light);
}

.bg-dark .btn--tertiary:hover .icon {
	background: var(--c-light);
	color: var(--c-text);
}

/* Light versions on dark backgrounds. */
.bg-dark .btn--primary { background: var(--c-light); color: var(--c-text); border-color: var(--c-light); }
.bg-dark .btn--secondary { color: var(--c-light); border-color: var(--c-light); }
.bg-dark .btn--secondary:hover { background: var(--c-light); color: var(--c-text); }

/* Form fields: underline inputs as in the Figma contact form. */
.field {
	display: grid;
	gap: 8px;
}

.field label {
	font-size: var(--t-sub);
	line-height: var(--lh-sub);
	font-weight: 500;
}

.field input,
.field textarea,
.field select {
	width: 100%;
	padding: 12px 4px;
	border: 0;
	border-bottom: 1px solid var(--c-text-2);
	border-radius: 0;
	background: transparent;
	font-size: var(--t-body-s);
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--c-text-2);
	opacity: 0.8;
}