/* ==========================================================================
   ecoven — design tokens
   Values lifted from the Figma file (ecoven website, node 69:2).
   Everything downstream references these; nothing hard-codes a hex.
   ========================================================================== */

:root {
	/* ---- Brand palette ------------------------------------------------- */
	--ec-blue: #011e7c;          /* Primary. Nav bar, headings, buttons.     */
	--ec-blue-2: #181e80;        /* Slightly lifted blue for card links.     */
	--ec-blue-900: #01175e;      /* Pressed / deep states.                   */
	--ec-ice: #f2fbff;           /* Pale blue ground + text on blue.         */
	--ec-amber: #fbbf24;         /* The quote CTA.                           */
	--ec-amber-600: #e8ab0b;

	/* ---- Neutrals ------------------------------------------------------ */
	--ec-ink: #0f1e36;
	--ec-ink-2: #0a1931;
	--ec-black: #1a1a1a;
	--ec-slate: #5f6d7e;
	--ec-slate-2: #64748b;
	--ec-slate-3: #475569;
	--ec-mute: #94a3b8;
	--ec-line: #e2e8f0;
	--ec-line-2: #e4e7ec;
	--ec-sand: #d9d5cb;
	--ec-white: #ffffff;
	--ec-meta: #888888;

	/* ---- Semantic ------------------------------------------------------ */
	--ec-bg: var(--ec-white);
	--ec-fg: var(--ec-black);
	--ec-heading: var(--ec-blue);
	--ec-muted: var(--ec-slate);
	--ec-border: var(--ec-line);
	--ec-accent: var(--ec-amber);
	--ec-on-accent: var(--ec-blue);
	--ec-focus: #ffb703;

	--ec-ok: #16a34a;
	--ec-err: #dc2626;

	/* ---- Type ---------------------------------------------------------- */
	--ec-font: "Spline Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ec-font-ui: "Geist", var(--ec-font);
	--ec-font-mark: "TikTok Sans", var(--ec-font);

	/* Fluid scale: min at 360px, max at 1600px. */
	--ec-fs-hero: clamp(2.25rem, 1.1rem + 4.4vw, 3.75rem);      /* 36 → 60 */
	--ec-fs-h1: clamp(2rem, 1rem + 3.6vw, 3.5rem);              /* 32 → 56 */
	--ec-fs-h2: clamp(1.75rem, 0.95rem + 2.9vw, 3rem);          /* 28 → 48 */
	--ec-fs-h3: clamp(1.375rem, 1.05rem + 1.1vw, 1.75rem);      /* 22 → 28 */
	--ec-fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);          /* 18 → 24 */
	--ec-fs-stat: clamp(2.5rem, 1.4rem + 3.6vw, 3.5rem);        /* 40 → 56 */
	--ec-fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.5rem);       /* 17 → 24 */
	--ec-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16 → 18 */
	--ec-fs-sm: 0.875rem;
	--ec-fs-xs: 0.8125rem;
	--ec-fs-2xs: 0.75rem;
	--ec-fs-micro: 0.625rem;

	--ec-lh-tight: 1.05;
	--ec-lh-head: 1.14;
	--ec-lh-body: 1.6;

	--ec-track-eyebrow: 0.125em;   /* 2px at 16px — the "why ecoven" label. */

	/* ---- Layout -------------------------------------------------------- */
	--ec-container: 1442px;
	--ec-container-narrow: 900px;
	--ec-gutter: clamp(1.25rem, 0.4rem + 3.4vw, 3.5rem);
	--ec-col-gap: clamp(1rem, 0.5rem + 1.4vw, 1.5rem);
	--ec-row-gap: clamp(1.5rem, 0.9rem + 2vw, 3rem);

	--ec-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
	--ec-section-y-tight: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);

	--ec-radius: 0px;              /* The design is resolutely square.       */
	--ec-radius-pill: 999px;
	--ec-radius-round: 50%;

	--ec-header-utility-h: 75px;
	--ec-header-nav-h: 60px;
	--ec-header-h: calc(var(--ec-header-utility-h) + var(--ec-header-nav-h));
	--ec-adminbar: 0px;

	/* ---- Elevation ----------------------------------------------------- */
	--ec-shadow-sm: 0 1px 2px rgb(1 30 124 / 0.06), 0 2px 8px rgb(1 30 124 / 0.05);
	--ec-shadow: 0 8px 24px rgb(1 30 124 / 0.10);
	--ec-shadow-lg: 0 24px 60px rgb(1 30 124 / 0.16);
	--ec-shadow-amber: 0 10px 30px rgb(251 191 36 / 0.35);

	/* ---- Motion -------------------------------------------------------- */
	--ec-ease: cubic-bezier(0.22, 1, 0.36, 1);         /* expo-out, the workhorse */
	--ec-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ec-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--ec-dur-xs: 140ms;
	--ec-dur-sm: 240ms;
	--ec-dur: 480ms;
	--ec-dur-lg: 760ms;
	--ec-dur-xl: 1100ms;

	--ec-stagger: 70ms;
	--ec-reveal-y: 34px;
	--ec-reveal-blur: 6px;

	--ec-z-header: 900;
	--ec-z-drawer: 950;
	--ec-z-lightbox: 990;
	--ec-z-curtain: 1000;
}

/* Motion "speed" preference from the options page. */
.ec-speed-calm {
	--ec-dur: 640ms;
	--ec-dur-lg: 980ms;
	--ec-stagger: 95ms;
}

.ec-speed-brisk {
	--ec-dur: 360ms;
	--ec-dur-lg: 560ms;
	--ec-stagger: 48ms;
}

/* ---- Tone scopes -------------------------------------------------------
   A section sets its own ground and the semantic tokens follow, so cards,
   buttons and rules inside it need no tone-specific selectors.
   --------------------------------------------------------------------- */

.ec-s--tone-light {
	--ec-bg: var(--ec-white);
	--ec-fg: var(--ec-black);
	--ec-heading: var(--ec-blue);
	--ec-muted: var(--ec-slate);
	--ec-border: var(--ec-line);
}

.ec-s--tone-ice {
	--ec-bg: var(--ec-ice);
	--ec-fg: var(--ec-ink);
	--ec-heading: var(--ec-blue);
	--ec-muted: var(--ec-slate);
	--ec-border: #d5e9f5;
}

.ec-s--tone-blue {
	--ec-bg: var(--ec-blue);
	--ec-fg: var(--ec-ice);
	--ec-heading: var(--ec-ice);
	--ec-muted: rgb(242 251 255 / 0.78);
	--ec-border: rgb(242 251 255 / 0.24);
}

.ec-s--tone-dark {
	--ec-bg: var(--ec-ink-2);
	--ec-fg: #e9eef6;
	--ec-heading: var(--ec-white);
	--ec-muted: rgb(233 238 246 / 0.72);
	--ec-border: rgb(255 255 255 / 0.14);
}