/**
 * WorkScout Resume Suite — shared brand tokens.
 *
 * Pulled from the live WorkScout child theme (biggoldwell.com): deep green
 * primary, gold accent, navy ink, Poppins. Every new front-end feature in
 * this plugin (salary calculator, skill quiz, builder intro) loads this file
 * first and then only styles its own layout, so a theme colour change is a
 * one-line edit here instead of a hunt through six stylesheets.
 *
 * Every token can be overridden from the child theme by redeclaring it on
 * :root with the same name — no need to touch this file.
 */
:root {
	--wrpd-green:       #0a462f;
	--wrpd-green-dark:  #06301f;
	--wrpd-green-mid:   #146c49;
	--wrpd-green-soft:  #e9f2ed;
	--wrpd-gold:        #fee498;
	--wrpd-gold-deep:   #d5a521;
	--wrpd-gold-soft:   #fff8e6;
	--wrpd-navy:        #011c36;
	--wrpd-ink:         #16232e;
	--wrpd-body:        #46586a;
	--wrpd-muted:       #7b8c9c;
	--wrpd-line:        #e2e9ef;
	--wrpd-line-soft:   #eef3f7;
	--wrpd-bg:          #f6f9fb;
	--wrpd-white:       #ffffff;
	--wrpd-success:     #17845c;
	--wrpd-warning:     #c98a12;
	--wrpd-danger:      #c0392b;

	--wrpd-radius:      14px;
	--wrpd-radius-lg:   22px;
	--wrpd-radius-pill: 999px;
	--wrpd-shadow:      0 10px 30px rgba(1, 28, 54, .08);
	--wrpd-shadow-lg:   0 22px 55px rgba(1, 28, 54, .14);
	--wrpd-font:        "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wrpd-serif:       Georgia, "Times New Roman", serif;
}

/* Shared primitives. Scoped to .wrpd-app so they can never leak into the
   theme's own markup — every feature wrapper carries this class. */
.wrpd-app,
.wrpd-app *,
.wrpd-app *::before,
.wrpd-app *::after { box-sizing: border-box; }

.wrpd-app {
	font-family: var(--wrpd-font);
	color: var(--wrpd-ink);
	line-height: 1.6;
}

.wrpd-app .wrpd-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wrpd-green-mid);
}
.wrpd-app .wrpd-eyebrow::before {
	content: ""; width: 22px; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--wrpd-green), var(--wrpd-gold-deep));
}

.wrpd-app .wrpd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	border: 1px solid transparent; border-radius: 10px;
	padding: 13px 24px;
	font: inherit; font-weight: 600; font-size: 15px;
	text-decoration: none; cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.wrpd-app .wrpd-btn:hover { transform: translateY(-2px); }
.wrpd-app .wrpd-btn:disabled,
.wrpd-app .wrpd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.wrpd-app .wrpd-btn-primary {
	background: linear-gradient(135deg, var(--wrpd-green), var(--wrpd-green-mid));
	color: #fff; box-shadow: 0 10px 24px rgba(10, 70, 47, .26);
}
.wrpd-app .wrpd-btn-primary:hover { color: #fff; box-shadow: 0 16px 32px rgba(10, 70, 47, .32); }
.wrpd-app .wrpd-btn-gold {
	background: linear-gradient(135deg, var(--wrpd-gold), var(--wrpd-gold-deep));
	color: var(--wrpd-navy); box-shadow: 0 10px 24px rgba(213, 165, 33, .3);
}
.wrpd-app .wrpd-btn-gold:hover { color: var(--wrpd-navy); }
.wrpd-app .wrpd-btn-ghost {
	background: #fff; border-color: var(--wrpd-line); color: var(--wrpd-green);
}
.wrpd-app .wrpd-btn-ghost:hover { border-color: var(--wrpd-green); color: var(--wrpd-green); }

.wrpd-app .wrpd-card {
	background: #fff; border: 1px solid var(--wrpd-line);
	border-radius: var(--wrpd-radius); box-shadow: var(--wrpd-shadow);
}

.wrpd-app .wrpd-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--wrpd-green-soft); color: var(--wrpd-green);
	border-radius: var(--wrpd-radius-pill); padding: 6px 12px;
	font-size: 12px; font-weight: 600;
}

/* Everything that animates in this plugin honours the OS "reduce motion"
   setting — resume/quiz pages are used by people on assistive tech too. */
@media (prefers-reduced-motion: reduce) {
	.wrpd-app *,
	.wrpd-app *::before,
	.wrpd-app *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}