/**
 * Free Style 3 — Design Tokens
 *
 * THE single source of truth for color, type, spacing, radius, elevation.
 * This is the ONLY stylesheet allowed to contain raw color values.
 * Rules: docs/02-THEMING.md
 */

:root {
	/* ---- Brand greens (logo green #2CC64D) ---- */
	--fsp-green-50:  #EFFBF1;
	--fsp-green-100: #D7F5DE;
	--fsp-green-300: #7EE297;
	--fsp-green-500: #2CC64D; /* Logo green */
	--fsp-green-600: #22A83F;
	--fsp-green-700: #1B8632;
	--fsp-green-900: #0E4A1C;

	/* ---- Ink neutrals ---- */
	--fsp-ink-900: #131A16;
	--fsp-ink-700: #33403A;
	--fsp-ink-500: #5C6B63;
	--fsp-ink-300: #9FAFA6;
	--fsp-ink-150: #DCE4E0;
	--fsp-ink-075: #EFF3F1;

	/* ---- Surfaces ---- */
	--fsp-surface:      #FFFFFF;
	--fsp-surface-soft: #F7FAF8;

	/* ---- Feedback ---- */
	--fsp-info:    #2478C8;
	--fsp-warning: #E8A13C;
	--fsp-danger:  #D64545;
	--fsp-success: var(--fsp-green-600);

	/* ---- Semantic aliases (use these in components) ---- */
	--fsp-primary:        var(--fsp-green-500);
	--fsp-primary-hover:  var(--fsp-green-600);
	--fsp-primary-active: var(--fsp-green-700);
	--fsp-on-primary:     #FFFFFF;
	--fsp-link:           var(--fsp-green-700);
	--fsp-focus-ring:     var(--fsp-green-600);
	--fsp-text:           var(--fsp-ink-700);
	--fsp-text-soft:      var(--fsp-ink-500);
	--fsp-heading:        var(--fsp-ink-900);
	--fsp-border:         var(--fsp-ink-150);
	--fsp-bg:             var(--fsp-surface-soft);

	/* ---- Typography ---- */
	--fsp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--fsp-font-display: var(--fsp-font-sans);

	--fsp-text-xs:  0.75rem;
	--fsp-text-sm:  0.875rem;
	--fsp-text-md:  1rem;
	--fsp-text-lg:  1.125rem;
	--fsp-text-xl:  clamp(1.25rem, 2vw, 1.5rem);
	--fsp-text-2xl: clamp(1.5rem, 3vw, 2rem);
	--fsp-text-3xl: clamp(1.9rem, 4vw, 2.6rem);
	--fsp-text-4xl: clamp(2.3rem, 5vw, 3.4rem);

	--fsp-leading-tight: 1.15;
	--fsp-leading-body:  1.6;

	/* ---- Spacing ---- */
	--fsp-space-1:  0.25rem;
	--fsp-space-2:  0.5rem;
	--fsp-space-3:  0.75rem;
	--fsp-space-4:  1rem;
	--fsp-space-6:  1.5rem;
	--fsp-space-8:  2rem;
	--fsp-space-12: 3rem;
	--fsp-space-16: 4rem;
	--fsp-space-20: 5rem;

	/* ---- Radius ---- */
	--fsp-radius-sm:   6px;
	--fsp-radius-md:   10px;
	--fsp-radius-lg:   16px;
	--fsp-radius-pill: 999px;

	/* ---- Elevation ---- */
	--fsp-shadow-sm: 0 1px 2px rgb(19 26 22 / 6%);
	--fsp-shadow-md: 0 4px 14px rgb(19 26 22 / 8%);
	--fsp-shadow-lg: 0 12px 32px rgb(19 26 22 / 12%);
	--fsp-scrim: rgb(19 26 22 / 45%);

	/* ---- Layout ---- */
	--fsp-container:      1240px;
	--fsp-container-wide: 1400px;
	--fsp-container-narrow: 820px;
	--fsp-gutter: clamp(1rem, 4vw, 2rem);

	/* ---- Motion ---- */
	--fsp-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--fsp-dur-fast: 150ms;
	--fsp-dur-med:  250ms;
	--fsp-dur-slow: 400ms;
}