/* =============================================================================
 * Hillcrest Architects — design tokens.
 *
 * Source of truth: .design/design-system/tokens.json (color, type, spacing,
 * radius, shadow, plate ratios, opacity) and .design/design-system/motion.md
 * (durations, easings, stagger — the token format cannot carry a motion
 * family, so that block is copied here verbatim, as the handoff asks).
 *
 * The two themes are `paper` and `plate`, not light and dark. They ship in
 * three blocks, and the order matters:
 *   1. :root                                   the complete paper set
 *   2. prefers-color-scheme: dark, guarded      plate for system dark
 *   3. :root[data-theme="dark"]                 plate pinned, wins either way
 *
 * Three tokens exist only for the inverted band — `oxide-inverse` and the
 * `ink-inverse` pair. The accent flips lightness between themes, so
 * `oxide-600` fails contrast on `ink-950`. Do not simplify them away.
 *
 * theme.json declares its palette as var() references into this file, so the
 * WordPress presets are theme-aware for free and a color is defined once
 * (platform gotcha 37).
 * ========================================================================== */

:root {
	/* Grounds */
	--paper-100: #f4f2ed;
	--paper-000: #ffffff;
	--tone-200: #e7e4dd;
	--ink-950: #14151a;

	/* Ink */
	--ink-900: #16171c;
	--ink-700: #43454d;
	--ink-500: #5f626b;
	--ink-inverse: #f4f2ed;
	--ink-inverse-muted: #a5a8b0;

	/* Rules. rule-hair is decorative and does not meet 3:1 by design;
	 * rule-strong carries meaning and does. */
	--rule-hair: #dcd8d0;
	--rule-strong: #7d786f;

	/* The one accent, taken from weathering steel. Six marks per page is the
	 * ceiling — link text, the rule under an eyebrow, the plate number of the
	 * current project, the arrow on a text link. */
	--oxide-600: #96401f;
	--oxide-700: #7b3419;
	--oxide-100: #f3e4dc;
	--on-oxide: #ffffff;

	/* The accent when it sits ON ink-950. Not interchangeable with oxide-600. */
	--oxide-inverse: #e79a76;

	--focus-ring: #7b3419;
	--alert-600: #9c281c;

	/* Text laid over a photograph.
	 *
	 * These are the one set of colors that must NOT flip with the theme.
	 * tokens.json routes text over an image to `ink-inverse`, which is correct
	 * in paper and wrong in plate: photography is the one thing that does not
	 * change between the two themes, so a caption over a dusk photograph would
	 * turn near-black the moment the reader's system asked for dark. The
	 * reference page hardcodes these three literals inside `.bleed-in` for
	 * exactly that reason; naming them is the only change. */
	--on-photo: #f4f2ed;
	--on-photo-lede: #ece9e4;
	--on-photo-muted: #c9ccd2;
	--photo-ground: #14151a;

	/* Shadow — one level, and it appears twice on the whole site: the contact
	 * panel, and a plate lifting on hover in the index. */
	--shadow-plate: 0 1px 2px rgba(20, 21, 26, .04), 0 10px 30px rgba(20, 21, 26, .07);

	/* Type families. Faces are self-hosted — see assets/css/fonts.css. */
	--font-display: "Instrument Serif", "Times New Roman", Times, serif;
	--font-text: Newsreader, Georgia, "Times New Roman", serif;
	--font-label: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Space — a 4px base that opens wide at the top end. A monograph is mostly
	 * margin. Bands take space-9; the hero and the closing contact take
	 * space-10, twice a page at most. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 72px;
	--space-9: 104px;
	--space-10: 160px;

	/* Radius. Everything is square; a photograph is never rounded. */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-pill: 999px;

	/* Plate ratios. These are real tokens: a plate takes one of these five and
	 * nothing else, and the image pipeline crops to them. */
	--plate-panorama: 21 / 9;
	--plate-wide: 16 / 9;
	--plate-landscape: 3 / 2;
	--plate-portrait: 4 / 5;
	--plate-square: 1 / 1;

	/* Opacity */
	--opacity-enter: 0;
	--opacity-wash: .46;
	--opacity-rest: .88;
	--opacity-disabled: .4;

	/* Motion — copied verbatim from design-system/motion.md. Everything here
	 * is slower than a marketing site would use; a monograph is turned, not
	 * scrolled, and fast motion makes a building look cheap. */
	--dur-1: 140ms;     /* state change: color, rule, opacity */
	--dur-2: 320ms;     /* a control responding */
	--dur-3: 700ms;     /* text entering */
	--dur-4: 1100ms;    /* a headline entering */
	--dur-mask: 1200ms; /* a plate unmasking */
	--dur-drift: 14s;   /* the slow scale on a full-bleed plate */

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-mask: cubic-bezier(.66, 0, .1, 1); /* the wipe: quick off the mark, long settle */
	--ease-drift: linear;

	--stagger: 110ms;

	/* Layout. The text column maxes at 1180px with a space-7 gutter. */
	--col: min(1180px, 100%);
}

/* Plate, when the reader's system asks for it and the page is not pinned. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper-100: #131418;
		--paper-000: #191b20;
		--tone-200: #202329;
		--ink-950: #f4f2ed;
		--ink-900: #f2f0eb;
		--ink-700: #c9cbd1;
		--ink-500: #91949c;
		--ink-inverse: #16171c;
		--ink-inverse-muted: #55585f;
		--rule-hair: #262930;
		--rule-strong: #7f868f;
		--oxide-600: #e08a63;
		--oxide-700: #eda57f;
		--oxide-100: #2a180f;
		--on-oxide: #1c0e06;
		--oxide-inverse: #7b3419;
		--focus-ring: #eda57f;
		--alert-600: #f0928a;
		--shadow-plate: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
	}
}

/* Plate, pinned. Also the hook the editor preview and a future toggle use. */
:root[data-theme="dark"] {
	--paper-100: #131418;
	--paper-000: #191b20;
	--tone-200: #202329;
	--ink-950: #f4f2ed;
	--ink-900: #f2f0eb;
	--ink-700: #c9cbd1;
	--ink-500: #91949c;
	--ink-inverse: #16171c;
	--ink-inverse-muted: #55585f;
	--rule-hair: #262930;
	--rule-strong: #7f868f;
	--oxide-600: #e08a63;
	--oxide-700: #eda57f;
	--oxide-100: #2a180f;
	--on-oxide: #1c0e06;
	--oxide-inverse: #7b3419;
	--focus-ring: #eda57f;
	--alert-600: #f0928a;
	--shadow-plate: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
}

/* Required by motion.md. Every script also checks matchMedia and takes its own
 * short path — plates render fully unmasked at scale(1), captions are present,
 * headings are plain, and the hero neither drifts nor parallaxes. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}