/* ==========================================================================
   Commodities.tz Network — Design System
   Principles: trust, data, trade, origin, quality. High information density,
   restrained palette, no gradients/pills/unnecessary motion, system fonts
   only (performance + zero external licensing risk).
   ========================================================================== */

:root {
	/* Neutral scale */
	--czn-ink-900: #16201b;
	--czn-ink-700: #33413a;
	--czn-ink-500: #5b6b62;
	--czn-ink-300: #97a69c;
	--czn-ink-100: #e4e9e3;
	--czn-paper: #faf9f5;
	--czn-paper-raised: #ffffff;
	--czn-border: #d8ddd2;

	/* Brand */
	--czn-primary: #0f5132;
	--czn-primary-dark: #0a3a23;
	--czn-primary-tint: #e7f0ea;
	--czn-accent: var(--czn-primary);
	--czn-accent-tint: var(--czn-primary-tint);

	/* Semantic */
	--czn-success: #256d3b;
	--czn-warning: #8a5a00;
	--czn-danger: #9b2c2c;
	--czn-focus: #1c6dd0;

	/* Type */
	--czn-font-serif: Georgia, "Iowan Old Style", Cambria, "Times New Roman", serif;
	--czn-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--czn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Spacing scale (4px base) */
	--czn-space-1: 0.25rem;
	--czn-space-2: 0.5rem;
	--czn-space-3: 0.75rem;
	--czn-space-4: 1rem;
	--czn-space-5: 1.5rem;
	--czn-space-6: 2rem;
	--czn-space-7: 3rem;
	--czn-space-8: 4.5rem;

	--czn-radius: 3px;
	--czn-radius-lg: 6px;
	--czn-shadow: 0 1px 2px rgba(22, 32, 27, 0.06), 0 1px 1px rgba(22, 32, 27, 0.04);
	--czn-shadow-raised: 0 4px 16px rgba(22, 32, 27, 0.10);
	--czn-max-width: 1240px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--czn-ink-900: #eef2ea;
		--czn-ink-700: #cbd6c8;
		--czn-ink-500: #9aab9f;
		--czn-ink-300: #56645b;
		--czn-ink-100: #263229;
		--czn-paper: #131a15;
		--czn-paper-raised: #1a231c;
		--czn-border: #2d3a30;
		--czn-primary: #4bad78;
		--czn-primary-dark: #7ecba0;
		--czn-primary-tint: #1c2e22;
		--czn-accent-tint: #1c2e22;
	}
}

/* Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--czn-paper);
	color: var(--czn-ink-900);
	font-family: var(--czn-font-sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--czn-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside a block of running text must be distinguishable by more than
   color alone (WCAG 1.4.1) — nav/card/button links are exempt since they're
   already structurally distinct as a list/component, not prose. */
p a, li.czn-prose-link a, .czn-prose a, .czn-lede a, .czn-source-note a, .czn-empty-state p a, .czn-network-bar > .czn-container > span:first-child a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
h1, h2, h3, h4 { font-family: var(--czn-font-serif); line-height: 1.2; margin: 0 0 var(--czn-space-4); color: var(--czn-ink-900); font-weight: 600; }
h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--czn-space-4); }
ul, ol { padding-left: 1.25em; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

:focus-visible {
	outline: 3px solid var(--czn-focus);
	outline-offset: 2px;
}

.czn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--czn-primary);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 1000;
}
.czn-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Layout ---------------------------------------------------------------- */
.czn-container {
	max-width: var(--czn-max-width);
	margin: 0 auto;
	padding: 0 var(--czn-space-5);
}
.czn-section { padding: var(--czn-space-7) 0; }
.czn-section-tight { padding: var(--czn-space-6) 0; }
.czn-section-alt { background: var(--czn-paper-raised); border-top: 1px solid var(--czn-border); border-bottom: 1px solid var(--czn-border); }
.czn-grid { display: grid; gap: var(--czn-space-5); }
.czn-grid-2 { grid-template-columns: repeat(2, 1fr); }
.czn-grid-3 { grid-template-columns: repeat(3, 1fr); }
.czn-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .czn-grid-3, .czn-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .czn-grid-2, .czn-grid-3, .czn-grid-4 { grid-template-columns: 1fr; } }

.czn-eyebrow {
	font-family: var(--czn-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--czn-primary);
	font-weight: 600;
	display: block;
	margin-bottom: var(--czn-space-2);
}
.czn-lede { font-size: 1.1rem; color: var(--czn-ink-700); max-width: 62ch; }

/* Header ------------------------------------------------------------- */
.czn-header {
	border-bottom: 1px solid var(--czn-border);
	background: var(--czn-paper-raised);
	position: sticky;
	top: 0;
	z-index: 100;
}
.czn-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--czn-space-5); padding: var(--czn-space-3) 0; }
.czn-network-bar {
	background: var(--czn-primary-dark);
	color: #fff;
	font-size: 0.78rem;
}
.czn-network-bar .czn-container { display: flex; justify-content: space-between; align-items: center; padding-top: var(--czn-space-1); padding-bottom: var(--czn-space-1); gap: var(--czn-space-3); flex-wrap: wrap; }
.czn-network-bar a { color: #fff; opacity: 0.9; }
.czn-network-bar a:hover { opacity: 1; }

.czn-logo { display: flex; align-items: baseline; gap: 0.4em; font-family: var(--czn-font-serif); font-weight: 700; font-size: 1.4rem; color: var(--czn-ink-900); }
.czn-logo .czn-logo-mark { color: var(--czn-accent); }
.czn-logo small { font-family: var(--czn-font-sans); font-weight: 400; font-size: 0.6rem; color: var(--czn-ink-500); letter-spacing: 0.06em; text-transform: uppercase; }

.czn-nav { display: flex; gap: var(--czn-space-5); align-items: center; }
.czn-nav a { color: var(--czn-ink-700); font-size: 0.94rem; font-weight: 500; }
.czn-nav a:hover, .czn-nav a[aria-current="page"] { color: var(--czn-accent); text-decoration: none; }
/* .czn-nav a's specificity (class+element) otherwise beats .czn-btn-primary's
   (class only), silently dropping its white text onto a dark accent
   background — a real WCAG contrast failure caught by axe-core. */
.czn-nav a.czn-btn-primary { color: #fff; }
.czn-nav a.czn-btn-primary:hover { color: #fff; }

.czn-header-actions { display: flex; align-items: center; gap: var(--czn-space-3); }
.czn-nav-toggle { display: none; background: none; border: 1px solid var(--czn-border); border-radius: var(--czn-radius); padding: 0.4em 0.6em; }

@media (max-width: 900px) {
	.czn-nav { position: fixed; inset: 0 0 0 30%; background: var(--czn-paper-raised); flex-direction: column; align-items: flex-start; padding: var(--czn-space-7) var(--czn-space-5); gap: var(--czn-space-4); transform: translateX(100%); transition: transform 0.2s ease; box-shadow: var(--czn-shadow-raised); }
	.czn-nav.is-open { transform: translateX(0); }
	.czn-nav-toggle { display: inline-flex; }
}

/* Buttons -------------------------------------------------------------- */
.czn-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.65em 1.25em;
	border-radius: var(--czn-radius);
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	cursor: pointer;
}
.czn-btn-primary { background: var(--czn-accent); color: #fff; }
.czn-btn-primary:hover { background: var(--czn-primary-dark); text-decoration: none; }
.czn-btn-secondary { background: transparent; color: var(--czn-ink-900); border-color: var(--czn-border); }
.czn-btn-secondary:hover { border-color: var(--czn-accent); color: var(--czn-accent); text-decoration: none; }
.czn-btn-sm { padding: 0.4em 0.9em; font-size: 0.85rem; }

/* Cards ------------------------------------------------------------------ */
.czn-card {
	background: var(--czn-paper-raised);
	border: 1px solid var(--czn-border);
	border-radius: var(--czn-radius-lg);
	padding: var(--czn-space-5);
}
.czn-card-link { display: block; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.czn-card-link:hover { text-decoration: none; border-color: var(--czn-accent); box-shadow: var(--czn-shadow); }

.czn-commodity-card { text-align: left; }
.czn-commodity-card .czn-eyebrow { margin-bottom: var(--czn-space-1); }

/* Badges ------------------------------------------------------------------ */
.czn-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--czn-ink-100);
	color: var(--czn-ink-700);
	white-space: nowrap;
}
.czn-badge-verified { background: var(--czn-primary-tint); color: var(--czn-primary); }
.czn-badge-source_confirmed { background: #eef3fb; color: var(--czn-focus); }
.czn-badge-listed { background: var(--czn-ink-100); color: var(--czn-ink-500); }

/* Forms -------------------------------------------------------------- */
.czn-field { margin-bottom: var(--czn-space-4); }
.czn-field label { display: block; font-weight: 600; margin-bottom: var(--czn-space-1); font-size: 0.92rem; }
.czn-field .czn-hint { font-size: 0.82rem; color: var(--czn-ink-500); margin-top: 0.25em; }
.czn-field input[type="text"], .czn-field input[type="email"], .czn-field input[type="tel"],
.czn-field input[type="number"], .czn-field input[type="date"], .czn-field select, .czn-field textarea {
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--czn-border);
	border-radius: var(--czn-radius);
	background: var(--czn-paper-raised);
	color: var(--czn-ink-900);
}
.czn-field textarea { min-height: 7em; }
.czn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--czn-space-4); }
@media (max-width: 620px) { .czn-form-row { grid-template-columns: 1fr; } }
.czn-hp-field { position: absolute; left: -9999px; opacity: 0; }
.czn-form-message { padding: var(--czn-space-3) var(--czn-space-4); border-radius: var(--czn-radius); margin-bottom: var(--czn-space-4); display: none; }
.czn-form-message.is-visible { display: block; }
.czn-form-message.is-success { background: var(--czn-primary-tint); color: var(--czn-primary-dark); }
.czn-form-message.is-error { background: #fbeaea; color: var(--czn-danger); }

/* Tables ------------------------------------------------------------- */
.czn-table-wrap { overflow-x: auto; border: 1px solid var(--czn-border); border-radius: var(--czn-radius-lg); }
.czn-price-table, .czn-data-table { font-size: 0.92rem; }
.czn-price-table th, .czn-price-table td, .czn-data-table th, .czn-data-table td {
	padding: 0.65em 0.9em;
	text-align: left;
	border-bottom: 1px solid var(--czn-border);
	white-space: nowrap;
}
.czn-price-table thead th, .czn-data-table thead th { background: var(--czn-ink-100); font-family: var(--czn-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.czn-price-table tbody tr:last-child td, .czn-data-table tbody tr:last-child td { border-bottom: none; }

/* Empty / error states -------------------------------------------------- */
.czn-empty-state {
	border: 1px dashed var(--czn-border);
	border-radius: var(--czn-radius-lg);
	padding: var(--czn-space-6);
	text-align: center;
	color: var(--czn-ink-500);
	background: var(--czn-paper-raised);
}
.czn-empty-state h3 { margin-bottom: var(--czn-space-2); }

/* Supplier grid ------------------------------------------------------- */
.czn-supplier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--czn-space-4); }
@media (max-width: 900px) { .czn-supplier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .czn-supplier-grid { grid-template-columns: 1fr; } }
.czn-supplier-card {
	display: flex; justify-content: space-between; align-items: center; gap: var(--czn-space-3);
	padding: var(--czn-space-4); border: 1px solid var(--czn-border); border-radius: var(--czn-radius-lg);
	background: var(--czn-paper-raised); color: var(--czn-ink-900);
}
.czn-supplier-card:hover { border-color: var(--czn-accent); text-decoration: none; }

/* Breadcrumbs ---------------------------------------------------------- */
.czn-breadcrumbs { font-size: 0.85rem; color: var(--czn-ink-500); margin-bottom: var(--czn-space-4); }
.czn-breadcrumbs a { color: var(--czn-ink-500); }
.czn-breadcrumbs a:hover { color: var(--czn-accent); }

/* Hero ------------------------------------------------------------------- */
.czn-hero { padding: var(--czn-space-8) 0 var(--czn-space-7); }
.czn-hero h1 { max-width: 18ch; }
.czn-hero-actions { display: flex; gap: var(--czn-space-3); margin-top: var(--czn-space-5); flex-wrap: wrap; }
.czn-hero-stats { display: flex; gap: var(--czn-space-6); margin-top: var(--czn-space-6); flex-wrap: wrap; }
.czn-hero-stat strong { display: block; font-family: var(--czn-font-serif); font-size: 1.6rem; color: var(--czn-primary); }
.czn-hero-stat span { font-size: 0.82rem; color: var(--czn-ink-500); }

/* Footer ----------------------------------------------------------------- */
.czn-footer { background: var(--czn-ink-900); color: var(--czn-ink-100); padding: var(--czn-space-7) 0 var(--czn-space-5); margin-top: var(--czn-space-8); }
.czn-footer a { color: #fff; opacity: 0.85; }
.czn-footer a:hover { opacity: 1; }
.czn-footer h4 { color: #fff; font-family: var(--czn-font-sans); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--czn-space-3); }
.czn-footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--czn-space-5); }
@media (max-width: 900px) { .czn-footer-grid { grid-template-columns: repeat(2, 1fr); } }
.czn-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--czn-space-2); font-size: 0.9rem; }
.czn-footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: var(--czn-space-6); padding-top: var(--czn-space-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--czn-space-3); font-size: 0.82rem; opacity: 0.75; }
.czn-network-links { display: flex; flex-wrap: wrap; gap: var(--czn-space-3); font-size: 0.82rem; }

/* Source citation ------------------------------------------------------- */
.czn-source-note { font-size: 0.82rem; color: var(--czn-ink-500); border-left: 3px solid var(--czn-border); padding-left: var(--czn-space-3); margin: var(--czn-space-5) 0; }
.czn-source-note a { color: var(--czn-ink-500); text-decoration: underline; }

/* Utility --------------------------------------------------------------- */
.czn-mt-0 { margin-top: 0; }
.czn-text-center { text-align: center; }
.czn-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }