/**
 * Saratoga Sparks — design tokens + shared utilities
 *
 * Override in theme or Customizer CSS, e.g.:
 *   :root { --sspks-accent: #1a4d8c; }
 */

:root {
	--sspks-accent: #0d5bd4;
	--sspks-accent-hover: #0a49ad;
	--sspks-accent-soft: rgba(13, 91, 212, 0.14);
	--sspks-accent-softer: rgba(13, 91, 212, 0.08);
	--sspks-ink: #0f1419;
	--sspks-ink-muted: #3d4f5c;
	--sspks-ink-soft: #5c6e7a;
	--sspks-ink-faint: rgba(15, 20, 25, 0.45);
	--sspks-border: rgba(15, 20, 25, 0.1);
	--sspks-border-strong: rgba(15, 20, 25, 0.14);
	--sspks-surface: #ffffff;
	--sspks-surface-muted: #f4f6f8;
	--sspks-surface-raised: #fafbfc;
	--sspks-radius-sm: 8px;
	--sspks-radius-md: 12px;
	--sspks-radius-lg: 14px;
	--sspks-radius-xl: 18px;
	--sspks-radius-pill: 999px;
	--sspks-shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.05);
	--sspks-shadow-sm: 0 1px 3px rgba(15, 20, 25, 0.06), 0 2px 10px rgba(15, 20, 25, 0.04);
	--sspks-shadow-md: 0 4px 12px rgba(15, 20, 25, 0.07), 0 12px 32px rgba(15, 20, 25, 0.08);
	--sspks-shadow-nav: 0 2px 16px rgba(15, 20, 25, 0.06);
	--sspks-shadow-nav-fixed: 0 4px 24px rgba(15, 20, 25, 0.08);
	--sspks-shadow-mega: 0 20px 50px rgba(15, 20, 25, 0.12);
	--sspks-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--sspks-font-serif: "Lora", Georgia, "Times New Roman", serif;
	--sspks-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sspks-duration: 0.2s;
}

/* Consistent rendering for plugin UI */
.sspks-site-nav-root,
.sspks-post-grid,
.sspks-newsfeed,
.sspks-single-post-meta,
.sspks-related-sidebar,
.sspks-event-card,
.sspks-simple-footer {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
 * Buttons (.sspks-button)
 * ------------------------------------------------------------------------- */

.sspks-button {
	display: inline-block;
	padding: 0.55em 1.15em;
	font-family: var(--sspks-font-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.25;
	text-decoration: none;
	color: var(--sspks-surface);
	background: var(--sspks-accent);
	border-radius: var(--sspks-radius-sm);
	border: 1px solid transparent;
	box-shadow: var(--sspks-shadow-xs);
	transition:
		background var(--sspks-duration) var(--sspks-ease),
		color var(--sspks-duration) var(--sspks-ease),
		box-shadow var(--sspks-duration) var(--sspks-ease),
		transform 0.12s var(--sspks-ease);
}

.sspks-button:hover,
.sspks-button:focus-visible {
	color: var(--sspks-surface);
	background: var(--sspks-accent-hover);
	text-decoration: none;
	box-shadow: var(--sspks-shadow-sm);
	outline: none;
}

.sspks-button:focus-visible {
	outline: 2px solid var(--sspks-accent);
	outline-offset: 2px;
}

.sspks-button:active {
	transform: translateY(1px);
}

.sspks-button.is-large {
	padding: 0.72em 1.4em;
	font-size: 1.025rem;
	border-radius: var(--sspks-radius-md);
}

/* Outline variant when .is-outline is used alongside (optional utility) */
.sspks-button.is-outline {
	color: var(--sspks-accent);
	background: var(--sspks-surface);
	border-color: var(--sspks-border-strong);
	box-shadow: none;
}

.sspks-button.is-outline:hover,
.sspks-button.is-outline:focus-visible {
	color: var(--sspks-accent-hover);
	background: var(--sspks-accent-soft);
	border-color: var(--sspks-accent);
}