/*
 * dfdc.io design tokens.
 * One source of truth for color / spacing / radii / shadows / motion.
 * Loaded before every other stylesheet so :root vars cascade to all themes.
 */

:root {
	/* ----- Brand palette --------------------------------------------- */
	--dfdc-mint:       #2DD4A3;   /* primary accent (CTAs, links) */
	--dfdc-mint-700:   #1FA37D;
	--dfdc-mint-300:   #6EE5BE;
	--dfdc-cyan:       #16F2DC;   /* logo node */
	--dfdc-blue:       #0D9AEA;   /* logo node */
	--dfdc-deep-blue:  #0C50BF;   /* logo accent */
	--dfdc-navy:       #33335D;   /* logo wordmark, body text */

	/* ----- Surfaces -------------------------------------------------- */
	--dfdc-bg:         #0F1513;   /* dominant background */
	--dfdc-bg-elev-1:  #131D1A;
	--dfdc-bg-elev-2:  #182723;
	--dfdc-surface:    #FFFFFF;
	--dfdc-surface-2:  #F6FAF8;
	--dfdc-line:       rgba(255, 255, 255, 0.10);
	--dfdc-line-strong:rgba(255, 255, 255, 0.18);

	/* ----- Text on dark / on light ----------------------------------- */
	--dfdc-text:       #E9F4F0;   /* on dark */
	--dfdc-text-muted: #98ACA5;
	--dfdc-text-dark:  #0F1513;   /* on light */
	--dfdc-text-dark-muted: #4D5C57;

	/* ----- Type ------------------------------------------------------ */
	--dfdc-font-sans:  "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dfdc-font-mono:  ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

	--dfdc-text-xs:    0.75rem;
	--dfdc-text-sm:    0.875rem;
	--dfdc-text-base:  1rem;
	--dfdc-text-lg:    1.125rem;
	--dfdc-text-xl:    1.375rem;
	--dfdc-text-2xl:   1.75rem;
	--dfdc-text-3xl:   2.25rem;
	--dfdc-text-4xl:   3rem;
	--dfdc-text-5xl:   clamp(3rem, 6vw + 1rem, 5.5rem);

	--dfdc-leading-tight: 1.1;
	--dfdc-leading-snug:  1.25;
	--dfdc-leading-normal:1.55;
	--dfdc-tracking-tight: -0.02em;
	--dfdc-tracking-wide:  0.04em;

	/* ----- Type weights — codified by audit (reports/dfdc-design-system.md §3) */
	--dfdc-weight-hero-title:    400;
	--dfdc-weight-section-title: 400;
	--dfdc-weight-card-title:    500;
	--dfdc-weight-stat-value:    500;
	--dfdc-weight-eyebrow:       500;
	--dfdc-weight-button:        500;

	/* ----- Type sizes (semantic — components reference these, not raw clamps) */
	--dfdc-text-hero-title:    clamp(2.6rem, 4.4vw + 1rem, 4.5rem);
	--dfdc-text-section-title: clamp(2rem,  3vw + 0.6rem, 3rem);
	--dfdc-text-stat-value:    clamp(2rem,  3vw + 0.5rem, 3rem);

	/* ----- Vertical rhythm — semantic gap tokens for the layout cascade */
	--dfdc-section-gap:  clamp(64px, 8vh, 120px);   /* between sections within a page body */
	--dfdc-section-pad:  clamp(64px, 8vh, 120px);   /* full-bleed band internal padding */
	--dfdc-stack-gap-tight:  var(--dfdc-space-3);   /* 12px — tight stack inside a card */
	--dfdc-stack-gap-normal: var(--dfdc-space-5);   /* 24px — section-internal stack */
	--dfdc-stack-gap-loose:  var(--dfdc-space-7);   /* 48px — between intro block and grid */

	/* ----- Eyebrow style ([ FOO ] bracketed labels) */
	--dfdc-eyebrow-color:         var(--dfdc-mint-700);
	--dfdc-eyebrow-color-on-dark: var(--dfdc-mint);
	--dfdc-eyebrow-letter-spacing: 0.10em;
	--dfdc-eyebrow-transform:      uppercase;

	/* ----- Dashed grid (the dominant divider treatment across the site) */
	--dfdc-grid-dash-light: 1px dashed rgba(15, 21, 19, 0.18);
	--dfdc-grid-dash-dark:  1px dashed rgba(255, 255, 255, 0.18);

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

	/* ----- Container widths ----------------------------------------- */
	--dfdc-container:       min(1240px, calc(100% - 2 * var(--dfdc-space-5)));
	--dfdc-container-narrow:min(880px,  calc(100% - 2 * var(--dfdc-space-5)));

	/* ----- Radii ----------------------------------------------------- */
	--dfdc-radius-sm: 6px;
	--dfdc-radius-md: 12px;
	--dfdc-radius-lg: 20px;
	--dfdc-radius-xl: 32px;
	--dfdc-radius-pill: 999px;

	/* ----- Shadows --------------------------------------------------- */
	--dfdc-shadow-sm: 0 1px 2px rgba(15, 21, 19, 0.10);
	--dfdc-shadow-md: 0 6px 18px rgba(15, 21, 19, 0.12);
	--dfdc-shadow-lg: 0 24px 60px rgba(15, 21, 19, 0.18);
	--dfdc-glow-mint: 0 0 0 1px rgba(45, 212, 163, 0.35), 0 14px 40px rgba(45, 212, 163, 0.18);

	/* ----- Motion ---------------------------------------------------- */
	--dfdc-ease:        cubic-bezier(0.22, 1, 0.36, 1);
	--dfdc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--dfdc-duration-fast: 160ms;
	--dfdc-duration:      280ms;
	--dfdc-duration-slow: 520ms;

	/* ----- Z-index --------------------------------------------------- */
	--dfdc-z-hero:    1;
	--dfdc-z-content: 10;
	--dfdc-z-header:  100;
	--dfdc-z-overlay: 1000;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dfdc-duration-fast: 0ms;
		--dfdc-duration:      0ms;
		--dfdc-duration-slow: 0ms;
	}
}