/*
 * Harbor Coffee Roasters — brand design tokens (F2 US-001).
 *
 * This is the brand layer: the warm earthy palette and the type system, named
 * the way the brand talks about them (rich brown, mid brown, cream, copper).
 * It is loaded by inc/tokens.php on the front end AND registered with
 * add_editor_style() so the block editor paints the same colours and fonts as
 * the site.
 *
 * RELATIONSHIP TO assets/css/design-tokens.css
 * --------------------------------------------
 * design-tokens.css is the scale layer every component stylesheet already
 * consumes (--color-primary-600, --space-6, --shadow-md …). The two files hold
 * the SAME hex values: the brand names below are the readable aliases, the
 * scale names are what the CSS paints. tests/tokens-smoke.php resolves both
 * files plus theme.json and inc/design-tokens.php and fails if any of them
 * disagree, so there is no second palette to drift from — add a colour here and
 * the test tells you the other three places to mirror it.
 *
 * WCAG AA CONTRAST AUDIT
 * ----------------------
 * Every pair the theme actually paints is measured by
 * tests/a11y-contrast-smoke.php, which resolves these tokens and fails below
 * 4.5:1 for body text and 3:1 for large text, borders of controls and focus
 * rings. Measured ratios:
 *
 * On --color-cream (#faf6ef, the page background):
 *   --color-brown-rich / --color-text   14.57:1   body copy
 *   --color-brown-mid  / --color-text-muted 8.11:1 lede and meta copy
 *   --color-neutral-500                   5.18:1   smallest meta (dates)
 *   --color-copper / --color-link         5.33:1   inline links, button border
 *   --color-copper-dark / --color-link-hover 7.84:1 link hover and focus
 *   --color-success  5.37:1   --color-error  5.52:1
 *   --color-warning  5.20:1   --color-info   6.22:1
 *   --color-accent-700 (amber as text) 5.65:1
 *   --color-border 1.28:1 — decoration only, never the only cue for a control
 *
 * On --color-brown-rich (#20150d, the footer and the dark bands):
 *   --color-cream 16.60:1   --color-neutral-200 12.98:1
 *   --color-neutral-300 10.39:1  --color-neutral-400 5.65:1
 *   --color-accent-300 10.99:1 (link hover)  --color-accent-200 13.32:1 (ring)
 *
 * Reversed out:
 *   --color-on-primary on --color-copper      5.33:1  filled copper button
 *   --color-on-primary on --color-copper-dark 7.84:1  …its hover
 *   --color-brown-rich on --color-copper      3.12:1  focus ring on that button
 *   --color-brown-rich on --color-accent-300 10.99:1  amber badge label
 *
 * Mid-scale tints are NOT text colours and the style guide labels them as
 * such: --color-accent-500 is 2.63:1 on cream and --color-primary-500 4.15:1,
 * so amber copy on light uses --color-accent-700 and copper copy uses
 * --color-copper (600) or darker.
 */

:root {
	/* ---------------------------------------------------------------
	 * Brand palette — the four colours the brand is built from
	 * --------------------------------------------------------------- */

	/* Rich brown: dark text and the dark bands/footer. */
	--color-brown-rich: #20150d;
	/* Mid brown: secondary copy, muted UI, warm dividers on dark. */
	--color-brown-mid: #5c4733;
	/* Cream: the page background. There is no pure white in the theme. */
	--color-cream: #faf6ef;
	/* Cream, one step deeper: cards and inset panels. */
	--color-cream-deep: #f3ebdd;
	/* Copper: the accent, and the only conversion colour. */
	--color-copper: #a34e17;
	--color-copper-dark: #7d3a12;
	--color-copper-tint: #fdf6f0;

	/* ---------------------------------------------------------------
	 * Copper scale (primary)
	 * --------------------------------------------------------------- */
	--color-primary-50: #fdf6f0;
	--color-primary-100: #f8e5d4;
	--color-primary-200: #efc7a6;
	--color-primary-300: #e2a271;
	--color-primary-400: #d07c42;
	--color-primary-500: #b85f23;
	--color-primary-600: #a34e17;
	--color-primary-700: #7d3a12;
	--color-primary-800: #5f2d10;
	--color-primary-900: #401e0b;

	/* ---------------------------------------------------------------
	 * Crema amber scale (accent support: badges, chips, dark-band links)
	 * --------------------------------------------------------------- */
	--color-accent-50: #fdf9ec;
	--color-accent-100: #fbefc6;
	--color-accent-200: #f6dd8c;
	--color-accent-300: #f0c653;
	--color-accent-400: #e3a92a;
	--color-accent-500: #c98f18;
	--color-accent-600: #a87214;
	--color-accent-700: #8a5712;
	--color-accent-800: #6b4312;
	--color-accent-900: #3c2409;

	/* ---------------------------------------------------------------
	 * Neutrals — cream through rich brown, no pure black or white
	 * --------------------------------------------------------------- */
	--color-neutral-50: #faf6ef;
	--color-neutral-100: #f3ebdd;
	--color-neutral-200: #e7dac6;
	--color-neutral-300: #d5c3a8;
	--color-neutral-400: #a48d74;
	--color-neutral-500: #7a6450;
	--color-neutral-600: #5c4733;
	--color-neutral-700: #432f1f;
	--color-neutral-800: #2f2015;
	--color-neutral-900: #20150d;

	/* ---------------------------------------------------------------
	 * State colours — all four clear 4.5:1 on cream AND on a card
	 * --------------------------------------------------------------- */
	--color-success: #137538;
	--color-warning: #a2520a;
	--color-error: #c22121;
	--color-info: #1d4ed8;

	/* ---------------------------------------------------------------
	 * Roles — what components reference
	 * --------------------------------------------------------------- */
	--color-bg: var(--color-cream);
	--color-surface: var(--color-cream-deep);
	--color-surface-dark: var(--color-brown-rich);
	--color-text: var(--color-neutral-800);
	--color-text-muted: var(--color-brown-mid);
	--color-on-primary: var(--color-cream);
	--color-border: var(--color-neutral-200);
	--color-link: var(--color-copper);
	--color-link-hover: var(--color-copper-dark);
	--overlay-hero: linear-gradient(180deg, rgba(32, 21, 13, 0.25) 0%, rgba(32, 21, 13, 0.62) 100%);
	--overlay-flat: rgba(32, 21, 13, 0.48);

	/* ---------------------------------------------------------------
	 * Typography — serif headings, sans body, system fallbacks first
	 *
	 * Both families are loaded by inc/performance.php with font-display:swap
	 * (self-hosted WOFF2 from assets/fonts when present, otherwise one remote
	 * stylesheet), so copy paints in the fallback face immediately and never
	 * stays invisible while a font downloads.
	 * --------------------------------------------------------------- */
	--font-heading: "Fraunces", "Playfair Display", Georgia, "Iowan Old Style", "Times New Roman", serif;
	--font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

	/*
	 * Fluid scale. Every heading step is a clamp() between its mobile and its
	 * desktop size, so type grows with the viewport without a media query.
	 * Body copy is deliberately NOT fluid: --text-base stays 1rem (16px) and
	 * --leading-normal is 1.65, both above the accessible minimum.
	 */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
	--text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
	--text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
	--text-2xl: clamp(1.563rem, 1.3rem + 0.8vw, 1.953rem);
	--text-3xl: clamp(1.953rem, 1.5rem + 1.6vw, 2.441rem);
	--text-4xl: clamp(2.441rem, 1.6rem + 3.2vw, 3.815rem);

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--letter-tight: -0.015em;
	--letter-tighter: -0.025em;
	--letter-normal: 0;
	--letter-wide: 0.05em;
	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.65;
	--measure: 65ch;
}