/* ==========================================================================
   Alfawine design tokens
   --------------------------------------------------------------------------
   Palette values are sampled from logo.jpeg, not eyeballed:

     navy  #041A2F   dominant field in the logo
     gold  #E5B054   the metallic gold in the wordmark and emblem
     blue  #83C3E9   the light sweep on the emblem
     pale  #E4F0FE   the pale blue behind the service icons in the mockup

   Measured WCAG 2.x contrast (do not change a value without re-measuring):

     white on navy   17.59:1  PASS  body + headings on dark
     navy   on white 17.59:1  PASS  body + headings on light
     gold   on navy   8.94:1  PASS  gold accents on dark sections
     navy   on gold   8.94:1  PASS  the primary button label
     blue   on navy   9.17:1  PASS
     pale   on navy  15.24:1  PASS
     navy   on pale  15.24:1  PASS  the service icon glyphs

     gold   on white  1.97:1  FAIL -> never use as text
     gold   on pale   1.71:1  FAIL -> decorative rules only, never text
     blue   on white  1.92:1  FAIL -> never use as text
     white  on gold   1.97:1  FAIL -> never put white text on gold

   The rule this encodes: gold and blue are for dark sections and for
   decoration. On light backgrounds, text is navy or ink-muted, never gold.
   ========================================================================== */

:root {
	/* --- Brand --------------------------------------------------------- */
	--aw-navy: #041a2f;
	--aw-gold: #e5b054;
	--aw-blue: #83c3e9;
	--aw-pale: #e4f0fe;
	--aw-white: #ffffff;

	/* --- Ink / surfaces ------------------------------------------------ */
	--aw-ink: var(--aw-navy);
	--aw-ink-muted: #4a5a6e; /* 7.05:1 on white, 6.11:1 on pale */
	--aw-surface: #f7f9fc;
	--aw-line: #dde5ee;
	--aw-line-strong: #c3d0de;

	/* --- Status (kept minimal and AA-checked on white) ---------------- */
	--aw-success: #1c6b47;
	--aw-error: #a32020;
	--aw-focus: #0b5cab; /* 6.4:1 on white */

	/* --- Type ---------------------------------------------------------- */
	--aw-font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	--aw-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	--aw-size-xs: 0.75rem;
	--aw-size-sm: 0.875rem;
	--aw-size-base: 1rem;
	--aw-size-md: 1.0625rem;
	--aw-size-lg: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
	--aw-size-xl: clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem);
	--aw-size-2xl: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem);
	--aw-size-3xl: clamp(2.125rem, 2.6vw + 1.3rem, 3.5rem);

	--aw-leading-tight: 1.15;
	--aw-leading-snug: 1.35;
	--aw-leading-body: 1.65;

	/* --- Space / layout ------------------------------------------------ */
	--aw-space-2xs: 0.375rem;
	--aw-space-xs: 0.625rem;
	--aw-space-sm: 1rem;
	--aw-space-md: 1.5rem;
	--aw-space-lg: 2.25rem;
	--aw-space-xl: 3.5rem;
	--aw-space-2xl: clamp(3rem, 5vw, 5.5rem);

	--aw-container: 1200px;
	--aw-container-narrow: 820px;
	--aw-gutter: clamp(1rem, 4vw, 2.5rem);

	--aw-radius-sm: 4px;
	--aw-radius: 8px;
	--aw-radius-lg: 16px;
	--aw-radius-pill: 999px;

	--aw-shadow-sm: 0 1px 2px rgb(4 26 47 / 6%), 0 1px 3px rgb(4 26 47 / 8%);
	--aw-shadow: 0 4px 12px rgb(4 26 47 / 7%), 0 12px 28px rgb(4 26 47 / 8%);
	--aw-shadow-lg: 0 18px 48px rgb(4 26 47 / 14%);

	--aw-header-h: 76px;

	--aw-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Reset niceties that the parent theme does not cover
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

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

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

body {
	font-family: var(--aw-font-body);
	font-size: var(--aw-size-md);
	line-height: var(--aw-leading-body);
	color: var(--aw-ink);
	background: var(--aw-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* A single visible focus treatment everywhere, keyboard-only. */
:focus-visible {
	outline: 3px solid var(--aw-focus);
	outline-offset: 2px;
	border-radius: var(--aw-radius-sm);
}

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

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--aw-font-heading);
	font-weight: 600;
	line-height: var(--aw-leading-tight);
	letter-spacing: -0.015em;
	color: var(--aw-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--aw-size-3xl);
}

h2 {
	font-size: var(--aw-size-2xl);
}

h3 {
	font-size: var(--aw-size-xl);
}

h4 {
	font-size: var(--aw-size-lg);
}

p {
	margin-block: 0 1em;
	text-wrap: pretty;
}

a {
	color: var(--aw-ink);
	text-decoration-color: var(--aw-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--aw-transition), text-decoration-color var(--aw-transition);
}

a:hover,
a:focus {
	color: var(--aw-focus);
}

strong,
b {
	font-weight: 600;
}