/* ==========================================================================
   DELINA GROUP — DESIGN TOKENS
   Single source of truth for colour, type, space, radius, shadow, motion.
   Brand colours are echoed from PHP (inc/options.php) so an administrator can
   override the three primary greens without touching this file.
   ========================================================================== */

:root {
	/* --- Brand palette ---------------------------------------------------- */
	--dg-green-900: #0b6735; /* Deep Delina Green */
	--dg-green-700: #138a3d; /* Corporate Green   */
	--dg-lime: #8dc63f;      /* Lime Accent       */
	--dg-pale: #eff5e5;      /* Soft Pale Green   */
	--dg-charcoal: #282b2b;  /* Charcoal          */
	--dg-white: #ffffff;

	/* --- Derived tones ---------------------------------------------------- */
	--dg-green-950: #073f21; /* footer / deepest  */
	--dg-green-800: #0e7a3a;
	--dg-lime-600: #6fa32c;
	--dg-pale-deep: #e2eed0;
	--dg-line: #dce9c9;      /* thin pale-green border */
	--dg-ink: var(--dg-charcoal);
	--dg-ink-soft: #5b6160;
	--dg-ink-faint: #8a908f;
	--dg-surface: #ffffff;
	--dg-surface-alt: #f7faf1;

	/* --- Gradients (use sparingly) ---------------------------------------- */
	--dg-gradient: linear-gradient(135deg, #0b6735 0%, #138a3d 55%, #8dc63f 100%);
	--dg-gradient-deep: linear-gradient(135deg, #073f21 0%, #0b6735 60%, #138a3d 100%);
	--dg-gradient-soft: linear-gradient(180deg, #ffffff 0%, var(--dg-surface-alt) 100%);

	/* --- Typography ------------------------------------------------------- */
	--dg-font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Fluid scale: min value at 360px viewport, max at 1440px */
	--dg-fs-h1: clamp(2.5rem, 1.55rem + 4.2vw, 4.5rem);      /* 40 → 72 */
	--dg-fs-h2: clamp(2rem, 1.6rem + 1.78vw, 3.125rem);      /* 32 → 50 */
	--dg-fs-h3: clamp(1.375rem, 1.2rem + 0.78vw, 2rem);      /* 22 → 32 */
	--dg-fs-h4: clamp(1.125rem, 1.05rem + 0.33vw, 1.375rem); /* 18 → 22 */
	--dg-fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);  /* 16 → 17 */
	--dg-fs-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);  /* 17 → 20 */
	--dg-fs-sm: 0.9375rem;
	--dg-fs-label: 0.75rem;

	--dg-lh-tight: 1.06;
	--dg-lh-heading: 1.16;
	--dg-lh-body: 1.7;

	--dg-ls-tight: -0.02em;
	--dg-ls-label: 0.14em;

	--dg-fw-regular: 400;
	--dg-fw-medium: 500;
	--dg-fw-semi: 600;
	--dg-fw-bold: 700;
	--dg-fw-black: 800;

	/* --- Layout ----------------------------------------------------------- */
	--dg-max: 1440px;        /* outer frame  */
	--dg-content: 1280px;    /* content grid */
	--dg-narrow: 820px;      /* prose        */
	--dg-gutter: clamp(1.25rem, 4vw, 3rem);
	--dg-section-y: clamp(4.5rem, 9vw, 8.75rem); /* 72 → 140 */
	--dg-section-y-sm: clamp(3rem, 6vw, 5.5rem);

	/* --- Radius ----------------------------------------------------------- */
	--dg-r-sm: 10px;
	--dg-r-md: 16px;
	--dg-r-lg: 20px;
	--dg-r-xl: 24px;
	--dg-r-2xl: 32px;
	--dg-r-pill: 999px;

	/* --- Elevation -------------------------------------------------------- */
	--dg-shadow-xs: 0 1px 2px rgba(11, 103, 53, 0.06);
	--dg-shadow-sm: 0 2px 8px rgba(11, 103, 53, 0.06), 0 1px 2px rgba(40, 43, 43, 0.04);
	--dg-shadow-md: 0 12px 28px -12px rgba(11, 103, 53, 0.18), 0 2px 6px rgba(40, 43, 43, 0.04);
	--dg-shadow-lg: 0 28px 56px -20px rgba(11, 103, 53, 0.26), 0 4px 12px rgba(40, 43, 43, 0.05);
	--dg-shadow-ring: 0 0 0 1px var(--dg-line);

	/* --- Motion ----------------------------------------------------------- */
	--dg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dg-dur-fast: 240ms;
	--dg-dur: 480ms;
	--dg-dur-slow: 760ms;

	/* --- Chrome ----------------------------------------------------------- */
	--dg-header-utility-h: 40px;
	--dg-header-main-h: 84px;
	--dg-header-h: calc(var(--dg-header-utility-h) + var(--dg-header-main-h));
	--dg-z-header: 900;
	--dg-z-mega: 950;
	--dg-z-drawer: 980;
	--dg-z-skip: 1000;
}

@media (max-width: 1023px) {
	:root {
		--dg-header-utility-h: 0px;
		--dg-header-main-h: 68px;
	}
}

/* Honour the operating-system reduced-motion preference everywhere. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dg-dur-fast: 1ms;
		--dg-dur: 1ms;
		--dg-dur-slow: 1ms;
	}
}