/**
 * Capa base. Consume las custom properties de JWA_Skins::render_css().
 *
 * @package JWA
 * @author  JW Affiliates <support@jwaffiliates.com>
 */

:root {
	--jwa-step-0: 1rem;
	--jwa-step-1: calc(var(--jwa-step-0) * var(--jwa-scale-ratio));
	--jwa-step-2: calc(var(--jwa-step-1) * var(--jwa-scale-ratio));
	--jwa-step-3: calc(var(--jwa-step-2) * var(--jwa-scale-ratio));
	--jwa-step-4: calc(var(--jwa-step-3) * var(--jwa-scale-ratio));
	--jwa-step--1: max(0.78rem, calc(var(--jwa-step-0) / var(--jwa-scale-ratio)));

	--jwa-space-1: 0.25rem;
	--jwa-space-2: 0.5rem;
	--jwa-space-3: 0.75rem;
	--jwa-space-4: 1rem;
	--jwa-space-6: 1.5rem;
	--jwa-space-8: 2rem;
	--jwa-space-12: 3rem;
}

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

[hidden] {
	display: none !important;
}

body {
	background-color: var(--jwa-bg);
	background-image:
		radial-gradient(ellipse at 10% 0%, rgba(var(--jwa-primary-rgb) / 0.14) 0%, transparent 50%),
		radial-gradient(ellipse at 90% 100%, rgba(var(--jwa-accent-rgb) / 0.06) 0%, transparent 50%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--jwa-text);
	font-family: var(--jwa-font-ui);
	font-size: var(--jwa-step-0);
	line-height: 1.6;
}

.jwa-scheme-light body,
body.jwa-scheme-light {
	background-image:
		radial-gradient(ellipse at 10% 0%, rgba(var(--jwa-primary-rgb) / 0.06) 0%, transparent 50%),
		radial-gradient(ellipse at 90% 100%, rgba(var(--jwa-accent-rgb) / 0.04) 0%, transparent 50%);
}

h1,
h2,
h3,
h4 {
	font-family: var(--jwa-font-display);
	font-weight: var(--jwa-weight-display);
	letter-spacing: var(--jwa-tracking-display);
	line-height: 1.15;
	color: var(--jwa-text);
}

h1 { font-size: var(--jwa-step-4); }
h2 { font-size: var(--jwa-step-3); }
h3 { font-size: var(--jwa-step-2); }
h4 { font-size: var(--jwa-step-1); }

p,
li {
	max-width: var(--jwa-measure);
}

small,
.jwa-meta {
	font-size: var(--jwa-step--1);
	color: var(--jwa-text-muted);
}

a {
	color: var(--jwa-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--jwa-primary-hover);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--jwa-primary);
	outline-offset: 2px;
}

.jwa-surface {
	background: var(--jwa-surface);
}

.jwa-card {
	background: var(--jwa-card);
	border: 1px solid var(--jwa-border);
	border-radius: var(--jwa-radius-lg);
	box-shadow: var(--jwa-shadow-card);
	padding: var(--jwa-space-6);
}

.jwa-card:hover {
	background: var(--jwa-card-hover);
	border-color: var(--jwa-border-strong);
}

.jwa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jwa-space-2);
	background: var(--jwa-primary);
	color: var(--jwa-primary-contrast);
	font-family: var(--jwa-font-ui);
	font-weight: 600;
	border: 0;
	border-radius: var(--jwa-radius-md);
	padding: var(--jwa-space-3) var(--jwa-space-6);
	cursor: pointer;
	text-decoration: none;
}

.jwa-btn:hover {
	background: var(--jwa-primary-hover);
	color: var(--jwa-primary-contrast);
}

.jwa-btn--accent {
	background: var(--jwa-accent);
	color: var(--jwa-accent-contrast);
}

.jwa-btn--accent:hover {
	background: var(--jwa-accent-hover);
	color: var(--jwa-accent-contrast);
}

.jwa-btn--ghost {
	background: transparent;
	color: var(--jwa-text);
	border: 1px solid var(--jwa-border-strong);
}

.jwa-rating {
	color: var(--jwa-rating);
}

.jwa-positive { color: var(--jwa-positive); }
.jwa-negative { color: var(--jwa-negative); }
.jwa-warning  { color: var(--jwa-warning); }

.jwa-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--jwa-card);
}

.jwa-table th,
.jwa-table td {
	border-bottom: 1px solid var(--jwa-border);
	padding: var(--jwa-space-3) var(--jwa-space-4);
	text-align: left;
}

.jwa-table th {
	font-family: var(--jwa-font-display);
	font-weight: var(--jwa-weight-display);
	color: var(--jwa-text-muted);
	font-size: var(--jwa-step--1);
}

.jwa-ornament-none .jwa-card {
	box-shadow: none;
}

.jwa-ornament-full .jwa-btn {
	border: 1px solid var(--jwa-border-strong);
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}