/* ==========================================================================
   BASE — Custom Properties, Reset, Typography
   ========================================================================== */

:root {
	/* Color palette — warm Southern brick home */
	--color-brick:         #7B3028;   /* deep brick red  — primary */
	--color-brick-dark:    #5E2219;   /* darker brick    — hover */
	--color-pine:          #3D5A3E;   /* forest green    — secondary */
	--color-pine-dark:     #2C4230;   /* darker pine     — hover */
	--color-brass:         #C8963E;   /* warm brass/gold — accent */
	--color-cream:         #F7F2E8;   /* warm cream      — bg */
	--color-linen:         #EDE6D6;   /* deeper linen    — bg-alt */
	--color-mahogany:      #2A2520;   /* rich dark brown — headings & text */
	--color-warm-tan:      #9C8570;   /* warm tan        — muted text */
	--color-white-warm:    #FDFAF5;   /* off-white       — cards */

	/* Alpha variants */
	--color-mahogany-90:  rgba(42, 37, 32, 0.9);
	--color-mahogany-60:  rgba(42, 37, 32, 0.6);
	--color-mahogany-20:  rgba(42, 37, 32, 0.2);
	--color-white-60:     rgba(253, 250, 245, 0.6);
	--color-white-90:     rgba(253, 250, 245, 0.9);

	/* Keep deep-sea alias for components that reference it */
	--color-deep-sea:     var(--color-mahogany);
	--color-deep-sea-90:  var(--color-mahogany-90);
	--color-deep-sea-60:  var(--color-mahogany-60);
	--color-deep-sea-20:  var(--color-mahogany-20);

	/* Semantic aliases */
	--color-bg:            var(--color-white-warm);
	--color-bg-alt:        var(--color-linen);
	--color-text:          var(--color-mahogany);
	--color-text-muted:    var(--color-warm-tan);
	--color-accent:        var(--color-brick);
	--color-primary:       var(--color-brick);
	--color-primary-light: #B05045;
	--color-ocean:         var(--color-brick);   /* alias so layout.css btn-ocean = brick */
	--color-coral:         var(--color-brass);   /* alias so btn-coral = brass */
	--color-coral-dark:    #A87830;
	--color-border:        var(--color-warm-tan);

	/* Typography — classic Southern serif */
	--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
	--font-accent:  'Cormorant Garamond', Georgia, serif;

	/* Type scale */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.375rem;
	--text-2xl:  1.75rem;
	--text-3xl:  2.25rem;
	--text-4xl:  3rem;
	--text-hero: clamp(2.5rem, 6vw, 4.5rem);

	/* Line heights */
	--leading-tight:  1.2;
	--leading-snug:   1.4;
	--leading-normal: 1.6;
	--leading-loose:  1.8;

	/* Spacing */
	--section-pad:    clamp(3.5rem, 9vw, 6.5rem);
	--container-max:  1200px;
	--container-pad:  clamp(1.25rem, 5vw, 2.5rem);
	--gap-sm:         0.75rem;
	--gap-md:         1.5rem;
	--gap-lg:         2.5rem;
	--gap-xl:         4rem;

	/* Borders & radii */
	--radius-sm:   6px;
	--radius-card: 14px;
	--radius-btn:  50px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:   0 2px 8px rgba(42,37,32,0.08);
	--shadow-card: 0 4px 24px rgba(42,37,32,0.10);
	--shadow-hero: 0 8px 40px rgba(42,37,32,0.30);
	--shadow-lg:   0 12px 48px rgba(42,37,32,0.18);

	/* Transitions */
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
	--duration:    0.25s;
	--duration-md: 0.4s;

	/* Header height */
	--header-height: 72px;
}

/* Modern CSS reset */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: var(--leading-tight);
	color: var(--color-mahogany);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
	line-height: var(--leading-normal);
	margin-bottom: 1em;
}
p:last-child { margin-bottom: 0; }

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration) var(--ease-out);
}
a:hover { color: var(--color-pine); }

strong, b { font-weight: 600; }
em, i     { font-style: italic; }

img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	list-style: none;
}

button {
	cursor: pointer;
	font-family: inherit;
	border: none;
	background: none;
}

/* Accessibility */
.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	padding: 0.5rem 1rem;
	background: var(--color-brick);
	color: #fff;
	z-index: 9999;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
	top: 0;
}

/* Focus styles */
:focus-visible {
	outline: 3px solid var(--color-brass);
	outline-offset: 3px;
}