/* ===========================================================
   RewardRace — Design System v2
   Font: Plus Jakarta Sans (no italics anywhere)
   Brand: #573FD3 purple, with a bright gradient pair
   Modern, bold, marketing-ready for a Shopify app.
   =========================================================== */

:root {
	/* ---------- Typography ---------- */
	--rr-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--rr-fs-display:   clamp(2.75rem, 1rem + 5.5vw, 5rem);   /* 44–80 */
	--rr-fs-h1:        clamp(2.25rem, 1rem + 3.8vw, 3.75rem);/* 36–60 */
	--rr-fs-h2:        clamp(1.875rem, 1rem + 2.5vw, 2.875rem);/* 30–46 */
	--rr-fs-h3:        clamp(1.5rem, 1rem + 1.2vw, 1.875rem);/* 24–30 */
	--rr-fs-h4:        clamp(1.125rem, 1rem + .5vw, 1.375rem);/* 18–22 */
	--rr-fs-lg:        1.125rem;
	--rr-fs-md:        1rem;
	--rr-fs-sm:        .9375rem;
	--rr-fs-xs:        .8125rem;
	--rr-fs-2xs:       .75rem;

	--rr-lh-tight:     1.05;
	--rr-lh-snug:      1.2;
	--rr-lh-normal:    1.5;
	--rr-lh-relaxed:   1.65;

	--rr-tracking-tight:  -.025em;
	--rr-tracking-snug:   -.015em;
	--rr-tracking-wide:   .06em;

	/* ---------- Spacing ---------- */
	--rr-space-1:  .25rem;
	--rr-space-2:  .5rem;
	--rr-space-3:  .75rem;
	--rr-space-4:  1rem;
	--rr-space-5:  1.25rem;
	--rr-space-6:  1.5rem;
	--rr-space-8:  2rem;
	--rr-space-10: 2.5rem;
	--rr-space-12: 3rem;
	--rr-space-16: 4rem;
	--rr-space-20: 5rem;
	--rr-space-24: 6rem;

	--rr-section-y: clamp(4rem, 6vw, 7rem);
	--rr-section-x: clamp(1.25rem, 3vw, 2.5rem);

	/* ---------- Radius ---------- */
	--rr-radius-xs:   8px;
	--rr-radius-sm:   10px;
	--rr-radius-md:   14px;
	--rr-radius-lg:   18px;
	--rr-radius-xl:   24px;
	--rr-radius-2xl:  32px;
	--rr-radius-3xl:  40px;
	--rr-radius-pill: 999px;

	/* ---------- Layout ---------- */
	--rr-container:        1200px;
	--rr-container-narrow: 960px;

	/* ---------- Motion ---------- */
	--rr-ease-out:    cubic-bezier(.22, 1, .36, 1);
	--rr-ease-spring: cubic-bezier(.32, .72, 0, 1);
	--rr-dur-fast:    150ms;
	--rr-dur-base:    250ms;
	--rr-dur-slow:    400ms;

	/* ---------- Light palette ---------- */
	--rr-bg:            #FFFFFF;
	--rr-surface:       #F8F7FD;       /* soft purple-tinted neutral */
	--rr-surface-2:     #EFECF9;
	--rr-surface-3:     #E5E1F3;
	--rr-ink:           #0E0B1F;       /* deep purple-black */
	--rr-text:          #1F1B30;
	--rr-muted:         #5A5668;
	--rr-subtle:        #8A869A;
	--rr-heading:       #0E0B1F;
	--rr-border:        rgba(14, 11, 31, .08);
	--rr-border-strong: rgba(14, 11, 31, .16);
	--rr-divider:       rgba(14, 11, 31, .06);

	/* Brand */
	--rr-brand:         #573FD3;
	--rr-brand-hover:   #3E2BB8;
	--rr-brand-light:   #8B73FF;
	--rr-brand-soft:    #EEEAFB;
	--rr-brand-tint:    rgba(87, 63, 211, .12);
	--rr-brand-ghost:   rgba(87, 63, 211, .06);
	--rr-brand-gradient: linear-gradient(135deg, #573FD3 0%, #8B73FF 100%);
	--rr-brand-gradient-soft: linear-gradient(135deg, #EEEAFB 0%, #DCD4F9 100%);

	--rr-accent:        var(--rr-brand);
	--rr-link:          var(--rr-ink);
	--rr-link-hover:    var(--rr-brand);

	/* Status */
	--rr-success:       #0F7A4F;
	--rr-warning:       #B75D00;
	--rr-danger:        #B3261E;
	--rr-star:          #F5B100;

	/* ---------- Shadows ---------- */
	--rr-shadow-xs:  0 1px 2px rgba(14, 11, 31, .04);
	--rr-shadow-sm:  0 1px 3px rgba(14, 11, 31, .06), 0 1px 2px rgba(14, 11, 31, .04);
	--rr-shadow-md:  0 6px 20px rgba(14, 11, 31, .06), 0 2px 6px rgba(14, 11, 31, .04);
	--rr-shadow-lg:  0 16px 40px rgba(14, 11, 31, .08), 0 4px 10px rgba(14, 11, 31, .04);
	--rr-shadow-xl:  0 28px 72px rgba(14, 11, 31, .12), 0 10px 20px rgba(14, 11, 31, .05);
	--rr-shadow-brand-sm: 0 6px 18px rgba(87, 63, 211, .28);
	--rr-shadow-brand-md: 0 14px 34px rgba(87, 63, 211, .32);
	--rr-shadow-brand-lg: 0 24px 56px rgba(87, 63, 211, .36);
	--rr-shadow-glow: 0 0 0 1px rgba(87, 63, 211, .24), 0 16px 48px rgba(87, 63, 211, .20);

	--rr-ring:      0 0 0 3px rgba(87, 63, 211, .24);
	--rr-ring-ink:  0 0 0 3px rgba(14, 11, 31, .15);

	--rr-shadow:    var(--rr-shadow-sm);
}

/* ---------- Dark palette ---------- */
html[data-theme="dark"] {
	--rr-bg:            #0B081A;
	--rr-surface:       #13102A;
	--rr-surface-2:     #1B1735;
	--rr-surface-3:     #241E45;
	--rr-ink:           #F5F3FF;
	--rr-text:          #E9E6F7;
	--rr-muted:         #A8A3C2;
	--rr-subtle:        #7A758F;
	--rr-heading:       #FFFFFF;
	--rr-border:        rgba(255, 255, 255, .09);
	--rr-border-strong: rgba(255, 255, 255, .18);
	--rr-divider:       rgba(255, 255, 255, .06);

	--rr-brand:         #8B73FF;
	--rr-brand-hover:   #A894FF;
	--rr-brand-light:   #A894FF;
	--rr-brand-soft:    rgba(139, 115, 255, .14);
	--rr-brand-tint:    rgba(139, 115, 255, .18);
	--rr-brand-ghost:   rgba(139, 115, 255, .08);
	--rr-brand-gradient: linear-gradient(135deg, #8B73FF 0%, #A894FF 100%);
	--rr-brand-gradient-soft: linear-gradient(135deg, rgba(139,115,255,.18) 0%, rgba(168,148,255,.12) 100%);

	--rr-accent:        var(--rr-brand);
	--rr-link:          var(--rr-ink);
	--rr-link-hover:    var(--rr-brand);

	--rr-shadow-xs:  0 1px 2px rgba(0, 0, 0, .35);
	--rr-shadow-sm:  0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30);
	--rr-shadow-md:  0 6px 20px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .30);
	--rr-shadow-lg:  0 16px 40px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .30);
	--rr-shadow-xl:  0 28px 72px rgba(0, 0, 0, .65), 0 10px 20px rgba(0, 0, 0, .30);
	--rr-shadow-brand-sm: 0 6px 18px rgba(139, 115, 255, .32);
	--rr-shadow-brand-md: 0 14px 34px rgba(139, 115, 255, .36);
	--rr-shadow-brand-lg: 0 24px 56px rgba(139, 115, 255, .40);
	--rr-shadow-glow: 0 0 0 1px rgba(139, 115, 255, .30), 0 16px 48px rgba(139, 115, 255, .22);

	--rr-ring:     0 0 0 3px rgba(139, 115, 255, .30);
	--rr-ring-ink: 0 0 0 3px rgba(255, 255, 255, .20);

	--rr-shadow:   var(--rr-shadow-sm);
}

/* ----- Smooth theme transition ----- */
:where(html, body, .elementor-section, .elementor-widget, .elementor-element) {
	transition:
		background-color var(--rr-dur-base) var(--rr-ease-out),
		color var(--rr-dur-base) var(--rr-ease-out),
		border-color var(--rr-dur-base) var(--rr-ease-out);
}

/* ----- Smooth in-page anchor scrolling + offset for sticky header ----- */
html { scroll-behavior: smooth; }
:where(.rrFeatX, .rrew-pricing, .rrew-fcard) { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ----- Site canvas ----- */
body {
	background-color: var(--rr-bg);
	color: var(--rr-text);
	font-family: var(--rr-font-sans);
	font-size: var(--rr-fs-md);
	line-height: var(--rr-lh-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01";
}

/* ----- Force Plus Jakarta Sans, block italics ----- */
[class*="rrew-"], [class*="rrew-"] *,
[class*="rrFeatX"], [class*="rrFeatX"] *,
[class*="rrFoot"], [class*="rrFoot"] *,
[class*="rrDocs"], [class*="rrDocs"] *,
[class*="rrSecHead"], [class*="rrSecHead"] *,
[class*="rrFaq"], [class*="rrFaq"] * {
	font-family: var(--rr-font-sans) !important;
	font-style: normal !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ----- "Accent" words get solid purple color (no italics) ----- */
.rrew-hero__heading-accent,
.rrew-features__title-accent,
.rrew-tiers__title-accent,
.rrew-refer__title-accent,
.rrew-pricing__title-accent,
.rrew-faq__title-accent,
.rrew-fcard__title-accent,
.rrew-cta__title-accent,
.rrFeatX__titleAccent,
.rrFeatX__cardTitleAccent,
.rrSecHead__titleAccent,
.rrFaqGrid__titleAccent,
.rrDocsHero__titleAccent {
	color: var(--rr-brand) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	font-family: var(--rr-font-sans) !important;
}

/* ----- Elementor sections ----- */
:where(.elementor-section:not(.rrew-no-theme),
       .elementor-container:not(.rrew-no-theme),
       .e-con:not(.rrew-no-theme)) {
	color: var(--rr-text);
}

:where(.elementor-section:not([style*="background"]):not(.elementor-section-boxed):not(.rrew-no-theme),
       .e-con:not([style*="background"]):not(.rrew-no-theme)) {
	background-color: transparent;
}

/* ----- Headings ----- */
:where(.elementor-widget-heading:not(.rrew-no-theme) .elementor-heading-title,
       .elementor-widget:not(.rrew-no-theme) :is(h1, h2, h3, h4, h5, h6)) {
	color: var(--rr-heading);
	letter-spacing: var(--rr-tracking-tight);
	line-height: var(--rr-lh-snug);
	font-weight: 700;
}

/* ----- Text ----- */
:where(.elementor-widget-text-editor:not(.rrew-no-theme),
       .elementor-widget-text-editor:not(.rrew-no-theme) :is(p, li)) {
	color: var(--rr-text);
}

/* ----- Links ----- */
:where(.elementor-widget:not(.rrew-no-theme) a:not(.elementor-button):not([style*="color"]):not(.rrew-nav__brand):not(.rrew-nav__menu-item a):not(.rrew-nav__login):not(.rrew-nav__cta)) {
	color: var(--rr-link);
	text-decoration: none;
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
}
:where(.elementor-widget:not(.rrew-no-theme) a:not(.elementor-button):not([style*="color"]):not(.rrew-nav__brand):not(.rrew-nav__menu-item a):not(.rrew-nav__login):not(.rrew-nav__cta)):hover {
	color: var(--rr-link-hover);
}

/* ----- Icon list / icon box ----- */
:where(.elementor-widget-icon-list:not(.rrew-no-theme) .elementor-icon-list-text,
       .elementor-widget-icon-box:not(.rrew-no-theme) .elementor-icon-box-description) {
	color: var(--rr-text);
}
:where(.elementor-widget-icon-box:not(.rrew-no-theme) .elementor-icon-box-title) {
	color: var(--rr-heading);
}

/* ----- Dividers ----- */
:where(.elementor-widget-divider:not(.rrew-no-theme) .elementor-divider-separator) {
	border-top-color: var(--rr-border);
}

/* ===========================================================
   Section separators — subtle boundary when bg matches body
   =========================================================== */
:where(
	.rrew-hero,
	.rrew-marquee,
	.rrFeatX,
	.rrew-tiers,
	.rrew-refer,
	.rrew-pricing,
	.rrew-faq,
	.rrFaqGrid,
	.rrew-cta,
	.rrew-fcard,
	.rrSecHead,
	.rrDocsHero,
	.rrDocsSearch,
	.rrDocsCats,
	.rrDocsArt
) {
	border-top: 1px solid var(--rr-divider);
}
:where(.rrFoot) { border-top: 0; }
.rrew-no-sep { border-top: 0 !important; }

/* ----- Cards (legacy alias) ----- */
.rrew-card,
.elementor-widget.rrew-card {
	background-color: var(--rr-surface);
	color: var(--rr-text);
	border: 1px solid var(--rr-border);
	box-shadow: var(--rr-shadow-sm);
	border-radius: var(--rr-radius-lg);
}

/* ----- Default Elementor button ----- */
:where(.elementor-widget:not(.rrew-no-theme) .elementor-button:not([style*="background"])) {
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	border-radius: var(--rr-radius-pill);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	transition: transform var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}
:where(.elementor-widget:not(.rrew-no-theme) .elementor-button:not([style*="background"])):hover {
	transform: translateY(-1px);
	box-shadow: var(--rr-shadow-brand-md);
}

/* ----- Form inputs ----- */
:where(.elementor-widget:not(.rrew-no-theme) :is(
	input[type="text"], input[type="email"], input[type="search"],
	input[type="url"], input[type="tel"], input[type="number"], input[type="password"],
	textarea, select
)) {
	background-color: var(--rr-bg);
	color: var(--rr-text);
	border: 1px solid var(--rr-border-strong);
	border-radius: var(--rr-radius-md);
	font-family: inherit;
	transition: border-color var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}

:where(.elementor-widget:not(.rrew-no-theme) :is(input, textarea, select)):focus,
:where(.elementor-widget:not(.rrew-no-theme) :is(input, textarea, select)):focus-visible {
	outline: none;
	border-color: var(--rr-brand);
	/* box-shadow: var(--rr-ring); */
}

:where(.elementor-widget:not(.rrew-no-theme) :is(input, textarea))::placeholder {
	color: var(--rr-subtle);
	opacity: 1;
}

::selection {
	background: var(--rr-brand);
	color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	:where(*, *::before, *::after) {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}