/* Design tokens
   ========================================================================== */

:root {
	/* Dark surfaces — charcoal with a subtle brand green undertone */
	--color-black: #0B1009;
	--color-dark: #121810;
	--color-card: #181F18;
	--color-card-hover: #1D251D;
	--color-border: #2A3328;
	--color-accent: #D4FF00;
	--color-accent-hover: #c2eb00;
	--color-white: #F3F2E7;
	--color-gray: #A0A8A0;
	--color-gray-dark: #A8B0A8;
	--color-placeholder: #6B736B;

	/* Translucent surfaces (green-tint bases) */
	--surface-backdrop-strong: color-mix(in srgb, var(--color-dark) 96%, transparent);
	--surface-glass: color-mix(in srgb, var(--card-surface) 92%, transparent);
	--surface-fade-mid: color-mix(in srgb, var(--color-black) 92%, transparent);
	--surface-header: color-mix(in srgb, var(--color-black) 98%, transparent);
	--surface-nav-backdrop: var(--color-black);
	--surface-input: color-mix(in srgb, var(--color-white) 88%, var(--color-card));
	--border-subtle-on-dark: color-mix(in srgb, var(--color-white) 6%, transparent);

	--font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-family-heading: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--container-width: 1200px;
	--container-padding: 24px;
	--header-height: 80px;
	--radius: 6px;
	--radius-lg: 12px;
	--transition: 0.25s ease;

	/* Card surface & hover */
	--card-surface: #222A22;
	--card-hover-lift: -3px;
	--card-hover-border: rgba(212, 255, 0, 0.2);

	--accent-line-width: 48px;
	--accent-line-opacity: 0.65;
	--marker-hex-ratio: 24 / 28;
	--marker-badge-width: 30px;

	/* Focus ring */
	--focus-ring-color: var(--color-accent);
	--focus-ring-width: 2px;
	--focus-ring-offset: 3px;

	/* Section spacing */
	--section-spacing: 80px;
	--section-header-spacing: 48px;
	--page-offset-top: calc(var(--header-height) + var(--section-spacing));

	/* Type scale (1rem = 16px) */
	--font-size-xs: 0.8125rem;   /* 13px — eyebrows, meta */
	--font-size-sm: 0.9375rem;   /* 15px — secondary copy */
	--font-size-base: 1rem;      /* 16px — body */
	--font-size-lg: 1.125rem;    /* 18px — lead / subtitles */
	--font-size-xl: 1.25rem;     /* 20px — card headings */
	--font-size-2xl: 1.375rem;   /* 22px — product titles */
	--font-size-ui: 0.875rem;    /* 14px — buttons, UI labels */
	--line-height-copy: 1.65;
	--line-height-relaxed: 1.7;
}