/**
 * Oldspeak — design tokens.
 *
 * Every value here is overridable from the Customizer; inc/tokens.php prints a
 * :root override block into wp_head built from theme mods. Nothing in the other
 * stylesheets should hard-code a colour, size or family — always reference a token.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour — drawn from British trade bindings and shelf furniture.
	 * Bottle green is the dominant ground; paper is the retail surface.
	 * --------------------------------------------------------------- */
	--os-ink: #14161a; /* printing ink, blue-cast near-black */
	--os-shelf: #2b3a34; /* shelf paint / Penguin green band */
	--os-shelf-deep: #1e2a25; /* recessed shelf, footer */
	--os-shelf-raised: #35463f; /* hover / card on green */
	--os-oxide: #8f3722; /* Pelican band, darkened off terracotta */
	--os-oxide-bright: #a8452c; /* hover */
	--os-brass: #a8863f; /* shelf rail, foil-blocked title */
	--os-brass-bright: #c4a05a;
	--os-paper: #e8e6df; /* page edge — cool, greyed, foxed */
	--os-paper-white: #f4f3ee; /* card surface */
	--os-rule: #c3bba9; /* hairline */
	--os-rule-dark: #46564e; /* hairline on green */
	--os-muted: #6b6558; /* secondary text on paper */
	--os-muted-light: #a9b3ac; /* secondary text on green */

	/* Text colour used *on* each band ground. Presets flip these, which is
	 * what lets a light preset make the "shelf" band white without every
	 * child rendering white-on-white. */
	--os-shelf-fg: #f4f3ee;
	--os-shelf-muted: var(--os-muted-light);
	--os-shelf-rule: #46564e;
	--os-oxide-fg: #fbf2ee;
	--os-oxide-muted: #e8c8bd;
	--os-oxide-rule: #ab5a44;

	/* Semantic */
	--os-bg: var(--os-paper);
	--os-fg: var(--os-ink);
	--os-accent: var(--os-oxide);
	--os-accent-fg: #ffffff;
	--os-success: #3f6b4a;
	--os-warn: #8a6318;
	--os-danger: #8f2b22;

	/* ---------------------------------------------------------------
	 * Type — Caslon for display (the English printing face), Literata
	 * for body (built for screen reading), Plex Sans for catalogue data.
	 * --------------------------------------------------------------- */
	--os-font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
	--os-font-body: "Literata", Georgia, "Times New Roman", serif;
	--os-font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Fluid scale, 1.25 minor third at the small end opening to 1.333 */
	--os-step--1: clamp(0.79rem, 0.77rem + 0.10vw, 0.84rem);
	--os-step-0: clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
	--os-step-1: clamp(1.25rem, 1.18rem + 0.34vw, 1.45rem);
	--os-step-2: clamp(1.56rem, 1.44rem + 0.60vw, 1.94rem);
	--os-step-3: clamp(1.95rem, 1.75rem + 1.00vw, 2.58rem);
	--os-step-4: clamp(2.44rem, 2.11rem + 1.62vw, 3.44rem);
	--os-step-5: clamp(3.05rem, 2.53rem + 2.58vw, 4.58rem);

	--os-lh-tight: 1.06;
	--os-lh-snug: 1.22;
	--os-lh-body: 1.66;

	--os-tracking-display: -0.018em;
	--os-tracking-label: 0.14em; /* shelf-mark letterspacing */

	/* ---------------------------------------------------------------
	 * Space — 4px base, named by role not by number
	 * --------------------------------------------------------------- */
	--os-space-3xs: 0.25rem;
	--os-space-2xs: 0.5rem;
	--os-space-xs: 0.75rem;
	--os-space-s: 1rem;
	--os-space-m: 1.5rem;
	--os-space-l: 2.25rem;
	--os-space-xl: 3.5rem;
	--os-space-2xl: 5rem;
	--os-space-3xl: 7.5rem;

	/* Band rhythm — vertical padding for a tri-band section */
	--os-band-pad: clamp(3.5rem, 2.4rem + 5vw, 7rem);

	/* ---------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------- */
	--os-container: 76rem;
	--os-container-narrow: 42rem; /* reading measure, ~68ch at body size */
	--os-container-wide: 92rem;
	--os-gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);

	/* Book covers are 2:3, not square. This is the single biggest
	 * visual fix over the source site, which crops covers to 1:1. */
	--os-cover-ratio: 2 / 3;

	/* ---------------------------------------------------------------
	 * Surface
	 * --------------------------------------------------------------- */
	--os-radius-none: 0;
	--os-radius-sm: 2px;
	--os-radius: 3px;
	--os-radius-pill: 999px;
	--os-border-hair: 1px solid var(--os-rule);
	--os-shadow-card: 0 1px 2px rgba(20, 22, 26, 0.06), 0 6px 18px -8px rgba(20, 22, 26, 0.18);
	--os-shadow-lift: 0 2px 4px rgba(20, 22, 26, 0.08), 0 16px 34px -12px rgba(20, 22, 26, 0.28);
	/* A book on a shelf casts a hard short shadow to its right */
	--os-shadow-spine: 3px 0 0 rgba(20, 22, 26, 0.22);

	/* ---------------------------------------------------------------
	 * Motion
	 * --------------------------------------------------------------- */
	--os-ease: cubic-bezier(0.2, 0.6, 0.25, 1);
	--os-dur-fast: 120ms;
	--os-dur: 220ms;
	--os-dur-slow: 420ms;

	--os-focus-ring: 2px solid var(--os-brass-bright);
	--os-focus-offset: 2px;
}

/* Reduced motion is honoured globally, not per-component. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--os-dur-fast: 0.01ms;
		--os-dur: 0.01ms;
		--os-dur-slow: 0.01ms;
	}

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

/* ---------------------------------------------------------------
 * Reading Room — optional dark scheme, Customizer-toggled.
 * Applied via body class rather than media query so the shopkeeper
 * controls it; add `auto` to also follow the OS preference.
 * --------------------------------------------------------------- */
.os-scheme-reading-room {
	--os-bg: #171b19;
	--os-fg: #e4e1d7;
	--os-paper: #171b19;
	--os-paper-white: #1f2523;
	--os-rule: #333d38;
	--os-muted: #9aa39c;
	--os-shelf: #10130f;
	--os-shelf-deep: #0b0e0c;
	--os-shelf-raised: #1c221f;
	--os-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px -8px rgba(0, 0, 0, 0.7);
	--os-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.55), 0 16px 34px -12px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
	.os-scheme-auto {
		--os-bg: #171b19;
		--os-fg: #e4e1d7;
		--os-paper: #171b19;
		--os-paper-white: #1f2523;
		--os-rule: #333d38;
		--os-muted: #9aa39c;
		--os-shelf: #10130f;
		--os-shelf-deep: #0b0e0c;
		--os-shelf-raised: #1c221f;
	}
}


/* ===============================================================
 * PRESETS
 *
 * Chosen under Customise → Oldspeak → Identity. A preset only sets
 * base tokens; every individual colour control still overrides it,
 * so you can start from a preset and then tune one value.
 * =============================================================== */

/* --- Paper (default) -------------------------------------------
 * White ground, near-black text, a single restrained accent. This
 * is the one that reads like a clean, conventional bookshop site.
 * The header and footer sit on white with a hairline rule rather
 * than a solid colour block.
 * --------------------------------------------------------------- */
.os-preset-paper {
	--os-ink: #1a1a1a;
	--os-paper: #ffffff;
	--os-paper-white: #ffffff;
	--os-rule: #e2e0dc;
	--os-muted: #6a6a6a;

	/* "Shelf" is the header/footer/feature ground. In this preset it
	 * is a very light warm grey, not green. */
	--os-shelf: #f7f6f4;
	--os-shelf-deep: #f2f0ed;
	--os-shelf-raised: #ffffff;
	--os-shelf-fg: #1a1a1a;
	--os-shelf-muted: #6a6a6a;
	--os-shelf-rule: #e2e0dc;

	--os-oxide: #9c2b2b;
	--os-oxide-bright: #b83636;
	--os-oxide-fg: #ffffff;
	--os-oxide-muted: #f0d2d2;
	--os-oxide-rule: #b85757;

	--os-brass: #8a6a2f;
	--os-brass-bright: #a8863f;

	--os-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -6px rgba(0, 0, 0, 0.12);
	--os-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 26px -10px rgba(0, 0, 0, 0.2);
}

/* Header and footer need a rule in the light preset, since there is
 * no longer a colour change to separate them from the page. */
.os-preset-paper .os-header {
	border-block-end: 1px solid var(--os-rule);
}

.os-preset-paper .os-footer {
	border-block-start: 1px solid var(--os-rule);
}

/* The announcement bar stays dark for contrast in every preset. */

/* --- Shelf (the green one) ------------------------------------- */
.os-preset-shelf {
	--os-ink: #14161a;
	--os-paper: #e8e6df;
	--os-paper-white: #f4f3ee;
	--os-shelf: #2b3a34;
	--os-shelf-deep: #1e2a25;
	--os-shelf-raised: #35463f;
	--os-shelf-fg: #f4f3ee;
	--os-shelf-muted: #a9b3ac;
	--os-shelf-rule: #46564e;
	--os-oxide: #8f3722;
	--os-oxide-bright: #a8452c;
	--os-brass: #a8863f;
}

/* --- Reading Room (dark) --------------------------------------- */
.os-preset-reading-room {
	--os-bg: #171b19;
	--os-fg: #e4e1d7;
	--os-ink: #e4e1d7;
	--os-paper: #171b19;
	--os-paper-white: #1f2523;
	--os-rule: #333d38;
	--os-muted: #9aa39c;
	--os-shelf: #10130f;
	--os-shelf-deep: #0b0e0c;
	--os-shelf-raised: #1c221f;
	--os-shelf-fg: #e4e1d7;
	--os-shelf-muted: #9aa39c;
	--os-shelf-rule: #333d38;
	--os-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px -8px rgba(0, 0, 0, 0.7);
	--os-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.55), 0 16px 34px -12px rgba(0, 0, 0, 0.8);
}

/* ===============================================================
 * PLAIN BANDS
 *
 * With band tinting off, every section sits on the page ground and
 * is separated by space and a hairline instead of a colour change.
 * The hero and footer keep their treatment; it is the mid-page
 * bands that flatten, which is what makes a shop page read calmly.
 * =============================================================== */
.os-bands-plain .os-band--shelf,
.os-bands-plain .os-band--shelf-deep,
.os-bands-plain .os-band--oxide,
.os-bands-plain .os-band--ink {
	--os-bg: var(--os-paper);
	--os-fg: var(--os-ink);
	--os-muted: #6a6a6a;
	--os-rule: var(--os-rule);
	--os-accent: var(--os-oxide);
}

.os-bands-plain .os-band + .os-band {
	padding-block-start: 0;
}

.os-bands-plain .os-band + .os-band > .os-band__inner::before {
	content: "";
	display: block;
	block-size: 1px;
	background: var(--os-rule);
	margin-block-end: var(--os-band-pad);
}

.os-bands-plain .os-band a:not(.os-btn) {
	color: var(--os-oxide);
}