/**
 * IDW — design tokens.
 *
 * Every colour, size, radius and duration used anywhere in the theme resolves
 * to a variable declared here. The Customizer overrides a subset of these at
 * runtime (see inc/dynamic-css.php), so changing the brand colour restyles the
 * whole site without touching a single component rule.
 */

:root {
	/* ---------------------------------------------------------------- Brand */
	/* Neutral fallback only. The real palette comes from config/brand.json via
	   inc/dynamic-css.php, which derives every tint below from the same seeds. */
	--idw-primary: #2f4858;
	--idw-primary-600: #283d4b;
	--idw-primary-700: #21323e;
	--idw-primary-800: #1a2830;
	--idw-primary-300: #82919b;
	--idw-primary-100: #e2e5e8;
	--idw-primary-50: #f3f4f5;

	--idw-accent: #118ab2;
	--idw-accent-ink: #0c617d;
	--idw-accent-300: #7cbfd5;
	--idw-accent-100: #deeff4;
	--idw-accent-50: #f1f8fa;

	/* ------------------------------------------------------------ Neutrals */
	--idw-ink: #171325;              /* headings */
	--idw-body: #4a5560;             /* body copy */
	--idw-muted: #6b7580;            /* meta, captions */
	--idw-line: #e4e7ea;
	--idw-line-strong: #d2d7dc;
	--idw-surface: #ffffff;
	--idw-surface-alt: #f7f9fa;
	--idw-surface-tint: #eef2f5;
	--idw-surface-deep: #16202a;          /* footer, dark bands */
	--idw-surface-deep-2: #29323b;

	/* --------------------------------------------------------------- State */
	--idw-success: #16794f;
	--idw-danger: #b3261e;
	--idw-warning: #8a5a00;
	--idw-focus: #118ab2;

	/* ------------------------------------------------------------ Gradients */
	--idw-grad-brand: linear-gradient(135deg, #2f4858 0%, #21323e 100%);
	--idw-grad-accent: linear-gradient(135deg, #118ab2 0%, #0c617d 100%);
	--idw-grad-veil: linear-gradient(180deg, rgba(23, 19, 37, 0.15) 0%, rgba(23, 19, 37, 0.55) 45%, rgba(23, 19, 37, 0.85) 100%);
	--idw-grad-soft: linear-gradient(180deg, #ffffff 0%, #faf8fc 100%);

	/* ---------------------------------------------------------- Typography */
	--idw-font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--idw-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--idw-fs-xs: 0.8125rem;   /* 13 */
	--idw-fs-sm: 0.9375rem;   /* 15 */
	--idw-fs-base: 1.0625rem; /* 17 — generous body size for readability */
	--idw-fs-lg: 1.1875rem;   /* 19 */
	--idw-fs-xl: clamp(1.25rem, 0.4vw + 1.15rem, 1.375rem);
	--idw-fs-h6: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	--idw-fs-h5: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
	--idw-fs-h4: clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
	--idw-fs-h3: clamp(1.625rem, 1.4vw + 1.25rem, 2.25rem);
	--idw-fs-h2: clamp(2rem, 2.6vw + 1.35rem, 3.125rem);
	--idw-fs-h1: clamp(2.375rem, 4vw + 1.4rem, 4rem);
	--idw-fs-display: clamp(2.75rem, 5.4vw + 1.35rem, 5rem);

	--idw-lh-tight: 1.1;
	--idw-lh-snug: 1.25;
	--idw-lh-normal: 1.5;
	--idw-lh-relaxed: 1.75;

	--idw-tracking-tight: -0.02em;
	--idw-tracking-wide: 0.14em;

	/* -------------------------------------------------------------- Spacing */
	--idw-space-1: 0.25rem;
	--idw-space-2: 0.5rem;
	--idw-space-3: 0.75rem;
	--idw-space-4: 1rem;
	--idw-space-5: 1.5rem;
	--idw-space-6: 2rem;
	--idw-space-7: 2.5rem;
	--idw-space-8: 3rem;
	--idw-space-9: 4rem;
	--idw-space-10: 5rem;

	/* Premium, airy section rhythm that still collapses well on phones. */
	--idw-section-y: clamp(3.5rem, 7vw, 7.5rem);
	--idw-section-y-sm: clamp(2.5rem, 5vw, 4.5rem);
	--idw-gutter: clamp(1.125rem, 4vw, 2.5rem);
	--idw-container: 1240px;
	--idw-container-narrow: 820px;
	--idw-container-wide: 1440px;

	/* --------------------------------------------------------------- Radii */
	--idw-radius-sm: 8px;
	--idw-radius: 14px;
	--idw-radius-lg: 22px;
	--idw-radius-xl: 32px;
	--idw-radius-pill: 999px;

	/* ------------------------------------------------------------- Shadows */
	/* Purple-tinted so shadows read as part of the brand, not as grey dirt. */
	--idw-shadow-xs: 0 1px 2px rgba(28, 21, 40, 0.06);
	--idw-shadow-sm: 0 2px 8px rgba(28, 21, 40, 0.06);
	--idw-shadow: 0 10px 30px -12px rgba(53, 32, 58, 0.18);
	--idw-shadow-lg: 0 24px 60px -20px rgba(53, 32, 58, 0.28);
	--idw-shadow-xl: 0 40px 90px -30px rgba(53, 32, 58, 0.35);
	--idw-shadow-ring: 0 0 0 1px var(--idw-line);

	/* --------------------------------------------------------------- Motion */
	--idw-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* easeOutQuint */
	--idw-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--idw-dur-fast: 180ms;
	--idw-dur: 320ms;
	--idw-dur-slow: 620ms;
	--idw-reveal-distance: 26px;

	/* --------------------------------------------------------------- Layers */
	--idw-z-header: 900;
	--idw-z-drawer: 1000;
	--idw-z-overlay: 990;
	--idw-z-top: 1100;

	/* Header height is also mirrored into JS for scroll offsets. */
	--idw-header-h: 88px;
	--idw-header-h-scrolled: 72px;
	--idw-topbar-h: 42px;
}

/**
 * Elementor exposes global colours/fonts under its own variables. Mapping them
 * onto ours means anything built with stock Elementor widgets inherits the
 * theme palette automatically.
 */
.elementor-kit-default,
:root {
	--e-global-color-primary: var(--idw-primary);
	--e-global-color-secondary: var(--idw-accent);
	--e-global-color-text: var(--idw-body);
	--e-global-color-accent: var(--idw-accent-ink);
	--e-global-typography-primary-font-family: "Plus Jakarta Sans";
	--e-global-typography-secondary-font-family: "Plus Jakarta Sans";
	--e-global-typography-text-font-family: "Inter";
	--e-global-typography-accent-font-family: "Inter";
}

/* Dark bands invert the neutral scale rather than hard-coding colours. */
.idw-invert {
	--idw-ink: #ffffff;
	--idw-body: rgba(255, 255, 255, 0.76);
	--idw-muted: rgba(255, 255, 255, 0.58);
	--idw-line: rgba(255, 255, 255, 0.14);
	--idw-line-strong: rgba(255, 255, 255, 0.24);
	--idw-surface: var(--idw-surface-deep);
	--idw-surface-alt: var(--idw-surface-deep-2);
	--idw-surface-tint: rgba(255, 255, 255, 0.06);
	--idw-shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.12);

	color: var(--idw-body);
}