/*
 * OrgTree — base.css
 * Global design tokens, reset, typography defaults, focus styles,
 * container utility, and the reduced-motion kill switch.
 */

/* ---------------------------------------------------------------------- */
/* Design tokens                                                          */
/* ---------------------------------------------------------------------- */

:root {
	/* ------------------------------------------------------------------ */
	/* Palette — v2 luxury rebrand: polished gradient black (ink) + tree   */
	/* green accent + apple-esque polished white (paper). Green sampled    */
	/* from the leaf glow in assets/tree/mature.jpg. Existing tokens below */
	/* are REMAPPED (not renamed) so every page re-skins automatically.    */
	/* ------------------------------------------------------------------ */

	/* Inks — LP-style neutral polished charcoal (matches luxurypresence.com's
	   #141516 ground). Subtle, premium, never flat #000. */
	--ink-900: #0E0F10;
	--ink-800: #141516; /* LP charcoal ground */
	--ink-700: #1C1E20;
	--black: #0E0F10;  /* remap: legacy "black" now resolves to --ink-900 */
	--forest: #141516; /* remap: legacy dark-section bg now resolves to --ink-800 */

	/* Apple-white — polished, soft green-grey bias. */
	--white: #FFFFFF;
	--paper: #F4F7F6;
	--cream: #F4F7F6;  /* remap: legacy light bg now resolves to apple-white paper */
	--grey-bg: #E7ECE9;

	/* Accent — tree green, the one bold colour (CTAs, links, highlights).
	   Client wants a VIBRANT EMERALD, but that vibrant value fails AA as
	   text/links on the apple-white sections (~2.9:1). So the global/light
	   value here is a DEEP emerald (~5:1 on white, AA-safe) and the vibrant
	   emerald is applied ONLY as a scoped override inside dark/ink sections
	   (see `.section--dark` below) — every dark scope in this theme uses
	   that one class, so the override there covers the whole site. Any
	   dark scope that's missed simply falls back to this deep value, which
	   is still legible — never a contrast failure. */
	--green: #0B7A47;
	--green-deep: #0B7A47; /* headings/text on white where deep green reads better */
	--green-glow: #57E0A4; /* glow / hover state — brighter, used on dark backgrounds only */
	/* Fixed vibrant emerald for SOLID fills (buttons) — deliberately NOT the
	   scoped `--green` above. `--green` swaps deep/vibrant by light-vs-dark
	   context because it's used for TEXT (which fails AA at the vibrant
	   value on white); a filled button uses --ink-900 text on top of this
	   colour instead, so it can stay vibrant everywhere the fill appears
	   (ink-900 on this value measures ~6.95:1, comfortably AA). */
	--green-vibrant: #14AE6B;

	/* Brand pivot (Andy call 2026-07-03): GOLD DROPPED. The accent is now GREEN
	   only (palette = black / white / gray / green). `--gold` is kept as an alias
	   pointing at the scoped `--green` so every existing accent usage (eyebrows,
	   labels, icons, dividers, underlines) flips to green in one place and still
	   gets the deep-on-light / vibrant-on-dark contrast treatment. */
	--gold: var(--green);
	--apple: var(--green-glow); /* retired name, folded into the green-glow value */

	/* Text — neutral (LP): near-white headings, soft grey body on dark. */
	--text-on-dark: #F2F3F4;
	--muted-on-dark: #A7ABAD;
	--grey-text: #566058; /* on-light body copy */

	/* Gradients — LP-style charcoal so ink/paper read "polished", not flat. */
	--grad-ink: radial-gradient(130% 120% at 50% -10%, #202325 0%, #16181A 46%, #0E0F10 100%);
	--grad-paper: linear-gradient(180deg, #FFFFFF 0%, #F1F5F2 100%);
	--grad-ink-soft: linear-gradient(180deg, #16181A 0%, #0E0F10 100%);

	/* Type */
	--font-heading: 'Prata', 'Georgia', serif;
	--font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	--font-accent: 'Merriweather', Georgia, serif;

	/* Type scale (fluid, clamp-based) */
	--text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
	--text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
	--text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--text-lg: clamp(1.125rem, 1.06rem + 0.35vw, 1.35rem);
	--text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--text-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
	--text-4xl: clamp(2.75rem, 2.1rem + 3vw, 4.5rem);

	/* Spacing scale */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 9rem;

	/* Container widths */
	--container-sm: 40rem;
	--container-md: 60rem;
	--container-lg: 75rem;
	--container-xl: 90rem;

	/* Misc */
	--radius: 4px;
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent);
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                  */
/* ---------------------------------------------------------------------- */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
}

/* ---------------------------------------------------------------------- */
/* Body / typography defaults                                            */
/* ---------------------------------------------------------------------- */

body {
	background-color: var(--cream);
	color: var(--grey-text);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--forest);
	font-weight: 400;
	line-height: 1.2;
}

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 {
	max-width: 70ch;
}

strong, b {
	font-weight: 700;
}

blockquote,
.pull-quote {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--forest);
}

/* ---------------------------------------------------------------------- */
/* Links / focus (accessible, visible focus ring)                        */
/* ---------------------------------------------------------------------- */

a {
	text-decoration-color: var(--gold);
	text-underline-offset: 0.15em;
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
	color: var(--green);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius);
}

/* Remove the default outline only when focus-visible is supported and
   not active — never remove outline unconditionally, so keyboard users
   without :focus-visible support still see the native ring. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 1000;
}

.skip-link:focus {
	left: var(--space-sm);
	top: var(--space-sm);
	background: var(--cream);
	color: var(--forest);
	padding: var(--space-2xs) var(--space-sm);
	border-radius: var(--radius);
	box-shadow: var(--focus-ring);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	position: static;
}

/* ---------------------------------------------------------------------- */
/* Layout utilities                                                       */
/* ---------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-lg);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--xl { max-width: var(--container-xl); }

/* Dark cinematic variant — polished ink gradient (v2 luxury rebrand), used by
   hero/CoSuite/CTA-band sections. */
.section--dark {
	background: var(--grad-ink);
	color: var(--text-on-dark);
	/* Vibrant-emerald override — this is the single dark-scope class used by
	   every dark section site-wide (home hero incl. the scroll-driven canvas
	   hero, cosuite-intro band, the CTA band, and every section on the
	   CoSuite page), so overriding --green here covers the whole site. Any
	   descendant that reads var(--green) inside a dark scope now gets the
	   vibrant fill instead of the deep/legible one used on light sections. */
	--green: var(--green-vibrant);
	/* `--gold` is an alias for `--green` (brand pivot), but it's computed at
	   :root (deep green) and would inherit that dim value onto dark sections.
	   Re-assert it here so the accent (eyebrows/labels/icons) is the vibrant
	   green on dark, legible against the charcoal. */
	--gold: var(--green-vibrant);
}

/* Full-screen hero with a full-bleed brand render behind LEFT-aligned copy,
   matched 1:1 to the homepage hero (.hero-inner / .hero-copy in hero.css):
   100vh tall, copy pinned to the left end of the --container-xl gutter, and the
   same eyebrow / heading / sub sizing. The per-page background layers a dark
   scrim over the render so the copy stays legible. */
.page-hero--media {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Above the fold: never fade in via .reveal (mirrors .hero in hero.css). */
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.page-hero--media .page-hero__inner {
	max-width: var(--container-xl);
	margin-inline: auto;
	padding-inline: var(--space-lg);
	padding-block: clamp(4.5rem, 3.8rem + 2vh, 5.5rem) var(--space-lg);
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.page-hero--media .page-hero__copy {
	max-width: 36rem;
}

.page-hero__eyebrow {
	margin: 0 0 var(--space-md);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--gold);
}

.page-hero--media .page-hero__copy h1 {
	color: var(--text-on-dark);
	font-size: clamp(2rem, 1.4rem + 2.1vw, 3rem);
	line-height: 1.1;
	margin: 0 0 var(--space-md);
}

.page-hero__sub {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
	font-size: var(--text-lg);
	line-height: 1.55;
	max-width: 44ch;
	margin: 0 0 var(--space-md);
}

@media (max-width: 47.99rem) {
	.page-hero--media .page-hero__inner {
		min-height: 82vh;
		padding-block: clamp(6rem, 18vh, 9rem) var(--space-xl);
	}
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
	color: var(--text-on-dark);
}

.section--dark a {
	color: var(--gold);
}

/* Apple-green highlight — sparing use only (small accents, never large fills). */
.text-highlight {
	color: var(--green-glow);
}

/* ---------------------------------------------------------------------- */
/* Scroll-reveal utility (paired with assets/js/main.js)                  */
/* ---------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------------------- */
/* Reduced motion — final state shown, no motion, no exceptions.         */
/* ---------------------------------------------------------------------- */

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

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

	.reveal {
		opacity: 1;
		transform: none;
	}
}