/**
 * Design tokens for Dierenkompas.
 *
 * Values are lifted verbatim from the design prototype's inline styles
 * (see the handoff). Colours are the source of truth for the whole theme;
 * blocks reference these variables, never raw hex.
 */

:root {
	/* ---- Paper / surfaces ---- */
	--dk-paper: #f7f3ea;          /* body background */
	--dk-paper-light: #fffdf8;    /* cards, header, bottom bar */
	--dk-paper-warm: #fbf8f1;     /* collapsed panels, alt rows */
	--dk-paper-accent: #f0ede4;   /* active/hover surfaces, chips */

	/* ---- Borders ---- */
	--dk-border: #e3dccc;         /* primary borders */
	--dk-border-light: #efeadd;   /* dividers inside cards */
	--dk-border-soft: #d9d3c6;    /* input / pill borders */
	--dk-border-dashed: #ded6c4;  /* dashed ad / callout borders */
	--dk-border-xlight: #c4bca8;  /* breadcrumb separators, avatars */

	/* ---- Ink / text ---- */
	--dk-ink: #1b1a17;            /* headings, dark sections */
	--dk-text: #33302b;           /* body text */
	--dk-text-grey: #55514a;      /* secondary labels */
	--dk-text-muted: #635d52;     /* meta */
	--dk-text-muted-2: #6e6659;   /* softer meta */
	--dk-text-light: #74705f;     /* mono meta, breadcrumb */
	--dk-text-lighter: #8a8377;   /* faint labels */

	/* ---- Green (primary accent) ---- */
	--dk-green: #2f5d45;
	--dk-green-hover: #274e3a;
	--dk-green-light: #edf2ee;    /* active nav / soft panels */
	--dk-green-border: #c6d8cd;
	--dk-green-dark: #1b3527;     /* text on green-light */
	--dk-green-muted: #46604f;
	--dk-green-muted-2: #5a7a66;

	/* ---- Ocher (secondary accent) ---- */
	--dk-ocher: #c79a3e;
	--dk-ocher-bright: #e4b75f;   /* on dark surfaces */

	/* ---- Dark section helpers ---- */
	--dk-dark-bg: #1b1a17;
	--dk-dark-border: #3a3833;
	--dk-dark-text: #e9e4db;
	--dk-dark-text-soft: #b7b1a5;

	/* ---- Hatch (image placeholder) ---- */
	--dk-hatch-a: #efe8d8;
	--dk-hatch-b: #e7dfcc;
	--dk-hatch-ad-a: #f3efe5;
	--dk-hatch-ad-b: #efeadd;

	/* ---- Typography ---- */
	--dk-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--dk-font-sans: "Archivo", Helvetica, system-ui, sans-serif;
	--dk-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

	--dk-meta-size: 10.5px;
	--dk-meta-tracking: 0.16em;

	/* ---- Layout ---- */
	--dk-content-max: 1260px;
	--dk-gutter: 40px;
	--dk-gutter-mobile: 20px;
	--dk-header-h: 130px;         /* approximate sticky header height for sticky offsets */

	/* ---- Radii ---- */
	--dk-radius: 2px;
	--dk-radius-pill: 999px;
	--dk-radius-logo: 30%;
	--dk-paw: 50% 50% 46% 46%;    /* the brand paw-print shape */

	/* ---- Shadows ---- */
	--dk-shadow-bar: 0 -4px 18px rgba(27, 26, 23, 0.07);
	--dk-shadow-panel: 0 -14px 34px rgba(27, 26, 23, 0.16);
	--dk-overlay: rgba(27, 26, 23, 0.42);

	/* ---- Motion ---- */
	--dk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dk-t: 180ms;
}