/* ==========================================================================
   Cyara 2026 — design tokens
   Shared by the chrome (.cy26: banner, header, footer), the 2026 page
   template (.cy26-page), the event header/footer (.cy26e) and Marketo forms
   (.cy26-mkto). The theme sets html { font-size: 10px }: use px.
   ========================================================================== */

.cy26,
.cy26-page,
.cy26e,
.cy26-mkto {
	--cy26-font: "Montserrat", Arial, sans-serif;
	--cy26-radius: 6px;
	--cy26-radius-lg: 10px;
	--cy26-radius-xl: 14px;
	/* Same 1280px content width as the page body. */
	--cy26-shell: 1280px;
	--cy26-gutter: 16px;

	/* Brand */
	--cy26-cta: #0077e1;
	--cy26-cta-strong: oklch(0.45 0.17 253);
	--cy26-on-cta: #fff;
	--cy26-mint: #2dbdb4;
	--cy26-amber: oklch(0.75 0.14 75);
	--cy26-primary: oklch(0.49 0.15 246);
	--cy26-primary-strong: oklch(0.42 0.15 248);
	--cy26-ring: oklch(0.52 0.16 250);

	/* Light surfaces (footer, light page sections) */
	--cy26-bg: oklch(0.985 0.006 92);
	--cy26-fg: oklch(0.17 0.035 265);
	--cy26-muted: oklch(0.44 0.035 260);
	--cy26-border: oklch(0.86 0.014 260);
	--cy26-card: oklch(1 0 0);
	--cy26-surface: oklch(0.965 0.008 92);
	--cy26-surface-strong: oklch(0.93 0.014 92);
	--cy26-aqua: #0068c4;                    /* text-safe blue on light surfaces */
	--cy26-aqua-soft: oklch(0.93 0.035 250);
	--cy26-coral: oklch(0.72 0.13 25);
	--cy26-success: oklch(0.67 0.14 153);

	/* Dark surfaces (header, panels, mobile menu, navy page sections) */
	--cy26-dark: oklch(0.09 0.045 262);
	--cy26-dark-panel: oklch(0.09 0.045 262 / 0.96);
	--cy26-dark-menu: oklch(0.14 0.05 262);
	--cy26-white: oklch(0.99 0 0);
	--cy26-on-dark: oklch(0.97 0.01 240);
	--cy26-on-dark-muted: oklch(0.74 0.03 245);
	--cy26-dark-border: oklch(1 0 0 / 0.12);
	--cy26-dark-accent: oklch(0.78 0.12 245);
	--cy26-navy: oklch(0.12 0.055 268);
	--cy26-navy-soft: oklch(0.18 0.06 268);
	--cy26-aqua-on-dark: oklch(0.8 0.11 240);  /* lighter blue for text on navy */

	--cy26-banner-h: 40px;
	--cy26-header-h: 80px;
}

@media (min-width: 640px) { .cy26, .cy26-page, .cy26e { --cy26-gutter: 24px; } }
@media (min-width: 1024px) { .cy26, .cy26-page, .cy26e { --cy26-gutter: 40px; } }