/**
 * Grafter Design System
 *
 * @package Grafter_Theme
 */

:root {
	/* Colour */
	--grafter-bg: #232323;
	--grafter-bg-card: #3a3a3a;
	--grafter-bg-card-hover: #454545;
	--grafter-yellow: #f2d000;
	--grafter-yellow-hover: #e0c000;
	--grafter-yellow-active: #d4b600;
	--grafter-white: #ffffff;
	--grafter-white-hover: #f2f2f2;
	--grafter-text: #ffffff;
	--grafter-text-muted: #8a8a8a;
	--grafter-text-dark: #232323;
	--grafter-border: #ffffff;
	--grafter-border-muted: rgba(255, 255, 255, 0.55);
	--grafter-input-bg: transparent;
	--grafter-error: #ff8f8f;

	/* Shape */
	--grafter-skew: -15deg;
	--grafter-radius: 0;

	/* Font */
	--grafter-font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--grafter-fw-light: 300;
	--grafter-fw-regular: 400;
	--grafter-fw-medium: 500;
	--grafter-fw-semibold: 600;
	--grafter-fw-bold: 700;

	/* Type scale */
	--grafter-text-xs: 0.6875rem;
	--grafter-text-sm: 0.75rem;
	--grafter-text-base: 0.9375rem;
	--grafter-text-md: 1rem;
	--grafter-text-lg: 1.0625rem;
	--grafter-text-xl: 1.125rem;
	--grafter-text-wordmark: 1.875rem;

	/* Line height */
	--grafter-leading-none: 1;
	--grafter-leading-tight: 1.2;
	--grafter-leading-snug: 1.35;
	--grafter-leading-normal: 1.5;
	--grafter-leading-relaxed: 1.65;

	/* Letter spacing */
	--grafter-tracking-wordmark: 0.22em;
	--grafter-tracking-tight: -0.01em;
	--grafter-tracking-normal: 0;
	--grafter-tracking-wide: 0.04em;

	/* Spacing */
	--grafter-space-2xs: 0.25rem;
	--grafter-space-xs: 0.5rem;
	--grafter-space-sm: 0.75rem;
	--grafter-space-md: 1rem;
	--grafter-space-lg: 1.5rem;
	--grafter-space-xl: 2rem;
	--grafter-space-2xl: 2.5rem;
	--grafter-space-3xl: 3.5rem;
	--grafter-space-4xl: 4.5rem;

	/* Inputs */
	--grafter-input-font-size: var(--grafter-text-sm);
	--grafter-input-font-size-ios: 1rem;
	--grafter-input-height: 3rem;
	--grafter-input-padding-x: 1rem;
	--grafter-input-gap: 0.625rem;

	/* Buttons */
	--grafter-btn-font-size: var(--grafter-text-base);
	--grafter-btn-font-weight: var(--grafter-fw-semibold);
	--grafter-btn-padding-y: 0.9375rem;
	--grafter-btn-padding-x: 2.875rem;
	--grafter-btn-min-width: 14.5rem;
	--grafter-btn-transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;

	/* Yellow (primary) */
	--grafter-btn-primary-bg: var(--grafter-yellow);
	--grafter-btn-primary-bg-hover: var(--grafter-yellow-hover);
	--grafter-btn-primary-bg-active: var(--grafter-yellow-active);
	--grafter-btn-primary-color: var(--grafter-text-dark);

	/* White (secondary) */
	--grafter-btn-secondary-bg: var(--grafter-white);
	--grafter-btn-secondary-bg-hover: var(--grafter-yellow);
	--grafter-btn-secondary-bg-active: var(--grafter-yellow-hover);
	--grafter-btn-secondary-color: var(--grafter-text-dark);
	--grafter-btn-secondary-color-hover: var(--grafter-text-dark);

	/* Ghost — upload photo, upload cover, logout */
	--grafter-btn-ghost-bg: var(--grafter-bg-card);
	--grafter-btn-ghost-bg-hover: var(--grafter-bg-card-hover);
	--grafter-btn-ghost-color: var(--grafter-white);
	--grafter-btn-upload-min-width: 12.5rem;

	/* Auth shell */
	--grafter-auth-logo-size: 4rem;
	--grafter-auth-logo-wordmark-gap: var(--grafter-space-lg);
	--grafter-auth-logo-content-gap: var(--grafter-space-xl);
	--grafter-auth-shell-padding-x: var(--grafter-space-lg);
	--grafter-auth-shell-padding-top: var(--grafter-space-xl);
	--grafter-auth-shell-padding-bottom: var(--grafter-space-lg);
	--grafter-auth-step-head-size: var(--grafter-text-md);
	--grafter-auth-step-head-weight: var(--grafter-fw-regular);
	--grafter-auth-step-subhead-size: var(--grafter-text-sm);
	--grafter-auth-step-head-gap: var(--grafter-space-sm);
	--grafter-auth-step-subhead-gap: var(--grafter-space-lg);

	/* Option cards */
	--grafter-option-title-size: var(--grafter-text-sm);
	--grafter-option-title-weight: var(--grafter-fw-regular);
	--grafter-option-desc-size: var(--grafter-text-xs);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body.grafter-platform {
	margin: 0;
	font-family: var(--grafter-font);
	font-size: var(--grafter-text-base);
	font-weight: var(--grafter-fw-regular);
	line-height: var(--grafter-leading-normal);
	color: var(--grafter-text);
	background-color: var(--grafter-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Typography */

.grafter-text-wordmark {
	margin: 0;
	font-family: var(--grafter-font);
	font-size: var(--grafter-text-wordmark);
	font-weight: var(--grafter-fw-light);
	line-height: var(--grafter-leading-none);
	letter-spacing: var(--grafter-tracking-wordmark);
	color: var(--grafter-yellow);
	text-transform: lowercase;
}

.grafter-text-tagline {
	margin: 0;
	font-size: var(--grafter-text-sm);
	font-weight: var(--grafter-fw-light);
	line-height: var(--grafter-leading-normal);
	letter-spacing: var(--grafter-tracking-wide);
	color: var(--grafter-white);
	text-transform: lowercase;
}

.grafter-text-step-context {
	margin: 0 0 var(--grafter-auth-step-head-gap);
	font-size: var(--grafter-auth-step-head-size);
	font-weight: var(--grafter-auth-step-head-weight);
	line-height: var(--grafter-leading-snug);
	color: var(--grafter-white);
	text-transform: lowercase;
	text-align: center;
}

.grafter-text-step-title {
	margin: 0 0 var(--grafter-auth-step-subhead-gap);
	font-size: var(--grafter-auth-step-subhead-size);
	font-weight: var(--grafter-fw-regular);
	line-height: var(--grafter-leading-normal);
	color: var(--grafter-white);
	text-transform: lowercase;
	text-align: center;
}

.grafter-text-step-title--solo {
	margin-top: 0;
	margin-bottom: var(--grafter-auth-step-subhead-gap);
	font-size: var(--grafter-auth-step-head-size);
	font-weight: var(--grafter-auth-step-head-weight);
	line-height: var(--grafter-leading-snug);
}

.grafter-text-step-title--after-user {
	margin-top: 0;
	margin-bottom: var(--grafter-space-sm);
}

.grafter-text-subtitle {
	margin: 0 0 var(--grafter-space-md);
	font-size: var(--grafter-text-sm);
	font-weight: var(--grafter-fw-light);
	line-height: var(--grafter-leading-normal);
	color: var(--grafter-text-muted);
	text-transform: lowercase;
	text-align: center;
}

.grafter-text-prompt {
	margin: 0 0 var(--grafter-space-sm);
	font-size: var(--grafter-text-sm);
	font-weight: var(--grafter-fw-light);
	line-height: var(--grafter-leading-normal);
	color: var(--grafter-yellow);
	text-transform: lowercase;
	text-align: center;
}

button.grafter-text-prompt--action {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.grafter-text-user-name {
	margin: 0;
	font-size: var(--grafter-auth-step-head-size);
	font-weight: var(--grafter-auth-step-head-weight);
	line-height: var(--grafter-leading-snug);
	letter-spacing: var(--grafter-tracking-tight);
	color: var(--grafter-yellow);
	text-transform: lowercase;
}

.grafter-text-link {
	font-family: inherit;
	font-size: var(--grafter-text-sm);
	font-weight: var(--grafter-fw-regular);
	color: var(--grafter-yellow);
	text-transform: lowercase;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--grafter-space-sm) 0 0;
}

.grafter-text-link--inline {
	display: inline-block;
	padding: var(--grafter-space-xs) 0;
	line-height: var(--grafter-leading-normal);
}

.grafter-text-error {
	font-size: var(--grafter-text-sm);
	font-weight: var(--grafter-fw-regular);
	line-height: var(--grafter-leading-normal);
}

/* Buttons */

.grafter-slant-btn {
	display: inline-block;
	transform: skewX(var(--grafter-skew));
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--grafter-font);
	transition: var(--grafter-btn-transition);
}

a.grafter-slant-btn {
	color: inherit;
}

.grafter-slant-btn__inner {
	display: block;
	transform: skewX(calc(var(--grafter-skew) * -1));
	padding: var(--grafter-btn-padding-y) var(--grafter-btn-padding-x);
	min-width: var(--grafter-btn-min-width);
	font-family: inherit;
	font-size: var(--grafter-btn-font-size);
	font-weight: var(--grafter-btn-font-weight);
	line-height: var(--grafter-leading-tight);
	text-transform: lowercase;
	white-space: nowrap;
	text-align: center;
}

/* Yellow — primary CTA */
.grafter-slant-btn--primary {
	background-color: var(--grafter-btn-primary-bg);
	color: var(--grafter-btn-primary-color);
}

.grafter-slant-btn--primary:hover:not(:disabled),
.grafter-slant-btn--primary:focus-visible:not(:disabled) {
	background-color: var(--grafter-btn-primary-bg-hover);
}

.grafter-slant-btn--primary:active:not(:disabled) {
	background-color: var(--grafter-btn-primary-bg-active);
}

/* White — secondary CTA */
.grafter-slant-btn--secondary {
	background-color: var(--grafter-btn-secondary-bg);
	color: var(--grafter-btn-secondary-color);
}

.grafter-slant-btn--secondary:hover:not(:disabled),
.grafter-slant-btn--secondary:focus-visible:not(:disabled) {
	background-color: var(--grafter-btn-secondary-bg-hover);
	color: var(--grafter-btn-secondary-color-hover);
}

.grafter-slant-btn--secondary:active:not(:disabled) {
	background-color: var(--grafter-btn-secondary-bg-active);
}

/* Ghost — low emphasis */
.grafter-slant-btn--ghost {
	background-color: var(--grafter-btn-ghost-bg, var(--grafter-bg-card));
	color: var(--grafter-btn-ghost-color, var(--grafter-white));
}

.grafter-slant-btn--ghost:hover:not(:disabled),
.grafter-slant-btn--ghost:focus-visible:not(:disabled) {
	background-color: var(--grafter-btn-ghost-bg-hover, var(--grafter-bg-card-hover));
}

.grafter-slant-btn:focus-visible {
	outline: 2px solid var(--grafter-yellow);
	outline-offset: 3px;
}

.grafter-slant-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Form controls */

.grafter-field {
	width: 100%;
}

.grafter-field__error {
	margin: var(--grafter-space-xs) 0 0;
	font-size: var(--grafter-text-xs);
	font-weight: var(--grafter-fw-regular);
	line-height: var(--grafter-leading-normal);
	color: var(--grafter-error);
	text-align: center;
	text-transform: lowercase;
}

.grafter-input,
.grafter-textarea,
.grafter-select {
	font-family: var(--grafter-font);
	font-size: var(--grafter-input-font-size);
	font-weight: var(--grafter-fw-regular);
	line-height: var(--grafter-leading-normal);
	background: var(--grafter-input-bg);
	border: 1px solid var(--grafter-border);
	border-radius: var(--grafter-radius);
	outline: none;
	transition: border-color 0.2s ease;
}

.grafter-input::placeholder,
.grafter-textarea::placeholder {
	color: var(--grafter-text-muted);
	font-size: var(--grafter-input-font-size);
	font-weight: var(--grafter-fw-regular);
}

.grafter-input {
	width: 100%;
	height: var(--grafter-input-height);
	padding: 0 var(--grafter-input-padding-x);
	color: var(--grafter-white);
	text-align: center;
	text-transform: lowercase;
}

.grafter-input::placeholder {
	text-transform: lowercase;
}

.grafter-input--preserve-case,
.grafter-input--preserve-case::placeholder {
	text-transform: none;
}

.grafter-input:focus,
.grafter-input--valid {
	border-color: var(--grafter-yellow);
}

.grafter-input--error {
	border-color: var(--grafter-error);
}

.grafter-textarea {
	width: 100%;
	min-height: 8.5rem;
	padding: var(--grafter-space-sm) var(--grafter-input-padding-x);
	color: var(--grafter-white);
	text-transform: none;
	resize: vertical;
}

.grafter-textarea::placeholder {
	text-transform: lowercase;
}

.grafter-textarea:focus {
	border-color: var(--grafter-yellow);
}

.grafter-textarea--error {
	border-color: var(--grafter-error);
}

.grafter-select {
	width: 100%;
	height: var(--grafter-input-height);
	padding: 0 2.5rem 0 var(--grafter-input-padding-x);
	color: var(--grafter-text-muted);
	text-transform: lowercase;
	appearance: none;
	background-color: var(--grafter-input-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

.grafter-select:focus,
.grafter-select--selected {
	border-color: var(--grafter-yellow);
	color: var(--grafter-white);
}

.grafter-select--error {
	border-color: var(--grafter-error);
}

.grafter-select option {
	color: var(--grafter-text-dark);
}

/* Option cards */

.grafter-option-card {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: var(--grafter-space-sm);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--grafter-font);
}

.grafter-option-card__shape {
	display: block;
	transform: skewX(var(--grafter-skew));
	background: var(--grafter-bg-card);
	transition: background-color 0.2s ease;
}

.grafter-option-card--active .grafter-option-card__shape {
	background: var(--grafter-yellow);
}

.grafter-option-card__inner {
	transform: skewX(calc(var(--grafter-skew) * -1));
	display: flex;
	align-items: flex-start;
	gap: var(--grafter-space-md);
	width: 100%;
	padding: 1.0625rem 1.375rem;
}

.grafter-option-card--active .grafter-option-card__title,
.grafter-option-card--active .grafter-option-card__desc,
.grafter-option-card--active .grafter-option-card__icon {
	color: var(--grafter-text-dark);
}

.grafter-option-card__icon {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	color: var(--grafter-yellow);
}

.grafter-option-card__title {
	margin: 0 0 var(--grafter-space-2xs);
	font-size: var(--grafter-option-title-size);
	font-weight: var(--grafter-option-title-weight);
	line-height: var(--grafter-leading-snug);
	text-transform: lowercase;
	color: var(--grafter-white);
}

.grafter-option-card__desc {
	margin: 0;
	font-size: var(--grafter-option-desc-size);
	font-weight: var(--grafter-fw-light);
	line-height: var(--grafter-leading-relaxed);
	color: var(--grafter-white);
	opacity: 0.9;
}

.grafter-option-card--centered {
	text-align: center;
}

.grafter-option-card--centered .grafter-option-card__inner {
	justify-content: center;
	align-items: center;
	gap: var(--grafter-space-sm);
	padding: 1.125rem var(--grafter-space-lg);
	min-height: 3.5rem;
}

.grafter-option-card--centered .grafter-option-card__icon {
	width: 1.5rem;
	height: 1.5rem;
}

.grafter-option-card--centered .grafter-option-card__title {
	margin: 0;
}

/* Skill tags */

.grafter-skill-tag {
	display: inline-block;
	padding: 0.375rem 0.6875rem;
	border: none;
	cursor: pointer;
	background: var(--grafter-bg-card);
	font-family: var(--grafter-font);
	font-size: var(--grafter-text-sm);
	font-weight: var(--grafter-fw-regular);
	line-height: var(--grafter-leading-tight);
	color: var(--grafter-white);
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.grafter-skill-tag--active {
	background: var(--grafter-yellow);
	color: var(--grafter-text-dark);
}

/* Step alerts */

.grafter-step-alert {
	margin: 0 0 var(--grafter-space-md);
	padding: 0;
	font-size: var(--grafter-text-xs);
	font-weight: var(--grafter-fw-regular);
	line-height: var(--grafter-leading-normal);
	color: var(--grafter-error);
	text-align: center;
	text-transform: lowercase;
}