/*
 * AUTOOL design tokens — derived 1:1 from the Dongchedi reference
 * (autoGenFile/dongchedi/STYLE_IMPLEMENTATION_GUIDE.md + live snapshot CSS).
 *
 * Loaded after Blocksy's own stylesheet + Customizer-generated inline CSS
 * (see functions.php, priority 20) so these values win the cascade without
 * needing !important. Radius scale intentionally stays 2/4px: this matches
 * both Dongchedi's own tokens AND the site's prior "flat, technical, no
 * pill shapes" rule, so no conflict there.
 */

:root {
	/* ---- Core palette (Dongchedi 1:1) ---- */
	--dcd-yellow: #ffcc32;
	--dcd-yellow-light: #ffd861;
	--dcd-yellow-active-gradient: linear-gradient(250deg, #ffd861 -0.65%, #ffcc32);
	--dcd-orange: #e65800;
	--dcd-orange-hover-text: #e55800;
	--dcd-link: #205be6;
	--dcd-green: #00a860;
	--dcd-red: #b02425;

	--dcd-page: #f7f8fc;
	--dcd-page-deep: #f2f4fa;
	--dcd-surface: #ffffff;

	--dcd-text: #1f2129;
	--dcd-text-secondary: #606370;
	--dcd-text-muted: #979aa8;

	--dcd-border: #e6e8f2;
	--dcd-border-strong: #c9cbd6;

	--dcd-radius-sm: 2px;
	--dcd-radius-md: 4px;

	--dcd-hover-tint: rgba(255, 204, 50, 0.12);

	/* ---- Spacing scale (Dongchedi's observed non-uniform steps) ---- */
	--dcd-space-1: 2px;
	--dcd-space-2: 4px;
	--dcd-space-3: 6px;
	--dcd-space-4: 8px;
	--dcd-space-5: 10px;
	--dcd-space-6: 12px;
	--dcd-space-7: 16px;
	--dcd-space-8: 20px;
	--dcd-space-9: 24px;
	--dcd-space-10: 30px;
	--dcd-space-11: 32px;
	--dcd-space-12: 40px;
	--dcd-space-13: 56px;
	--dcd-space-14: 64px;
	--dcd-space-15: 78px;
	--dcd-space-16: 80px;
	--dcd-content-gutter: 4%;

	/* ---- App-shell geometry (read by the shell plugin too) ---- */
	--shell-header-h: 56px;
	--shell-nav-w-compact: 82px;
	--shell-nav-w-expanded: 160px;
	--shell-content-offset: 88px; /* left padding of page content below 1680px */

	/* ---- Type scale ---- */
	--dcd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial,
		sans-serif;

	--dcd-fs-body: 14px;
	--dcd-lh-body: 1.5;
	--dcd-fs-card-title: 16px;
	--dcd-lh-card-title: 22px;
	--dcd-fs-meta: 14px;
	--dcd-lh-meta: 20px;
	--dcd-fs-module-title: 16px;
	--dcd-lh-module-title: 28px;
	--dcd-fs-floor-title: 20px;

	/* z-index bands, preserved from the reference */
	--dcd-z-header: 9999;
	--dcd-z-sidenav: 1999;
	--dcd-z-floor-nav: 100;
	--dcd-z-tooltip: 20;
}

/* Deliberate deviation from a literal 1:1 copy: OBD2SCAN's long-form repair
   and diagnostic articles are safety-relevant technical reading, so body
   copy keeps a larger, more legible size than Dongchedi's own 14px feed
   density. Chrome/UI text (nav, cards, meta) still uses the Dongchedi scale
   above; only the long-form reading column is widened here. */
:root {
	--dcd-fs-article-body: 17px;
	--dcd-lh-article-body: 1.7;
}

@media (max-width: 767px) {
	:root {
		--dcd-fs-article-body: 16px;
		--dcd-lh-article-body: 1.65;
	}
}

/* ---------------------------------------------------------------------- */
/* Map tokens onto Blocksy's own CSS custom properties so native Blocksy-  */
/* rendered elements (buttons, links, headings, forms) inherit the same   */
/* look without needing per-component overrides.                          */
/* ---------------------------------------------------------------------- */

:root {
	--theme-font-family: var(--dcd-font-family);
	--theme-font-stack-default: var(--dcd-font-family);
	--theme-form-font-family: var(--dcd-font-family);
	--theme-button-font-family: var(--dcd-font-family);

	--theme-text-color: var(--dcd-text);
	--theme-heading-color: var(--dcd-text);
	--theme-headings-color: var(--dcd-text);
	--theme-heading-1-color: var(--dcd-text);
	--theme-heading-2-color: var(--dcd-text);
	--theme-heading-3-color: var(--dcd-text);
	--theme-heading-4-color: var(--dcd-text);
	--theme-heading-5-color: var(--dcd-text);
	--theme-heading-6-color: var(--dcd-text);

	--theme-link-initial-color: var(--dcd-link);
	--theme-link-hover-color: var(--dcd-orange);
	--theme-link-active-color: var(--dcd-orange);

	--theme-border-color: var(--dcd-border);
	--theme-border-radius: var(--dcd-radius-md);
	--theme-boxed-content-border-radius: var(--dcd-radius-md);

	--theme-button-background-initial-color: var(--dcd-yellow);
	--theme-button-background-hover-color: var(--dcd-orange);
	--theme-button-text-initial-color: var(--dcd-text);
	--theme-button-text-hover-color: #ffffff;
	--theme-button-border-radius: var(--dcd-radius-md);
	--theme-button-font-weight: 500;
}

body {
	background-color: var(--dcd-page);
}