/**
 * DN AGRAR Timelines — Design tokens.
 *
 * Brand palette aligned to dn-agrar.eu:
 *   Orange (dark)  #d77b1a
 *   Green dark     #1c5332
 *   Green          #107701
 *   Light green    #7bb100
 *   Light lime     #d5ed9f
 *   Gold           #f2cf42
 *
 * Typography:
 *   Headings → Lexend
 *   Body     → Karla
 *
 * Scoped under .dn-tl to avoid bleeding into the host theme.
 */

.dn-tl {
	/* Greens */
	--dn-tl-green-900: #0f3a22;
	--dn-tl-green-800: #1c5332; /* brand dark green */
	--dn-tl-green-700: #107701; /* brand green */
	--dn-tl-green-600: #3a8f1a;
	--dn-tl-green-500: #7bb100; /* brand light green */
	--dn-tl-green-300: #c4e07d;
	--dn-tl-green-200: #d5ed9f; /* brand lime */
	--dn-tl-green-100: #e8f3d6;
	--dn-tl-green-50:  #f3f8e6;

	/* Orange */
	--dn-tl-orange-700: #b3651a;
	--dn-tl-orange-600: #d77b1a; /* brand orange */
	--dn-tl-orange-500: #e89538;
	--dn-tl-orange-200: #f8d3a8;
	--dn-tl-orange-100: #fbecdb;

	/* Gold */
	--dn-tl-gold-500:  #f2cf42; /* brand gold */
	--dn-tl-gold-100:  #fcf3c7;

	/* Grays */
	--dn-tl-gray-950: #0f1419;
	--dn-tl-gray-900: #1a2030;
	--dn-tl-gray-800: #2a3245;
	--dn-tl-gray-700: #3d4659;
	--dn-tl-gray-600: #5b6478;
	--dn-tl-gray-500: #7d8696;
	--dn-tl-gray-400: #a6acba;
	--dn-tl-gray-300: #c8cdd6;
	--dn-tl-gray-200: #e1e4ea;
	--dn-tl-gray-100: #eef0f4;
	--dn-tl-gray-50:  #f8fafc;
	--dn-tl-white:    #ffffff;

	/* Surfaces */
	--dn-tl-surface:      var(--dn-tl-white);
	--dn-tl-surface-soft: #fafaf6;
	--dn-tl-text:         #1a2433;
	--dn-tl-text-soft:    #5c6674;
	--dn-tl-text-muted:   #8a93a1;
	--dn-tl-border:       #e8e6dc;
	--dn-tl-border-soft:  #f0eee4;

	/* Radii */
	--dn-tl-radius-sm: 8px;
	--dn-tl-radius-md: 14px;
	--dn-tl-radius-lg: 18px;
	--dn-tl-radius-xl: 26px;

	/* Shadows */
	--dn-tl-shadow-sm: 0 1px 2px rgba(28,83,50,.05), 0 1px 3px rgba(28,83,50,.04);
	--dn-tl-shadow-md: 0 4px 14px rgba(28,83,50,.08), 0 2px 4px rgba(28,83,50,.04);
	--dn-tl-shadow-lg: 0 14px 40px rgba(28,83,50,.10), 0 4px 12px rgba(28,83,50,.05);
	--dn-tl-shadow-xl: 0 22px 56px rgba(28,83,50,.12);

	/* Transitions */
	--dn-tl-transition: .25s cubic-bezier(.4,0,.2,1);

	/* Fonts */
	--dn-tl-font-heading: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--dn-tl-font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Component-level vars (overridable per category via inline style) */
	--dn-tl-cat-color:    var(--dn-tl-green-700);
	--dn-tl-cat-light-bg: var(--dn-tl-green-100);
	--dn-tl-cat-light-fg: var(--dn-tl-green-800);
}

@media (prefers-reduced-motion: reduce) {
	.dn-tl, .dn-tl * {
		--dn-tl-transition: 0s;
		transition: none !important;
		animation-duration: .001ms !important;
	}
}