/**
 * Digital Alchemist Design Tokens
 * Complements Automatic.css — apply these in Bricks Global Classes.
 */

:root {
	/* Color Palette */
	--da-primary: #1B2A4A;
	--da-primary-light: #2D4A7A;
	--da-accent: #C8A951;
	--da-accent-hover: #B8993F;
	--da-neutral-900: #1A1A1A;
	--da-neutral-700: #4A4A4A;
	--da-neutral-400: #9CA3AF;
	--da-neutral-200: #E5E5E0;
	--da-neutral-100: #F5F5F0;
	--da-neutral-50: #FAFAF8;
	--da-white: #FFFFFF;
	--da-success: #2D6A4F;
	--da-error: #9B2335;

	/* Typography */
	--da-font-heading: "Libre Baskerville", Georgia, serif;
	--da-font-body: "Inter", "Source Sans 3", system-ui, sans-serif;

	/* Spacing */
	--da-space-xs: 0.5rem;
	--da-space-s: 1rem;
	--da-space-m: 1.5rem;
	--da-space-l: 2.5rem;
	--da-space-xl: 4rem;
	--da-space-2xl: 6rem;
	--da-space-3xl: 8rem;

	/* Containers */
	--da-container-xl: 1280px;
	--da-container-lg: 1024px;
	--da-container-md: 768px;
	--da-container-sm: 640px;

	/* Borders & Radius */
	--da-radius: 4px;
	--da-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--da-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Global Bricks class helpers — assign in Bricks Global Classes */
.da-heading {
	font-family: var(--da-font-heading);
	color: var(--da-primary);
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.da-body {
	font-family: var(--da-font-body);
	color: var(--da-neutral-900);
	line-height: 1.6;
	max-width: 65ch;
}

.da-section {
	padding-top: var(--da-space-xl);
	padding-bottom: var(--da-space-xl);
}

@media (min-width: 992px) {
	.da-section {
		padding-top: var(--da-space-2xl);
		padding-bottom: var(--da-space-2xl);
	}
}

.da-section--alt {
	background-color: var(--da-neutral-100);
}

.da-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--da-space-s) var(--da-space-m);
	background-color: var(--da-accent);
	color: var(--da-primary);
	font-weight: 600;
	border-radius: var(--da-radius);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

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

.da-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--da-space-s) var(--da-space-m);
	background-color: var(--da-primary);
	color: var(--da-white);
	font-weight: 600;
	border-radius: var(--da-radius);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.da-btn-secondary:hover {
	background-color: var(--da-primary-light);
	color: var(--da-white);
}

.da-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--da-space-s) var(--da-space-m);
	background-color: transparent;
	color: var(--da-primary);
	border: 1px solid var(--da-primary);
	font-weight: 600;
	border-radius: var(--da-radius);
	text-decoration: none;
	transition: all 0.2s ease;
}

.da-card {
	background: var(--da-white);
	border: 1px solid var(--da-neutral-200);
	border-radius: var(--da-radius);
	padding: var(--da-space-m);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.da-card:hover {
	box-shadow: var(--da-shadow-hover);
	border-top: 3px solid var(--da-accent);
}

.da-sticky-cta {
	display: none;
}

@media (max-width: 991px) {
	.da-sticky-cta {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		padding: var(--da-space-s);
		background: var(--da-white);
		border-top: 1px solid var(--da-neutral-200);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
	}
}

/* Scroll fade-in — pair with Bricks interaction */
.da-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.da-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}