/**
 * Design tokens for the Kate Siber theme.
 *
 * Single source of truth for color, type, spacing, and other primitives.
 * Every component stylesheet should reference these custom properties
 * rather than hard-coding values, so the whole site can be re-themed
 * from this one file.
 *
 * Placeholder editorial palette — swap for Kate's actual brand colors
 * once defined; everything downstream already references these tokens.
 */

:root {
	/*
	 * Tells the browser this page supports both appearances, so native
	 * chrome we don't (and can't fully) style ourselves — scrollbars,
	 * form control default borders/focus rings not otherwise
	 * overridden, etc. — follows the same light/dark switch as
	 * everything else instead of always rendering light.
	 */
	color-scheme: light dark;

	/* Color: neutrals */
	--color-ink: #1c1b19;
	--color-ink-soft: #4a463f;
	--color-paper: #fdfcfa;
	--color-paper-dim: #f3f1ec;
	/*
	 * The original #e2ddd2 only hit 1.32:1 against --color-paper — an
	 * accessibility audit flagged it well under WCAG 1.4.11's 3:1
	 * non-text minimum (borders, the hero carousel's inactive dots,
	 * card/button outlines). #989285 clears 3:1 (~3.02:1); same warm
	 * tan hue family as the original, just darker. See the dark-mode
	 * override below, which already went through this same fix.
	 */
	--color-border: #989285;

	/* Color: brand */
	--color-primary: #2f5233;
	--color-primary-dark: #1f3722;
	/*
	 * The original #c1662f hit 3.93:1 against --color-paper — clears
	 * WCAG's 3:1 non-text minimum (its main use, e.g. the :focus-visible
	 * outline in base.css) but not the 4.5:1 normal-text minimum, which
	 * matters where it's used as literal text/icon color (e.g.
	 * .contact-form__notice--error, .book-awards__item's star). #a8541f
	 * clears 4.5:1 (~5.18:1) while staying in the same warm-orange family.
	 */
	--color-accent: #a8541f;

	/* Color: feedback */
	--color-link: var(--color-primary);
	--color-link-hover: var(--color-primary-dark);

	/*
	 * Overlay scrim (modal backdrop, nav drawer backdrop) — deliberately
	 * NOT in the dark-mode override block below. An overlay dimming the
	 * page behind a modal/drawer should stay dark regardless of the
	 * site's own light/dark mode, the same way a photo lightbox scrim
	 * doesn't flip color with the OS theme.
	 */
	--color-scrim: rgba(28, 27, 25, 0.5);

	/* Typography */
	--font-serif: 'Garamond', 'Iowan Old Style', Georgia, serif;
	--font-sans: 'UniversExt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--font-size-base: 1.25rem;
	--font-size-sm: 0.9375rem;
	--font-size-lg: 1.375rem;
	--font-size-xl: 1.875rem;
	--font-size-2xl: 2.5rem;
	--font-size-3xl: 3.25rem;

	--line-height-body: 1.65;
	--line-height-heading: 1.15;

	/* Uppercase "eyebrow"/label text (nav links, section titles, card
	   eyebrows) repeats these two tracking values across components. */
	--tracking-tight: 0.04em;
	--tracking-wide: 0.06em;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--space-7: 6rem;

	/*
	 * Layout. One reading-width token used everywhere (page bodies,
	 * single posts/articles, Books' floated covers) — no page-specific
	 * overrides. --wide-width is for grid/multi-column layouts only
	 * (card grids, footer, header), never for a body-text column.
	 */
	--content-width: 56rem;
	--wide-width: 72rem;

	/* Effects */
	--radius: 4px;
	/* Material-style elevation: a tight "key light" shadow layered under a
	   softer, wider "ambient" shadow — resting is near-flat, raised has depth. */
	--shadow-resting: 0 1px 2px rgba(28, 27, 25, 0.06);
	--shadow-raised: 0 2px 4px -1px rgba(28, 27, 25, 0.14), 0 8px 16px -2px rgba(28, 27, 25, 0.12), 0 1px 3px rgba(28, 27, 25, 0.08);
	--transition-base: 150ms ease;
	--transition-elevation: 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-ink: #f3f1ec;
		/*
		 * #c9c4b8 (the light-mode --color-ink-soft's naive complement)
		 * read too yellow/warm at this lightness — #b6b3ae pulls the R/G
		 * channels closer to B (a much smaller warm skew) while staying
		 * comfortably above the 4.5:1 AA minimum (8.24:1).
		 */
		--color-ink-soft: #b6b3ae;
		--color-paper: #1c1b19;
		--color-paper-dim: #26241f;
		/*
		 * The original #3a362e only hit 1.43:1 against --color-paper and
		 * 1.29:1 against --color-paper-dim — WCAG 1.4.11 (Non-text
		 * Contrast) requires 3:1 for UI component borders, so buttons,
		 * cards, and dividers that lean on this for definition (not a
		 * background-color difference — see button.css/card.css) were
		 * reading as edgeless. The first fix (#807969) cleared 3:1 but
		 * read too yellow; #75747a leans very slightly cool (B channel
		 * highest) instead, landing as neutral rather than warm, and
		 * still clears 3:1 against both (3.72:1 / 3.35:1).
		 */
		--color-border: #75747a;

		--color-primary: #7fae83;
		--color-primary-dark: #a3cca6;
		--color-accent: #e08a52;

		/*
		 * The light-mode shadows use rgba(28, 27, 25, ...) — a dark
		 * shadow cast onto a light surface. Against an already near-
		 * black --color-paper (#1c1b19), that same dark-on-dark shadow
		 * has almost no headroom to read as depth at all, so hover
		 * elevation (.card:hover, .news-item--card:hover) looked like
		 * nothing happened but the lift. Pure black at much higher
		 * opacity still has enough headroom against #1c1b19 to read
		 * as a genuine cast shadow.
		 */
		--shadow-resting: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-raised: 0 2px 4px -1px rgba(0, 0, 0, 0.55), 0 8px 20px -2px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45);
	}
}