/**
 * Nieuwe Stijl — design tokens.
 *
 * The single source of truth for colour, type and the De Stijl geometry.
 * Loaded on the front end AND inside the block editor, so the two can never
 * drift apart. Nothing else in this theme hard-codes a hex value, which means
 * a child theme re-skins the whole site by overriding :root.
 *
 * @package Nieuwe_Stijl
 */

:root {
	/* ---- Core palette (brand sheet: De Stijl primaries) ---- */
	--ns-paper: #FAFAF6;   /* page background                          */
	--ns-ink: #101010;     /* text, every rule and border, footer fill */
	--ns-rood: #D82C20;    /* primary CTA, active nav, Museums         */
	--ns-blauw: #2A4BA8;   /* body links, secondary CTA, Neighbourhoods */
	--ns-geel: #F2C230;    /* highlights, TOC header, newsletter, Eat  */
	--ns-grijs: #33322E;   /* emphasised secondary text                */
	--ns-card: #FFFFFF;    /* card surface                             */

	/*
	 * Muted text. #55534C is 7.4:1 on paper and 7.7:1 on white, so it holds
	 * AA at the 11px meta size the comp uses it at.
	 */
	--ns-muted: #55534C;

	/* Hairline dividers under captions and inside the byline bar. */
	--ns-hairline: #C9C7BE;

	/* Placeholder stripe pair, for image slots with no photograph yet. */
	--ns-stripe-a: #E6E4DC;
	--ns-stripe-b: #F0EEE6;

	/*
	 * Text on the ink footer. Solid values rather than the comp's rgba(),
	 * so the contrast is fixed and does not shift if a background changes:
	 * --ns-on-ink-dim is 7.0:1 on ink, --ns-on-ink-faint 6.0:1.
	 */
	--ns-on-ink: #FAFAF6;
	--ns-on-ink-dim: #9C9C9A;
	--ns-on-ink-faint: #919091;
	--ns-on-ink-rule: rgba(250, 250, 246, 0.2);

	/*
	 * Text on a coloured fill. White on rood is 4.9:1 and on blauw 7.9:1,
	 * both AA. The comp dimmed sublines to 85% white, which drops rood to
	 * 3.9:1 and fails — so sublines on rood and blauw stay full white and
	 * lean on size and weight for hierarchy instead.
	 */
	--ns-on-colour: #FFFFFF;

	/* ---- Type: Archivo only, per the brand sheet ---- */
	--ns-font: "Archivo", "Archivo Expanded", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/*
	 * Every headline size is a clamp() token. A literal 62px display blows
	 * out below 400px; sizes live here so that cannot happen by accident.
	 */
	--ns-size-display: clamp(2.375rem, 1.25rem + 4.4vw, 3.875rem); /* 38 -> 62 */
	--ns-size-h1: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);           /* 32 -> 46 */
	--ns-size-h1-archive: clamp(2.125rem, 1.3rem + 3.2vw, 3.375rem); /* 34 -> 54 */
	--ns-size-h2: clamp(1.5rem, 1.3rem + 0.7vw, 1.6875rem);        /* 24 -> 27 */
	--ns-size-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.1875rem);     /* 18 -> 19 */
	--ns-size-section: clamp(1.375rem, 1.15rem + 0.9vw, 1.625rem); /* 22 -> 26 */
	--ns-size-body: 1.0625rem;   /* 17px — holds at every width, per the comp */
	--ns-size-dek: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);   /* 16 -> 18 */
	--ns-size-ui: 0.8125rem;     /* 13px */
	--ns-size-label: 0.75rem;    /* 12px */
	--ns-size-tag: 0.625rem;     /* 10px */
	--ns-size-meta: 0.6875rem;   /* 11px */

	--ns-track-caps: 0.08em;
	--ns-track-wide: 0.1em;
	--ns-track-name: 0.06em;
	--ns-track-tight: -0.01em;

	/* ---- De Stijl geometry ---- */
	--ns-rule: 3px;        /* frames and major section rules  */
	--ns-border: 2px;      /* cards and components            */
	--ns-gap: 3px;         /* the black line between grid cells */
	--ns-shadow: 8px 8px 0 var(--ns-ink);
	--ns-shadow-hover: 10px 10px 0 var(--ns-ink);
	--ns-shadow-mobile: 6px 6px 0 var(--ns-ink);
	--ns-lift: translate(-2px, -2px);
	--ns-ease: 120ms linear;

	/* ---- Layout ---- */
	--ns-wide: 1288px;   /* content inside the 1360px frame */
	--ns-body: 720px;    /* article measure, roughly 62ch   */
	--ns-toc: 250px;
	--ns-article-gap: 44px;
	--ns-gutter: clamp(1.125rem, 0.5rem + 2vw, 2.25rem); /* 18 -> 36 */

	/* Offset for the sticky contents rail; theme.js adds the header height. */
	--ns-sticky-top: 20px;

	/* The 45-degree mat that stands in for a missing photograph. */
	--ns-stripes: repeating-linear-gradient(45deg, var(--ns-stripe-a) 0 12px, var(--ns-stripe-b) 12px 24px);
}

/*
 * Category colour resolution. Templates print a `ns-c-{key}` class and read
 * --ns-accent / --ns-accent-text from it, so one rule set covers the chip
 * square, the pillar tile, the archive stat cell and the byline avatar.
 *
 * --ns-accent-text is the colour that is legible ON the accent: white on
 * rood, blauw and ink; ink on geel, whose 11.4:1 against black is the whole
 * reason yellow reads as a highlight in this palette.
 *
 * --ns-panel-* is the same idea for a large cell sitting inside a black-gap
 * grid. It differs from --ns-accent only for the ink category: a solid black
 * panel touching black 3px gaps has no edges left, so the ink pillar takes
 * the paper fill the comp draws it with and lets the gaps do the dividing.
 */
.ns-c-blauw {
	--ns-accent: var(--ns-blauw);
	--ns-accent-text: var(--ns-on-colour);
	--ns-panel-bg: var(--ns-blauw);
	--ns-panel-text: var(--ns-on-colour);
	--ns-panel-sub: var(--ns-on-colour);
}

.ns-c-rood {
	--ns-accent: var(--ns-rood);
	--ns-accent-text: var(--ns-on-colour);
	--ns-panel-bg: var(--ns-rood);
	--ns-panel-text: var(--ns-on-colour);
	--ns-panel-sub: var(--ns-on-colour);
}

.ns-c-geel {
	--ns-accent: var(--ns-geel);
	--ns-accent-text: var(--ns-ink);
	--ns-panel-bg: var(--ns-geel);
	--ns-panel-text: var(--ns-ink);
	--ns-panel-sub: var(--ns-grijs);
}

.ns-c-ink {
	--ns-accent: var(--ns-ink);
	--ns-accent-text: var(--ns-on-colour);
	--ns-panel-bg: var(--ns-paper);
	--ns-panel-text: var(--ns-ink);
	--ns-panel-sub: var(--ns-muted);
}