/* Design tokens – names mirror the Framer Assets panel.
   TYPE SCALE: exact (from Framer). COLORS: exact (from Framer). FONTS: exact (Space Grotesk + Manrope). */
:root {
	/* Colors (Framer names) */
	--djs-ink:           #143f66;
	--djs-muted:         #555968;
	--djs-action-blue:   #143f66;
	--djs-soft-lavender: #bcc2f0;
	--djs-canvas:        #f5f5fd;
	--djs-white:         #ffffff;
	--djs-border:        #dedfed;
	--djs-sunshine:      #ffdf7c;

	--djs-link-hover:    #555a91;   /* exact – Framer --framer-link-hover-text-color */

	/* Legacy aliases used by layout.css */
	--djs-navy: var(--djs-action-blue);
	--djs-navy-700: #1b5287;
	--djs-tint: var(--djs-canvas);
	--djs-yellow: var(--djs-sunshine);
	--djs-text: var(--djs-ink);

	/* Fonts – exact: Space Grotesk Bold (H1–H6), Manrope for everything else */
	--djs-font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--djs-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Type scale (Framer: size / line-height) */
	--djs-fs-display: clamp(2.5rem, 6vw, 4rem);   --djs-lh-display: 1.1;   /* H1 64px / 1.1 */
	--djs-fs-section: clamp(1.625rem, 3vw, 2.125rem); --djs-lh-section: 1.2; /* H2 34px / 1.2 */
	--djs-fs-card:    1.25rem;                    --djs-lh-card: 1.3;      /* H3 20px / 1.3 */
	--djs-fs-body:    1rem;                       --djs-lh-body: 1.6;      /* P 16px / 1.6 */
	--djs-fs-small:   0.8125rem;                  --djs-lh-small: 1.5;     /* 13px / 1.5 */
	--djs-fs-label:   0.875rem;                   --djs-lh-label: 1.4;     /* 14px / 1.4 */

	--djs-container: 1200px;   /* Framer frame 1200px, 48px side padding -> 1104px content */
	--djs-gutter: 48px;
	--djs-radius-sm: 8px;
	--djs-radius: 12px;
	--djs-radius-lg: 20px;
	--djs-radius-card: 24px;
	--djs-header-h: 100px;
	--djs-section-y: 72px;
}

@media (max-width: 700px) { :root { --djs-gutter: 20px; } }