/*
VARZ Autumn - a warm theme for the VARZ CSS framework (https://varz.dev)

Load after varz.css - it includes the whole VARZ design token set (varz-tokens.css) with autumn
values, so varz-tokens.css is not needed:
  <link rel="stylesheet" href="https://cdn.varz.dev/vz/css/min/varz.css">
  <link rel="stylesheet" href="https://fonts.bunny.net/css?family=fraunces:400,400i,600,700|nunito-sans:400,600,700&display=swap">
  <link rel="stylesheet" href="varz-autumn.css">

It only sets CSS variables (the framework colors --vz-c-* and the design tokens --vz-*) plus a few
low-specificity base rules (plain element selectors) - your inline VARZ styles always win.
Light and dark: follows the system setting; <html data-theme="light|dark"> forces one.
Every text color meets WCAG AA (4.5:1) on the page, section and card backgrounds, in both schemes.
*/

:root {
	color-scheme: light;

	/* ---------- framework colors ---------- */
	--vz-c-white: #fff;
	--vz-c-black: #1f130b;
	--vz-c-accent: #b8430f;   /* burnt orange - buttons, active states */
	--vz-c-accent2: #8f2d14;  /* deep rust - hover */

	--vz-c-light: #fffaf3;    /* page: warm cream */
	--vz-c-dark: #3b2416;     /* headings: espresso */
	--vz-c-font: #5a4334;     /* text: walnut */
	--vz-c-muted: #7d6352;    /* secondary text */
	--vz-c-bg: #f7ecdd;       /* alternate sections: parchment */
	--vz-c-border: #e8d5bf;

	/* ---------- autumn extras ---------- */
	--vz-c-card: #fff;
	--vz-c-link: #a83a0c;
	--vz-c-link-hov: #7a2a09;
	--vz-c-amber: #d98a1c;    /* decoration only - not for text */
	--vz-c-maple: #b42318;
	--vz-c-olive: #6b7a2a;
	--vz-c-plum: #7c2d4e;
	--vz-c-dusk: #2f5d62;

	/* alerts: text / background / border */
	--vz-alert-success-c: #4d5a14;
	--vz-alert-success-bgc: #eef0d8;
	--vz-alert-success-bc: #c9d08f;
	--vz-alert-warning-c: #7a4a05;
	--vz-alert-warning-bgc: #fbecc8;
	--vz-alert-warning-bc: #efc56b;
	--vz-alert-danger-c: #8f1d14;
	--vz-alert-danger-bgc: #f9dcd5;
	--vz-alert-danger-bc: #eba293;
	--vz-alert-info-c: #24494d;
	--vz-alert-info-bgc: #dcebe9;
	--vz-alert-info-bc: #9cc6c1;

	/* ---------- fonts (Bunny Fonts - privacy friendly, GDPR compliant) ---------- */
	--vz-ff-body: 'Nunito Sans', system-ui, sans-serif;
	--vz-ff-heading: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* ==========================================================================================
	   design tokens: the full VARZ set (varz-tokens.css) with autumn values - load no other file
	   ========================================================================================== */
	/* ---------- tokens: scales (numbered: letter suffixes are VARZ breakpoints -g -x -l -m -s) ---------- */
	--vz-space-1: 4px;
	--vz-space-2: 8px;
	--vz-space-3: 16px;
	--vz-space-4: 24px;
	--vz-space-5: 40px;
	--vz-space-6: 64px;

	--vz-radius-1: 8px;
	--vz-radius-2: 14px;
	--vz-radius-3: 24px;
	--vz-radius-full: 999px;

	--vz-fs-1: 12px;
	--vz-fs-2: 14px;
	--vz-fs-3: 16px;
	--vz-fs-4: 20px;
	--vz-fs-5: 24px;
	--vz-fs-6: 32px;
	--vz-fs-7: 48px;

	--vz-shadow-1: 0 1px 3px rgba(91, 46, 18, .10);
	--vz-shadow-2: 0 10px 28px -6px rgba(91, 46, 18, .20);
	--vz-shadow-3: 0 24px 60px -12px rgba(91, 46, 18, .28);

	--vz-transition: all .2s ease;

	/* ---------- tokens: layout ---------- */
	--vz-container-maw: 1200px;
	--vz-container-p: 0 20px;
	--vz-section-p: 80px 0;

	/* ---------- tokens: button: primary ---------- */
	--vz-btn-d: inline-flex;
	--vz-btn-ai: center;
	--vz-btn-jc: center;
	--vz-btn-g: var(--vz-space-2);
	--vz-btn-p: 12px 26px;
	--vz-btn-fs: var(--vz-fs-3);
	--vz-btn-fw: 600;
	--vz-btn-lh: 1.25;
	--vz-btn-td: none;
	--vz-btn-br: var(--vz-radius-full);
	--vz-btn-bw: 2px;
	--vz-btn-bs: solid;
	--vz-btn-bc: var(--vz-c-accent);
	--vz-btn-bgc: var(--vz-c-accent);
	--vz-btn-c: var(--vz-c-white);
	--vz-btn-bsh: 0 4px 14px -4px rgba(184, 67, 15, .45);
	--vz-btn-tr: var(--vz-transition);
	--vz-btn-hov-bc: var(--vz-c-accent2);
	--vz-btn-hov-bgc: var(--vz-c-accent2);
	--vz-btn-hov-c: var(--vz-c-white);

	/* button: outline */
	--vz-btn-outline-bc: var(--vz-c-accent);
	--vz-btn-outline-bgc: transparent;
	--vz-btn-outline-c: var(--vz-c-accent);
	--vz-btn-outline-hov-bc: var(--vz-c-accent);
	--vz-btn-outline-hov-bgc: var(--vz-c-accent);
	--vz-btn-outline-hov-c: var(--vz-c-white);

	/* button: secondary */
	--vz-btn-secondary-bc: var(--vz-c-border);
	--vz-btn-secondary-bgc: var(--vz-c-card);
	--vz-btn-secondary-c: var(--vz-c-dark);
	--vz-btn-secondary-hov-bc: var(--vz-c-muted);
	--vz-btn-secondary-hov-bgc: var(--vz-c-border);
	--vz-btn-secondary-hov-c: var(--vz-c-dark);

	/* ---------- tokens: form fields: input, select, textarea ---------- */
	--vz-input-w: 100%;
	--vz-input-mih: 42px;
	--vz-input-p: 8px 12px;
	--vz-input-fs: var(--vz-fs-3);
	--vz-input-br: var(--vz-radius-1);
	--vz-input-bw: 1px;
	--vz-input-bs: solid;
	--vz-input-bc: var(--vz-c-border);
	--vz-input-bgc: var(--vz-c-card);
	--vz-input-c: var(--vz-c-font);
	--vz-input-tr: var(--vz-transition);
	--vz-input-foc-bc: var(--vz-c-accent);
	--vz-input-foc-ol: none;
	--vz-input-foc-bs: 0 0 0 4px rgba(184, 67, 15, .18);

	--vz-label-d: block;
	--vz-label-fs: var(--vz-fs-2);
	--vz-label-fw: 600;
	--vz-label-mbe: 6px;

	/* ---------- tokens: card ---------- */
	--vz-card-d: flex;
	--vz-card-fld: column;
	--vz-card-g: 12px;
	--vz-card-p: var(--vz-space-4);
	--vz-card-br: var(--vz-radius-3);
	--vz-card-bw: 1px;
	--vz-card-bs: solid;
	--vz-card-bc: var(--vz-c-border);
	--vz-card-bgc: var(--vz-c-card);
	--vz-card-bsh: var(--vz-shadow-1);
	--vz-card-tr: var(--vz-transition);
	--vz-card-hov-bs: var(--vz-shadow-2);

	/* subtle paper grain for backgrounds: --bgi:var(--vz-texture) */
	--vz-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* responsive tokens (from varz-tokens.css): elements need no breakpoint props of their own */
@media (max-width: 767px) {
	:root {
		--vz-section-p: 60px 0;
		--vz-card-p: var(--vz-space-3);
	}
}

@media (max-width: 575px) {
	:root {
		--vz-container-p: 0 16px;
		--vz-section-p: 40px 0;
		--vz-btn-p: 10px 20px;
	}
}

/* ---------- dark: an evening by the fire ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--vz-c-black: #120b06;
		--vz-c-accent: #f08a3c;
		--vz-c-accent2: #f6b26b;
		--vz-c-light: #1c130d;
		--vz-c-dark: #fbeedc;
		--vz-c-font: #ead8c3;
		--vz-c-muted: #bfa58e;
		--vz-c-bg: #261a12;
		--vz-c-border: #4a3527;
		--vz-c-card: #2b1e15;
		--vz-c-link: #f59e5b;
		--vz-c-link-hov: #fbc48f;
		--vz-alert-success-c: #cdd88f;
		--vz-alert-success-bgc: #2a2a14;
		--vz-alert-success-bc: #545a26;
		--vz-alert-warning-c: #f6c76b;
		--vz-alert-warning-bgc: #33240e;
		--vz-alert-warning-bc: #6b4a17;
		--vz-alert-danger-c: #f4a294;
		--vz-alert-danger-bgc: #3a1813;
		--vz-alert-danger-bc: #6e2c22;
		--vz-alert-info-c: #9fcfcb;
		--vz-alert-info-bgc: #142a2b;
		--vz-alert-info-bc: #2b5254;
		/* light text on the orange buttons would be too weak - dark text instead */
		--vz-btn-c: #1c130d;
		--vz-btn-hov-c: #1c130d;
		--vz-btn-outline-hov-c: #1c130d;
		--vz-btn-bsh: 0 4px 16px -4px rgba(240, 138, 60, .35);
		--vz-input-foc-bs: 0 0 0 4px rgba(240, 138, 60, .25);
		--vz-shadow-1: 0 1px 3px rgba(0, 0, 0, .4);
		--vz-shadow-2: 0 10px 28px -6px rgba(0, 0, 0, .55);
		--vz-shadow-3: 0 24px 60px -12px rgba(0, 0, 0, .65);
		--vz-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	}
}

/* the same dark values when chosen with the switch: <html data-theme="dark"> */
:root[data-theme="dark"] {
	color-scheme: dark;
	--vz-c-black: #120b06;
	--vz-c-accent: #f08a3c;
	--vz-c-accent2: #f6b26b;
	--vz-c-light: #1c130d;
	--vz-c-dark: #fbeedc;
	--vz-c-font: #ead8c3;
	--vz-c-muted: #bfa58e;
	--vz-c-bg: #261a12;
	--vz-c-border: #4a3527;
	--vz-c-card: #2b1e15;
	--vz-c-link: #f59e5b;
	--vz-c-link-hov: #fbc48f;
	--vz-alert-success-c: #cdd88f;
	--vz-alert-success-bgc: #2a2a14;
	--vz-alert-success-bc: #545a26;
	--vz-alert-warning-c: #f6c76b;
	--vz-alert-warning-bgc: #33240e;
	--vz-alert-warning-bc: #6b4a17;
	--vz-alert-danger-c: #f4a294;
	--vz-alert-danger-bgc: #3a1813;
	--vz-alert-danger-bc: #6e2c22;
	--vz-alert-info-c: #9fcfcb;
	--vz-alert-info-bgc: #142a2b;
	--vz-alert-info-bc: #2b5254;
	--vz-btn-c: #1c130d;
	--vz-btn-hov-c: #1c130d;
	--vz-btn-outline-hov-c: #1c130d;
	--vz-btn-bsh: 0 4px 16px -4px rgba(240, 138, 60, .35);
	--vz-input-foc-bs: 0 0 0 4px rgba(240, 138, 60, .25);
	--vz-shadow-1: 0 1px 3px rgba(0, 0, 0, .4);
	--vz-shadow-2: 0 10px 28px -6px rgba(0, 0, 0, .55);
	--vz-shadow-3: 0 24px 60px -12px rgba(0, 0, 0, .65);
	--vz-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base: element selectors (they follow varz.css), inline VARZ styles still win ---------- */
body {
	background-color: var(--vz-c-light);
	color: var(--vz-c-font);
	font-family: var(--vz-ff-body);
	accent-color: var(--vz-c-accent);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--vz-ff-heading);
	color: var(--vz-c-dark);
	font-weight: 600;
	letter-spacing: -.01em;
}
:where(p a, li a, figcaption a) {
	color: var(--vz-c-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:where(p a, li a, figcaption a):hover {
	color: var(--vz-c-link-hov);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--vz-c-accent);
	outline-offset: 2px;
}
::selection {
	background: var(--vz-c-amber);
	color: var(--vz-c-black);
}