/*
 * aard.aardvarkcasework.css: brand overrides for aardCSS (generated by build/aard-client-theme.php)
 * Variable layer only. Load after aard.css. Regenerate rather than hand-editing values.
 * Dark values without an explicit pair were derived by lifting OKLCH lightness to 4.5:1.
 */

:root, ::backdrop {
	--aard-background-color: light-dark(#F8F5EE, #16140f);
	--aard-color: light-dark(#21282D, #d6dfe6);
	--aard-muted-color: light-dark(#646C73, #9da6ad);
	--aard-muted-border-color: light-dark(#cfd6db, #312f29);
	--aard-h1-color: var(--aard-color);
	--aard-h2-color: var(--aard-color);
	--aard-h3-color: var(--aard-color);
	--aard-h4-color: var(--aard-color);
	--aard-h5-color: var(--aard-color);
	--aard-h6-color: var(--aard-color);
	--aard-card-background-color: light-dark(#FFFFFF, #1f1d18);
	--aard-card-border-color: var(--aard-muted-border-color);
	--aard-card-sectioning-background-color: light-dark(#f5f5f6, #22272b);
	--aard-form-element-background-color: light-dark(#FFFFFF, #1d1b16);
	--aard-form-element-border-color: var(--aard-muted-border-color);
	--aard-text-selection-color: light-dark(rgba(92, 6, 10, 0.25), rgba(209, 117, 110, 0.35));
	--aard-font-family: "Inter", system-ui, sans-serif;
	--aard-font-heading: "Lora", Georgia, serif;

	--aard-primary: light-dark(#5C060A, #d1756e);
	--aard-primary-background: light-dark(#fde5e2, #3e1a17);
	--aard-primary-hover: light-dark(#400003, #e98b83);
	--aard-primary-hover-background: light-dark(#5C060A, #d1756e);
	--aard-primary-focus: light-dark(#5C060A, #d1756e);
	--aard-primary-inverse: light-dark(#fff, #000);
	--aard-primary-underline: light-dark(rgba(92, 6, 10, 0.5), rgba(209, 117, 110, 0.5));
}

/* The mobile menu panel is aardCSS's cool slate by default in dark mode; use the warm card surface (:root:root outranks the base :root:not([data-theme]) block). */
:root:root { --aard-dropdown-background-color: var(--aard-card-background-color); }

/* Non-colour, brand-owned overrides. Fonts are self-hosted variable woff2 (Latin subset,
   OFL licence), font-display: swap, preloaded from baseof.html. Georgia and system-ui
   are the fallbacks named in the font variables above. */
@font-face {
	font-family: "Lora";
	src: url("/fonts/Lora-Variable.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/fonts/Inter-Variable.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Logo: mark in the brand colour, wordmark as live text (aardvark in ink, CASEWORK in the brand colour). */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo-mark { height: 2.4rem; width: auto; aspect-ratio: 727 / 479; color: var(--aard-primary); flex: none; }
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.nav-brand .logo-a { font-family: var(--aard-font-heading); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--aard-color); }
.logo-b { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--aard-primary); }

/* Hero */
.hero-title { max-width: 20em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--aard-space-xs); }

/* Copy that still needs Paul's input (visible TODO markers) */
mark { background: light-dark(#f6e3a8, #4a3d10); color: var(--aard-color); padding: 0 0.25em; }

/* Section rhythm: aardCSS's .region default (--aard-space-l-xl, ~90px a side at 1280) doubles
   between adjacent sections and read as empty here. One step down. */
.region { padding-block: var(--aard-space-m); }

/* Engraving (public-domain aardvark, one colour). A mask rather than an <img> so it takes the
   text colour and follows light and dark. Sources and licence: docs/image-sources.md */
.engraving {
	width: 100%;
	max-width: 34rem;
	aspect-ratio: 1000 / 624;
	background-color: currentColor;
	-webkit-mask: url("/img/aardvark-engraving.svg") center / contain no-repeat;
	mask: url("/img/aardvark-engraving.svg") center / contain no-repeat;
	opacity: 0.9;
}
.why > .engraving { margin-block-start: var(--aard-space-m); }
@media (min-width: 64em) {
	.why { display: grid; grid-template-columns: minmax(0, 65ch) minmax(0, 1fr); gap: var(--aard-space-xl); align-items: start; }
	.why > .engraving { margin-block-start: var(--aard-space-2xl); align-self: start; }
}