/* ==========================================================================
   Grasbloggen — design tokens
   Ported from design/prototypes/v5/styles.css :root block (D010
   "Svensk trädgårdsjournal"). Structure/tokens only — no prototype copy.
   ========================================================================== */

:root {
	/* ---- Primitive tokens ---- */
	--p-white: #FBFBF8;
	--p-cream: #F2F0E6;
	--p-forest-950: #0B2417;
	--p-forest-900: #0F2E1D;
	--p-forest-800: #16402A;
	--p-forest-600: #2F6B44;
	--p-lawn-500: #3F8F4F;
	--p-lawn-600: #2E7A3E;
	--p-ochre-700: #8A5A2E;
	--p-ochre-100: #F3EADD;
	--p-ink: #16211A;
	--p-line: rgba(22, 33, 26, 0.15);
	--p-line-strong: rgba(22, 33, 26, 0.32);

	/* ---- Semantic tokens ---- */
	--color-bg: var(--p-white);
	--color-bg-dim: var(--p-cream);
	--color-ink: var(--p-ink);
	--color-band: var(--p-forest-900);
	--color-band-deep: var(--p-forest-950);
	--color-band-text: #F2F0E9;
	--color-band-line: rgba(242, 240, 233, 0.22);
	--color-accent: var(--p-forest-600);
	--color-accent-dim: #4d6b57;
	--color-action: var(--p-lawn-600);
	--color-action-text: #ffffff;
	--color-caution: var(--p-ochre-700);
	--color-caution-bg: var(--p-ochre-100);
	--color-instrument-bg: #EDEFE9;
	/* A11y fix (a11y/perf audit this session): darkened from #B8874A, which
	   measured 3.06:1 against the near-white --color-bg-dim on the
	   ".label--compare" content-label chip (10.4px mono text) — below the
	   4.5:1 WCAG 2.2 AA minimum for normal-size text. #8a5f2c keeps the same
	   amber hue/identity but reaches ~5.4:1 on that background. */
	--color-data-2: #8a5f2c;

	--hairline: var(--p-line);
	--hairline-strong: var(--p-line-strong);
	/* Form-control boundary: >=3:1 on white/cream (WCAG 1.4.11). The 0.32-alpha
	   hairline measures ~2.0:1 and stays for decorative rules only. */
	--field-border: #767e78;

	/* ---- Type families (see assets/fonts/README.md for self-hosted files) ---- */
	--font-display: "Newsreader", "Source Serif 4", Georgia, serif;
	--font-serif: "Newsreader", "Source Serif 4", Georgia, serif;
	--font-sans: "Instrument Sans", "Hanken Grotesk", -apple-system, sans-serif;
	--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

	/* ---- Type scale (fluid) ---- */
	--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	--step-2: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
	--step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.6rem);
	--step-4: clamp(2.4rem, 1.9rem + 2.5vw, 3.6rem);
	--step-5: clamp(2.8rem, 2rem + 4.5vw, 5.2rem);

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	--measure: 68ch;
	--container: 1240px;
	--radius: 2px;

	/*
	 * The real rendered height of
	 * `.site-header` (layout.css) on a non-hero/sticky page — measured ~68px
	 * at both mobile (390px) and desktop (1440px), since `.site-header__bar`'s
	 * padding-block (--sp-4) doesn't change across breakpoints and the nav
	 * dropdown/desktop menu never adds to the header's own box height (the
	 * mobile panel is an absolutely-positioned overlay, not in-flow). One
	 * value covers every breakpoint; `.site-header__bar` sets `min-height`
	 * from this token (below) so the two can never drift apart again.
	 */
	--header-h: 68px;

	/*
	 * `--color-band` vs `--color-band-deep`: both are
	 * intentional, not an inconsistency. `--color-band-deep` (near-black
	 * forest-950) is for full-bleed dark SURFACES — the site header/nav panel,
	 * footer, and any hero/intro band a whole section sits inside
	 * (.photo-hero, .article-hero, .diagnos-band). `--color-band` (lighter
	 * forest-900) is for small dark ELEMENTS embedded inside an otherwise
	 * light page — step-list numerals, the redaktionsruta mark, the
	 * tool-cta callout, the current month chip in the calendar strip. Rule:
	 * band-deep for a section's own background, band for a dark accent living
	 * on a light background.
	 */
}

/* ==========================================================================
   Self-hosted fonts.
   All @font-face files below are downloaded and present in assets/fonts/
   (see assets/fonts/README.md) — the fallback chain (Georgia / system sans /
   monospace) is only a defensive net for a file ever going missing later
   (e.g. a manual deploy step drops one), not the current state.
   ========================================================================== */

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-variable-latin.woff2") format("woff2-variations"),
		url("../fonts/newsreader-variable-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-italic-variable-latin.woff2") format("woff2-variations"),
		url("../fonts/newsreader-italic-variable-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-variable-latin-ext.woff2") format("woff2-variations"),
		url("../fonts/newsreader-variable-latin-ext.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-latin-ext-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}