/*
Theme Name: VitaSift Child
Theme URI: https://vitasift.com/
Description: Custom child theme for the VitaSift wellness publication.
Author: Charp Consulting
Author URI: https://charpconsulting.com/
Template: kadence
Version: 0.1.0
Text Domain: vitasift
*/

/* VitaSift design-system foundations. */
:root {
	/* Brand palette primitives. */
	--vitasift-color-warm-ivory: #faf6ef;
	--vitasift-color-deep-plum: #56364a;
	--vitasift-color-botanical-green: #536b59;
	--vitasift-color-rose-clay: #c98d83;
	--vitasift-color-muted-gold: #c2a15d;
	--vitasift-color-charcoal: #292727;
	--vitasift-color-white: #ffffff;

	/* Semantic color tokens. */
	--vitasift-color-page-background: var(--vitasift-color-warm-ivory);
	--vitasift-color-surface-background: var(--vitasift-color-white);
	--vitasift-color-text-primary: var(--vitasift-color-charcoal);
	--vitasift-color-text-secondary: var(--vitasift-color-deep-plum);
	--vitasift-color-brand-primary: var(--vitasift-color-deep-plum);
	--vitasift-color-brand-secondary: var(--vitasift-color-botanical-green);
	--vitasift-color-accent: var(--vitasift-color-rose-clay);
	--vitasift-color-border: var(--vitasift-color-botanical-green);
	--vitasift-color-focus-outline: var(--vitasift-color-deep-plum);
	--vitasift-color-success: var(--vitasift-color-botanical-green);
	--vitasift-color-warning: var(--vitasift-color-muted-gold);

	/* Typography. Remote font files are intentionally not loaded yet. */
	--vitasift-font-heading: "Newsreader", Georgia, "Times New Roman", serif;
	--vitasift-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Spacing and layout. */
	--vitasift-space-xs: 0.5rem;
	--vitasift-space-sm: 0.75rem;
	--vitasift-space-md: 1.25rem;
	--vitasift-space-lg: 2rem;
	--vitasift-space-xl: 3rem;
	--vitasift-space-section: clamp(3.5rem, 8vw, 7rem);
	--vitasift-content-max-width: 75rem;
	--vitasift-reading-max-width: 45rem;

	/* Component foundations. */
	--vitasift-radius: 0.375rem;
	--vitasift-radius-card: 0.875rem;
	--vitasift-radius-pill: 999px;
	--vitasift-shadow-subtle: 0 0.25rem 1rem rgba(41, 39, 39, 0.08);
	--vitasift-shadow-elevated: 0 0.75rem 2rem rgba(41, 39, 39, 0.14);
	--vitasift-transition-standard: 180ms ease;
	--vitasift-focus-ring: 0 0 0 0.1875rem var(--vitasift-color-focus-outline);
	--vitasift-button-height: 2.75rem;
	--vitasift-header-height: 4.5rem;
}

body {
	background-color: var(--vitasift-color-page-background);
	color: var(--vitasift-color-text-primary);
	font-family: var(--vitasift-font-body);
	line-height: 1.65;
}

:where(button, input, optgroup, select, textarea) {
	font: inherit;
}

:where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
	color: var(--vitasift-color-text-primary);
	font-family: var(--vitasift-font-heading);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

:where(a) {
	color: var(--vitasift-color-brand-primary);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

:where(a):hover {
	color: var(--vitasift-color-brand-secondary);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 0.125rem solid var(--vitasift-color-focus-outline);
	outline-offset: 0.1875rem;
}

::selection {
	background: var(--vitasift-color-accent);
	color: var(--vitasift-color-charcoal);
}

:where(img, picture, video, canvas) {
	display: block;
	max-width: 100%;
}

:where(img, video) {
	height: auto;
}

:where(
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	.wp-block-button__link
) {
	align-items: center;
	background: var(--vitasift-color-brand-primary);
	border: 0.125rem solid var(--vitasift-color-brand-primary);
	border-radius: var(--vitasift-radius-pill);
	color: var(--vitasift-color-white);
	cursor: pointer;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	min-height: var(--vitasift-button-height);
	padding: var(--vitasift-space-xs) var(--vitasift-space-md);
	text-decoration: none;
	transition:
		background-color var(--vitasift-transition-standard),
		border-color var(--vitasift-transition-standard),
		color var(--vitasift-transition-standard);
}

:where(
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	.wp-block-button__link
):hover {
	background: var(--vitasift-color-brand-secondary);
	border-color: var(--vitasift-color-brand-secondary);
	color: var(--vitasift-color-white);
}

:where(button, input, select, textarea):disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

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

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