/* Reviewtexium AI Engine - Theme Tokens
 *
 * Defaults live on :root. Sites that define theme.json palette colors
 * (primary, foreground, background, secondary) automatically get those
 * values picked up via the WordPress preset-color custom properties.
 *
 * Override individual tokens via Reviewtexium → Settings → Theme tokens
 * (emitted as inline style on wp_head with higher specificity).
 */

:root {
	/* Colors - map to theme.json palette when present */
	--rte-color-primary: var( --wp--preset--color--primary, #2271b1 );
	--rte-color-primary-text: var( --wp--preset--color--primary-text, #ffffff );
	--rte-color-text: var( --wp--preset--color--foreground, #1d2327 );
	--rte-color-text-muted: #50575e; /* v0.35.0: AA on white and light theme backgrounds */
	--rte-color-bg: var( --wp--preset--color--background, #ffffff );
	--rte-color-bg-muted: var( --wp--preset--color--secondary, #f8f9fa );
	--rte-color-border: #e2e4e7;
	--rte-color-success: #00a32a;
	--rte-color-success-bg: #d1e7dd;
	--rte-color-success-text: #0f5132;
	--rte-color-error: #d63638;
	--rte-color-error-bg: #f8d7da;
	--rte-color-error-text: #842029;
	--rte-color-warning: #f6b400;
	--rte-color-warning-bg: #fff3cd;
	--rte-color-warning-text: #664d03;
	--rte-color-info-bg: #cfe2ff;
	--rte-color-info-text: #084298;

	/* Brand variations */
	--rte-color-primary-dark: var( --wp--preset--color--primary-dark, #195581 );

	/* Hero card (single tool page) */
	--rte-color-hero-from: var( --rte-color-primary, #2271b1 );
	--rte-color-hero-to:   var( --rte-color-primary-dark, #195581 );
	--rte-color-hero-text: var( --rte-color-primary-text, #ffffff );

	/* Cards / surfaces */
	--rte-color-card-bg: var( --rte-color-bg, #ffffff );
	--rte-color-logo-bg: #ffffff;

	/* Stars */
	--rte-color-stars: #f6b400;

	/* Status pill colors */
	--rte-color-status-active: var( --rte-color-success, #00a32a );
	--rte-color-status-beta: #f0b849;
	--rte-color-status-closed: #6c7781;
	--rte-color-status-deprecated: var( --rte-color-error, #d63638 );

	/* Radii */
	--rte-radius: 12px;
	--rte-radius-sm: 6px;
	--rte-radius-md: 12px;
	--rte-radius-lg: 16px;
	--rte-radius-pill: 999px;

	/* Spacing scale (used in newer components) */
	--rte-space-1: 4px;
	--rte-space-2: 8px;
	--rte-space-3: 12px;
	--rte-space-4: 16px;
	--rte-space-5: 20px;
	--rte-space-6: 24px;
	--rte-space-8: 32px;
	--rte-space-10: 40px;
	--rte-space-12: 48px;

	/* Elevation — a layered shadow system for depth.
	   sm: subtle lift for cards at rest. md: raised, for hover.
	   lg: prominent, for the hero and featured surfaces. */
	--rte-shadow-sm: 0 1px 2px rgba( 15, 23, 42, 0.04 ), 0 1px 3px rgba( 15, 23, 42, 0.06 );
	--rte-shadow-md: 0 2px 4px rgba( 15, 23, 42, 0.04 ), 0 4px 12px rgba( 15, 23, 42, 0.08 );
	--rte-shadow-lg: 0 4px 8px rgba( 15, 23, 42, 0.04 ), 0 12px 32px rgba( 15, 23, 42, 0.12 );
	--rte-shadow-hover: 0 4px 16px rgba( 0, 0, 0, 0.06 ); /* legacy alias */
	--rte-shadow-focus: 0 0 0 3px rgba( 34, 113, 177, 0.28 );

	/* Motion — consistent easing + duration so interactions feel coherent. */
	--rte-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
	--rte-transition-fast: 120ms var( --rte-ease );
	--rte-transition: 180ms var( --rte-ease );
	--rte-transition-slow: 280ms var( --rte-ease );

	/* Typography scale — a modular scale for clear hierarchy.
	   Body is 16px; the scale steps up ~1.2x for headings. */
	--rte-text-xs: 12px;
	--rte-text-sm: 13px;
	--rte-text-base: 15px;
	--rte-text-md: 16px;
	--rte-text-lg: 18px;
	--rte-text-xl: 22px;
	--rte-text-2xl: 27px;
	--rte-text-3xl: 33px;
	--rte-font-weight-normal: 400;
	--rte-font-weight-medium: 500;
	--rte-font-weight-semibold: 600;
	--rte-font-weight-bold: 700;
	--rte-line-tight: 1.2;
	--rte-line-snug: 1.4;
	--rte-line-normal: 1.6;
}

/* Pricing pills (v0.30.0): Free, Freemium, Paid, Free Trial — used on tool
   cards, tool pages, reviews and the directory. Colours are themable. */
:root {
	--rte-price-free: #067647;
	--rte-price-free-bg: #ecfdf3;
	--rte-price-freemium: #175cd3;
	--rte-price-freemium-bg: #eff8ff;
	--rte-price-trial: #6941c6;
	--rte-price-trial-bg: #f4f3ff;
	--rte-price-paid: #b54708;
	--rte-price-paid-bg: #fffaeb;
}
.rte-price {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
	white-space: nowrap;
	color: var( --rte-price-c, #344054 );
	background: var( --rte-price-bg, #f2f4f7 );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --rte-price-c, #344054 ) 18%, transparent );
}
.rte-price::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.rte-price--free { --rte-price-c: var( --rte-price-free ); --rte-price-bg: var( --rte-price-free-bg ); }
.rte-price--freemium { --rte-price-c: var( --rte-price-freemium ); --rte-price-bg: var( --rte-price-freemium-bg ); }
.rte-price--free-trial { --rte-price-c: var( --rte-price-trial ); --rte-price-bg: var( --rte-price-trial-bg ); }
.rte-price--paid { --rte-price-c: var( --rte-price-paid ); --rte-price-bg: var( --rte-price-paid-bg ); }
.rte-price--lg { font-size: 13px; padding: 4px 12px 4px 10px; }

/* Views + votes (v0.31.2): small, quiet icon + count. Votes are spans
   (not <button>) so theme button styles never apply. */
.rte-eng {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #667085;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.rte-eng__views { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; }
.rte-eng__views svg { flex: none; width: 13px; height: 13px; }
.rte-eng__votes { display: inline-flex; align-items: center; gap: 10px; }
.rte-eng__vote {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: inherit;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: color .12s;
}
.rte-eng__vote svg { flex: none; width: 13px; height: 13px; transition: transform .12s; }
.rte-eng__vote--up:hover { color: #067647; }
.rte-eng__vote--down:hover { color: #b42318; }
.rte-eng__vote:active svg { transform: scale( .85 ); }
.rte-eng__vote:focus { outline: none; }
.rte-eng__vote:focus-visible { outline: 2px solid var( --rte-color-primary, #2563eb ); outline-offset: 3px; border-radius: 3px; }
.rte-eng__vote--up[aria-pressed="true"] { color: #067647; }
.rte-eng__vote--down[aria-pressed="true"] { color: #b42318; }
.rte-eng__vote[aria-pressed="true"] svg path { fill: currentColor; }
.rte-eng.is-busy .rte-eng__vote { opacity: .6; pointer-events: none; }
.rte-eng--page,
.rte-eng--review { font-size: 12.5px; }
.rte-eng--page .rte-eng__views,
.rte-eng--row .rte-eng__views,
.rte-eng--review .rte-eng__views { margin-right: 0; }
.rte-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; }

/* Category chips on tool + review pages (v0.31.2). Each category gets its
   own soft hue; the number is how many tools it holds. */
.rte-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.rte-cats > li { margin: 0; padding: 0; list-style: none; }
.rte-cats .rte-cat,
.rte-cats .rte-cat:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 6px 5px 10px;
	border: 1px solid hsl( var( --h, 220 ) 55% 88% );
	border-radius: 10px;
	background: hsl( var( --h, 220 ) 70% 97% );
	color: hsl( var( --h, 220 ) 40% 28% );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 1px 1px rgba( 16, 24, 40, .03 );
	transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.rte-cats .rte-cat:hover,
.rte-cats .rte-cat:focus-visible {
	border-color: hsl( var( --h, 220 ) 55% 74% );
	background: hsl( var( --h, 220 ) 70% 94% );
	color: hsl( var( --h, 220 ) 45% 22% );
	box-shadow: 0 4px 12px -6px hsl( var( --h, 220 ) 50% 40% / .35 );
	transform: translateY( -1px );
	text-decoration: none;
}
.rte-cats .rte-cat--primary,
.rte-cats .rte-cat--primary:visited { border-color: hsl( var( --h, 220 ) 55% 70% ); box-shadow: inset 0 0 0 1px hsl( var( --h, 220 ) 55% 70% ); }
.rte-cat--primary .rte-cat__dot { border-radius: 50%; box-shadow: 0 0 0 2px hsl( var( --h, 220 ) 65% 85% ); }
.rte-cat__dot { flex: none; width: 7px; height: 7px; border-radius: 2px; background: hsl( var( --h, 220 ) 65% 52% ); }
.rte-cat__n {
	min-width: 20px;
	padding: 2px 6px;
	border-radius: 6px;
	background: #fff;
	color: hsl( var( --h, 220 ) 25% 45% );
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.rte-rv[data-hero-style="solid"] .rte-cats .rte-cat { border-color: rgba( 255, 255, 255, .35 ); background: rgba( 255, 255, 255, .14 ); color: inherit; }
.rte-rv[data-hero-style="solid"] .rte-cat__n { background: rgba( 255, 255, 255, .2 ); color: inherit; }

/* SaaS button sizing (v0.31.3). Fixed px sizes so a theme's root font size
   or its generic `button` / `.entry-content a` rules (uppercase, 18px,
   letter-spacing, tall line-height) can't blow plugin buttons up. Each
   button keeps its own colours; only type and box metrics are pinned. */
.rte-lw-btn,
.rte-listing-btn,
.rte-rv-btn,
.rte-btn,
.rte-dir-btn,
.rte-dir-search__btn,
.rte-ad-pkg__cta,
.rte-promo__cta,
.rte-review-profile__cta {
	font-size: var( --rte-btn-fs, 14px ) !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-family: inherit;
	box-sizing: border-box;
}
.rte-rv-railcta .rte-rv-btn { --rte-btn-fs: 13px; --rte-btn-py: 8px; --rte-btn-px: 14px; }
/* Link-styled buttons: themes often pad/size `.entry-content a`. */
a.rte-listing-btn,
a.rte-rv-btn,
a.rte-btn,
a.rte-ad-pkg__cta,
a.rte-promo__cta,
a.rte-review-profile__cta,
a.rte-lw-btn {
	padding: var( --rte-btn-py, 9px ) var( --rte-btn-px, 16px ) !important;
	min-height: 38px;
	text-decoration: none !important;
}

/* Award pills on a winner's tool page (v0.32.0). */
.rte-award-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.rte-award-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #eef2ff, #f5f3ff );
	box-shadow: inset 0 0 0 1px #c7d2fe;
	color: #3730a3;
	font-size: 12px;
	line-height: 1.3;
}
.rte-award-pill strong { font-weight: 700; }
.rte-award-pill--month { background: linear-gradient( 90deg, #ecfeff, #f0fdfa ); box-shadow: inset 0 0 0 1px #99f6e4; color: #115e59; }
.rte-award-pill--year { background: linear-gradient( 90deg, #fffbeb, #fff1f2 ); box-shadow: inset 0 0 0 1px #fcd34d; color: #92400e; }
.rte-award-pill .rte-trophy { flex: none; }