/* ==========================================================================
   Winning Promotions — design system (single source of truth)
   Loaded first. Every colour, size, radius, shadow and spacing value used by the
   theme CSS and by the Elementor builders refers to the tokens below.
   ========================================================================== */
:root {
	/* ---- Brand colours ---- */
	--wp-blue: #1E73BE;
	--wp-green: #28A745;
	--wp-red: #DC3545;
	--wp-yellow: #FFC107;
	--wp-white: #FFFFFF;
	--wp-dark: #0F4C86;
	--wp-light: #F7F9FC;

	/* Darker / lighter shades of each corporate colour (for same-colour gradients and tints) */
	--wp-blue-dark: #0F4C86;
	--wp-blue-light: #DCEBF8;
	--wp-green-dark: #1E7E34;
	--wp-green-light: #DDF3E3;
	--wp-red-dark: #B02A37;
	--wp-red-light: #FBE3E6;
	--wp-yellow-dark: #E0A800;
	--wp-yellow-light: #FFF3CD;

	/* Text and lines */
	--wp-text: #355F8C;
	--wp-muted: #4A6F96;
	--wp-border: rgba(15,76,134, .10);

	/* Gradients: same colour, lighter to darker */
	--wp-grad-blue: linear-gradient(135deg, var(--wp-blue-dark), var(--wp-blue));
	--wp-grad-green: linear-gradient(135deg, var(--wp-green-dark), var(--wp-green));
	--wp-grad-red: linear-gradient(135deg, var(--wp-red-dark), var(--wp-red));
	--wp-grad-yellow: linear-gradient(135deg, var(--wp-yellow), #FFD454);

	/* ---- Typography (one family) ---- */
	--wp-font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--wp-fs-h1: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
	--wp-fs-h2: clamp(1.875rem, 1.1rem + 2.4vw, 3rem);
	--wp-fs-h3: clamp(1.25rem, 1rem + .9vw, 1.75rem);
	--wp-fs-body: 1.0625rem;
	--wp-fs-small: .9375rem;
	--wp-fw-heading: 800;
	--wp-lh-heading: 1.12;
	--wp-lh-body: 1.6;

	/* ---- Shape ---- */
	--wp-radius-sm: 12px;
	--wp-radius: 20px;
	--wp-radius-lg: 28px;
	--wp-radius-xl: 36px;
	--wp-radius-pill: 999px;

	/* ---- Shadows ---- */
	--wp-shadow-sm: 0 2px 10px rgba(15,76,134, .06);
	--wp-shadow: 0 10px 30px rgba(15,76,134, .10);
	--wp-shadow-lg: 0 20px 50px rgba(15,76,134, .16);

	/* ---- Spacing and layout ---- */
	--wp-space-1: 8px;
	--wp-space-2: 16px;
	--wp-space-3: 24px;
	--wp-space-4: 40px;
	--wp-space-5: 64px;
	--wp-section-y: clamp(40px, 5vw, 72px);
	--wp-container: 1290px;
	--wp-gutter: 24px;

	/* ---- Motion ---- */
	--wp-ease: cubic-bezier(.4, 0, .2, 1);
	--wp-dur: .3s;

	/* ---- Legacy aliases (older theme CSS and widgets still read these names) ---- */
	--kd-primary: var(--e-global-color-primary, var(--wp-blue));
	--kd-secondary: var(--e-global-color-secondary, var(--wp-dark));
	--kd-text: var(--e-global-color-text, var(--wp-text));
	--kd-accent: var(--e-global-color-accent, var(--wp-green));
	--kd-yellow: var(--wp-yellow);
	--kd-red: var(--wp-red);
	--kd-green: var(--wp-green);
	--kd-ink: var(--wp-dark);
	--kd-blue-dark: var(--wp-blue-dark);
	--kd-border: var(--wp-border);
	--kd-lighter: var(--wp-muted);
	--kd-surface: var(--wp-light);
	--kd-purple: var(--wp-blue-dark);
	--kd-deep: var(--wp-blue-dark);
	--kd-font: var(--wp-font);
	--kd-font-head: var(--wp-font);
	--kd-container: var(--wp-container);
	--kd-gutter: 30px;
	--kd-radius-sm: var(--wp-radius-sm);
	--kd-radius: var(--wp-radius);
	--kd-radius-lg: var(--wp-radius-xl);
	--kd-shadow: var(--wp-shadow);
	--kd-ease: var(--wp-ease);
}

/* ---- Base ---- */
body.kd-theme { font-family: var(--wp-font); color: var(--wp-text); background: var(--wp-white); font-size: var(--wp-fs-body); line-height: var(--wp-lh-body); }

/* ---- Heading hierarchy for theme-rendered content (posts, pages, archives, 404, search) ---- */
body.kd-theme :is(.entry-content, .kd-prose, .kd-page-content, .kd-archive, .kd-404, .kd-search) :is(h1, h2, h3, h4) { font-family: var(--wp-font); font-weight: var(--wp-fw-heading); line-height: var(--wp-lh-heading); color: var(--wp-dark); }
body.kd-theme :is(.entry-content, .kd-prose, .kd-page-content, .kd-archive, .kd-404, .kd-search) h1 { font-size: var(--wp-fs-h1); }
body.kd-theme :is(.entry-content, .kd-prose, .kd-page-content, .kd-archive, .kd-404, .kd-search) h2 { font-size: var(--wp-fs-h2); }
body.kd-theme :is(.entry-content, .kd-prose, .kd-page-content, .kd-archive, .kd-404, .kd-search) h3 { font-size: var(--wp-fs-h3); }
body.kd-theme :is(.entry-content, .kd-prose, .kd-page-content, .kd-archive, .kd-404, .kd-search) :is(p, li) { font-size: var(--wp-fs-body); line-height: var(--wp-lh-body); color: var(--wp-text); }

/* ---- Highlighted word: rectangular coloured box (signature element) ---- */
.kd-hl { display: inline; padding: .02em .22em .06em; margin: 0 .02em; border-radius: 6px; background: var(--wp-blue); color: #fff; line-height: 1.25; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kd-on-dark .kd-hl { background: var(--wp-yellow); color: var(--wp-dark); }
.kd-hl--blue { background: var(--wp-blue); color: #fff; }
.kd-hl--green { background: var(--wp-green); color: #fff; }
.kd-hl--red { background: var(--wp-red); color: #fff; }
.kd-hl--yellow { background: var(--wp-yellow); color: var(--wp-dark); }
body.kd-theme .elementor-heading-title .kd-hl--blue, body.kd-theme .elementor-heading-title .kd-hl--green, body.kd-theme .elementor-heading-title .kd-hl--red { color: #fff; }
body.kd-theme .elementor-heading-title .kd-hl--yellow { color: var(--wp-dark); }

/* ---- Buttons (Elementor button widget + theme buttons) ---- */
body.kd-theme .elementor-button { border-radius: var(--wp-radius-sm); font-family: var(--wp-font); font-weight: 700; letter-spacing: .02em; transition: transform var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease), background var(--wp-dur) var(--wp-ease), color var(--wp-dur) var(--wp-ease); }
body.kd-theme .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--wp-shadow); }
body.kd-theme .elementor-button:focus-visible, body.kd-theme a:focus-visible, body.kd-theme button:focus-visible { outline: 3px solid var(--wp-yellow); outline-offset: 3px; }

/* ---- Forms ---- */
body.kd-theme :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select) { border-radius: var(--wp-radius-sm); border: 1px solid var(--wp-border); font-family: var(--wp-font); color: var(--wp-dark); }
body.kd-theme :is(input, textarea, select):focus { outline: 3px solid var(--wp-blue-light); border-color: var(--wp-blue); }

/* ---- Cards ---- */
.kd-card-hover { transition: transform var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease); }

@media (prefers-reduced-motion: reduce) {
	body.kd-theme .elementor-button:hover, .kd-card-hover:hover { transform: none !important; }
}