:root {
	/* -------------------------------------------------------------------------
	   Color tokens — SpeedEdge homepage (Homepage color 9).
	   ------------------------------------------------------------------------- */
	--color-bg: #ffffff;
	--color-bg-alt: #f9f9f9;
	--color-surface: #ffffff;
	--color-text: #121212;
	--color-text-muted: #5c5c5c;
	--color-border: #e5e5e5;
	--color-primary: #0d8651;
	--color-primary-contrast: #ffffff;
	--color-secondary: #011325;
	--color-secondary-contrast: #ffffff;
	--color-accent: #0fdf84;
	--color-navy: #011325;
	--color-ink: #1e1e1e;
	--color-hero-pill: rgb(20 28 36 / 0.42);
	--color-hero-bar: rgb(30 30 30 / 0.5);
	--color-on-dark: #ffffff;
	--color-on-dark-muted: rgb(255 255 255 / 0.72);
	--color-focus: #0d8651;
	--color-error: #b00020;
	--color-success: #0d8651;

	/* -------------------------------------------------------------------------
	   Typography scale
	   ------------------------------------------------------------------------- */
	--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-grotesk: "Space Grotesk", "Sora", "Segoe UI", system-ui, sans-serif;
	--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 0.875rem;   /* 14px */
	--font-size-md: 1rem;       /* 16px */
	--font-size-lg: 1.125rem;   /* 18px */
	--font-size-xl: 1.25rem;    /* 20px */
	--font-size-2xl: 1.5rem;    /* 24px */
	--font-size-3xl: 1.875rem;  /* 30px */
	--font-size-4xl: 2.25rem;   /* 36px */
	--font-size-5xl: 3rem;      /* 48px */
	--font-size-6xl: 3.5rem;    /* 56px */
	--font-size-7xl: 4rem;      /* 64px */
	--font-size-h1: 4.0625rem; /* 65px — Figma h1 */

	--line-height-tight: 1.15;
	--line-height-snug: 1.35;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.65;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--letter-spacing-wide: 0.12em;
	--letter-spacing-kicker: 2.42px; /* Figma kicker tracking */

	/* -------------------------------------------------------------------------
	   Spacing scale (4px base)
	   ------------------------------------------------------------------------- */
	--space-0: 0;
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.5rem;   /* 24px */
	--space-6: 2rem;     /* 32px */
	--space-7: 2.5rem;   /* 40px */
	--space-8: 3rem;     /* 48px */
	--space-9: 4rem;     /* 64px */
	--space-10: 5rem;    /* 80px */
	--space-11: 6rem;    /* 96px */
	--space-12: 8rem;    /* 128px */

	/* -------------------------------------------------------------------------
	   Layout
	   ------------------------------------------------------------------------- */
	--container-max: 81.25rem; /* 1300px */
	--container-narrow: 48rem;
	--header-height: 5.625rem; /* 90px */
	--hero-inset: 1.25rem; /* 20px */
	--radius-sm: 0.25rem;
	--radius-md: 0.75rem;
	--radius-lg: 1.25rem;
	--radius-xl: 1.75rem;
	--radius-2xl: 2rem;
	--radius-button: 2.5rem; /* 40px — main-content CTA */
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
	--shadow-md: 0 8px 24px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 16px 40px rgb(0 0 0 / 0.16);
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* -------------------------------------------------------------------------
	   Breakpoint reference (use in @media; custom props cannot be used in MQ)
	   --bp-sm: 480px
	   --bp-md: 768px
	   --bp-lg: 1024px
	   --bp-xl: 1280px
	   ------------------------------------------------------------------------- */
	--bp-sm: 30rem;
	--bp-md: 48rem;
	--bp-lg: 64rem;
	--bp-xl: 80rem;
}
