/**
 * Foxfire Peptides — Design Tokens
 *
 * Client-approved Foxfire palette and accessible semantic roles.
 *
 * Font choice per DESIGN.md §4:
 * - Headings: DM Sans (geometric grotesque, modern/professional)
 * - Body: Source Sans 3 (high on-screen legibility)
 */

:root {
	/* Foxfire brand palette. */
	--color-brand-orange: #ff5800;
	--color-brand-green: #aff769;
	--color-brand-black: #151719;
	--color-on-brand: #151719;
	--color-brand-warm-white: #fafaf7;
	--color-brand-green-tint: #f4fbea;
	--color-brand-neutral: #f3f4f2;
	--color-brand-neutral-soft: #f3f4f2;
	/* --- Color: backgrounds & text --- */
	--color-bg: var(--color-brand-warm-white);
	--color-bg-subtle: var(--color-brand-neutral);
	--color-text: var(--color-brand-black);
	--color-text-muted: #4a4a4a;
	--color-text-inverse: #ffffff;

	/* Orange remains the primary action color. */
	--color-accent-primary: var(--color-brand-orange);
	--color-accent-primary-hover: #e94f00;
	--color-accent-primary-active: #d74800;

	/* Use dark green text on the lime trust surface for readability. */
	--color-accent-secondary: #28540e;
	--color-accent-secondary-bg: var(--color-brand-green);

	/* Charcoal — structure, footer, strong sections */
	--color-structure: var(--color-brand-black);
	--color-structure-muted: #424541;

	--color-border: #dfe2dc;
	--color-border-subtle: #e9ece6;
	--color-border-strong: #bdc2b8;

	/* Semantic */
	--color-success: var(--color-accent-secondary);
	--color-error: #b42318;
	--color-error-bg: #fef3f2;
	--color-warning: #b54708;
	--color-warning-bg: #fffaeb;
	--color-info: #175cd3;
	--color-info-bg: #eff8ff;

	/* --- Typography --- */
	--font-heading: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

	--font-size-base: 1rem;          /* 16px — non-negotiable minimum per DESIGN.md §4 */
	--font-size-sm: 0.9375rem;       /* 15px — only for meta/captions, use sparingly */
	--font-size-lg: 1.125rem;        /* 18px */
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.5rem;

	--font-weight-normal: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-body: 1.6;
	--line-height-heading: 1.25;
	--line-height-tight: 1.35;

	/* --- Spacing (4/8px scale) --- */
	--space-1: 0.25rem;   /* 4px */
	--space-2: 0.5rem;    /* 8px */
	--space-3: 1rem;      /* 16px */
	--space-4: 1.5rem;    /* 24px */
	--space-5: 2rem;      /* 32px */
	--space-6: 3rem;      /* 48px */
	--space-7: 4rem;      /* 64px */
	--space-8: 5rem;      /* 80px */
	--space-9: 6rem;      /* 96px */

	--content-max-width: 72rem;      /* 1152px — avoids full-bleed chaos */

	/* --- Components --- */
	--radius-sm: 4px;
	--radius-md: 6px;                /* moderate — DESIGN.md §13 */
	--radius-lg: 8px;

	--size-touch-min: 44px;          /* DESIGN.md §13 / §14 */
	--input-height: 3rem;            /* 48px — generous field height */
	--header-height: 72px;           /* Sticky site header height on desktop */

	--shadow-none: none;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);

	--focus-ring: 0 0 0 3px rgba(255, 88, 0, 0.28);

	--transition-fast: 150ms ease;
}