/*
 * Modern DFFS — design tokens  ·  Identity: "Structured Cobalt"
 *
 * Deeper, chosen cobalt over a near-black navy, with a single teal "spark"
 * reserved for dynamic accents (active fields, cursors, validation ticks).
 * Neutrals are cool-biased so they read as picked, not defaulted.
 *   primary  #2a5fd0 (cobalt)   ink #0f1c2e (navy)   spark #12b5bf (teal)
 */

:root {
	/* Brand */
	--mdffs-primary: #2a5fd0;
	--mdffs-primary-600: #2450b3;
	--mdffs-primary-700: #204aa6;
	--mdffs-primary-050: #e9f0fb;

	/* Spark — the "dynamic" accent, used sparingly */
	--mdffs-spark: #12b5bf;
	--mdffs-spark-700: #0d8f97;

	/* Neutrals (cool-biased) */
	--mdffs-ink: #0f1c2e;
	--mdffs-body: #2c3542;
	--mdffs-muted: #5a6577;
	--mdffs-line: #dbe2ec;
	--mdffs-surface: #ffffff;
	--mdffs-surface-alt: #f4f7fc;

	/* Tier accents (Essentials / Professional / Enterprise / Add-on) */
	--mdffs-tier-essentials: #4a5568;
	--mdffs-tier-professional: #2a5fd0;
	--mdffs-tier-enterprise: #6b46c1;
	--mdffs-tier-addon: #b5730a;

	/* Feedback */
	--mdffs-yes: #1f8f4e;
	--mdffs-no: #b7c0ca;

	/* Type scale */
	--mdffs-font: inherit; /* inherit Mart's base font stack */
	--mdffs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--mdffs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--mdffs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--mdffs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);

	/* Spacing scale */
	--mdffs-space-1: 0.25rem;
	--mdffs-space-2: 0.5rem;
	--mdffs-space-3: 0.75rem;
	--mdffs-space-4: 1rem;
	--mdffs-space-6: 1.5rem;
	--mdffs-space-8: 2rem;
	--mdffs-space-12: 3rem;
	--mdffs-space-16: 4rem;
	--mdffs-space-24: 6rem;

	/* The single edge gutter for the whole site. Applied unconditionally to
	   .mdffs-section (site.css), which also zeroes .mdffs-wrap's own inline
	   padding inside a section so the two can never stack. Without that, a fully
	   wrapped page indented twice as far as one whose grids sit outside the wrap.

	   Unconditional, not behind a breakpoint: section children are capped at
	   1120px with auto margins, so they run flush at ANY viewport below that --
	   landscape phone and narrow desktop included, both of which a phone-width
	   media query misses. Above 1120px it costs nothing.

	   Set to the 24px the wrapped pages already used, so most of the site is
	   unchanged and only the previously-flush card grids move. Drop it to 1rem or
	   5px to sit closer to the edge -- one number, and it now genuinely applies
	   everywhere. Tune here, not in site.css. */
	--mdffs-gutter-edge: var(--mdffs-space-6);

	/* Radii + elevation */
	--mdffs-radius: 10px;
	--mdffs-radius-sm: 6px;
	--mdffs-radius-pill: 999px;
	--mdffs-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 20px rgba(16, 24, 40, 0.08);
	--mdffs-shadow-lg: 0 8px 30px rgba(16, 24, 40, 0.12);

	/* Layout */
	--mdffs-maxw: 1120px;
}