/**
 * Testiva design tokens — extracted from Figma (canvas 1920px, container 1320px).
 * Single source of truth: sections consume these custom properties only.
 */

:root {
	/* ---- Color ---- */
	--color-primary:          #00529C; /* brand blue — headings, buttons, sections */
	--color-primary-alt:      #005CA8; /* badge text variant */
	--color-text-primary:     #111111; /* Figma var "Text Primary" */
	--color-text-body:        #414141; /* hero headline, body on light */
	--color-text-body-2:      #424242; /* nav links */
	--color-text-dark:        #0E0E0E; /* testimonial quote */
	--color-text-secondary:   #5C6368; /* Figma var "Text Secondary" — meta text */
	--color-text-secondary-2: #A4AEB5; /* Figma var "Text Secondary 2" */
	--color-text-muted:       rgba(0, 0, 0, 0.5); /* stat labels */
	--color-line:             #E4E4E4; /* Figma var "Line" — dividers, image placeholders */
	--color-border:           #BCBCBC; /* pill button borders */
	--color-tag-pink:         #FCDDDD; /* "Issues with Traditional QA" pills */
	--color-surface-beige:    #F3F1EF; /* testimonial quote card */
	--color-surface-dark:     #1D2720; /* hero overlay card */
	--color-white:            #FFFFFF;

	/* ---- Typography ---- */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--tracking-heading: -0.03em;
	--tracking-body:    -0.02em;

	/* Fluid type scale: desktop values from Figma, floors derived for mobile. */
	--text-display:  clamp(2.75rem, 1.5rem + 3.4vw, 4.6875rem);  /* 44→75px, lh 82px */
	--text-hero:     clamp(2.5rem, 1.45rem + 2.9vw, 4.0625rem);  /* 40→65px, lh 69px */
	--text-h2:       clamp(2.125rem, 1.4rem + 2vw, 3.125rem);    /* 34→50px, lh 59px */
	--text-h2-alt:   clamp(2rem, 1.35rem + 1.8vw, 2.8125rem);    /* 32→45px */
	--text-h3:       clamp(1.5rem, 1.2rem + 0.85vw, 2rem);       /* 24→32px */
	--text-h4:       clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);     /* 20→24px */
	--text-lead:     clamp(1.125rem, 1.05rem + 0.25vw, 1.375rem);/* 18→22px, lh 34px */
	--text-body-lg:  1.125rem;   /* 18px, lh 29px — nav, buttons, footer links */
	--text-body:     1rem;       /* 16px, lh 25–27px */
	--text-small:    0.9375rem;  /* 15px, lh 18.75px */
	--text-meta:     0.875rem;   /* 14px, lh 22px */
	--text-label:    0.8125rem;  /* 13px, lh 19.5px, 500, uppercase */
	--text-badge:    0.75rem;    /* 12px, lh 18px, 700, uppercase */

	--leading-display: 1.09;  /* 82/75 */
	--leading-hero:    1.06;  /* 69/65 */
	--leading-h2:      1.18;  /* 59/50 */
	--leading-h3:      1.2;
	--leading-lead:    1.55;  /* 34/22 */
	--leading-body:    1.6;

	/* ---- Shape ---- */
	--radius-pill: 100px; /* all buttons/tags */
	--radius-xl:   30px;  /* testimonial cards */
	--radius-lg:   12px;  /* blog card images */
	--radius-md:   10px;  /* why-cards images, top corners only */
	--radius-sm:   8px;   /* hero image, badges, hero overlay card */
	--radius-xs:   4px;   /* why-cards text panel */

	/* ---- Buttons ---- */
	--btn-height:     54px;
	--btn-height-lg:  68px; /* footer CTA */
	--btn-pad-x:      40px;

	/* ---- Layout ---- */
	--container-max: 1320px;
	--container-pad: 12px;
	--grid-gap:      30px;
}