/**
 * Design tokens.
 *
 * Extracted from the source site's style.css, where the same values were
 * repeated across 75KB of rules. Everything downstream reads these
 * variables, so a Customizer change rewrites one declaration block instead
 * of a stylesheet — see inc/dynamic-css.php.
 *
 * Do not add component styles to this file.
 */

:root {
	/* --- Surfaces (source: #0f0f0f -> #3e3e3e greyscale ramp) ---------- */
	--wpx-bg:            #0f0f0f;
	--wpx-surface-1:     #121212;
	--wpx-surface-2:     #191919;
	--wpx-surface-3:     #242424;
	--wpx-surface-4:     #2b2b2b;
	--wpx-border:        #333333;
	--wpx-border-strong: #3e3e3e;

	/* --- Text ---------------------------------------------------------- */
	--wpx-text:          #ffffff;
	--wpx-text-muted:    #cccccc;
	--wpx-text-dim:      #8a8a8a;

	/* --- Brand (source accent #e74c3c, secondary #e67e22) -------------- */
	--wpx-accent:        #e74c3c;
	--wpx-accent-hover:  #ff6152;
	--wpx-accent-ink:    #ffffff;
	--wpx-secondary:     #e67e22;
	--wpx-success:       #27ae60;

	/* --- Type ---------------------------------------------------------- */
	--wpx-font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wpx-font-heading: var(--wpx-font-body);
	--wpx-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Fluid scale: readable at 360px, comfortable at 1600px, no media
	   query needed. The source site had a single 768px breakpoint and
	   broke everywhere between. */
	--wpx-text-xs:  clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
	--wpx-text-sm:  clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem);
	--wpx-text-base:clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
	--wpx-text-lg:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--wpx-text-xl:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--wpx-text-2xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
	--wpx-text-3xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);

	--wpx-weight-normal: 400;
	--wpx-weight-medium: 600;
	--wpx-weight-bold:   700;

	--wpx-leading-tight: 1.25;
	--wpx-leading-base:  1.6;

	/* --- Space (4px base) ---------------------------------------------- */
	--wpx-space-1:  0.25rem;
	--wpx-space-2:  0.5rem;
	--wpx-space-3:  0.75rem;
	--wpx-space-4:  1rem;
	--wpx-space-5:  1.5rem;
	--wpx-space-6:  2rem;
	--wpx-space-7:  3rem;
	--wpx-space-8:  4rem;

	/* --- Layout (overwritten by the Customizer container control) ------ */
	--wpx-container:     1200px;
	--wpx-sidebar-width: 300px;
	--wpx-gutter:        var(--wpx-space-5);
	--wpx-card-min:      170px;

	/* --- Shape --------------------------------------------------------- */
	--wpx-radius-sm: 3px;
	--wpx-radius:    6px;
	--wpx-radius-lg: 12px;
	--wpx-radius-pill: 999px;

	/* --- Elevation ----------------------------------------------------- */
	--wpx-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
	--wpx-shadow:    0 4px 14px rgb(0 0 0 / 0.45);
	--wpx-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
	--wpx-shadow-accent: 0 6px 20px rgb(231 76 60 / 0.35);

	/* --- Motion -------------------------------------------------------- */
	--wpx-duration:  250ms;
	--wpx-ease:      cubic-bezier(0.4, 0, 0.2, 1);
	--wpx-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--wpx-transition: var(--wpx-duration) var(--wpx-ease);

	/* --- Depth --------------------------------------------------------- */
	--wpx-z-dropdown: 100;
	--wpx-z-sticky:   200;
	--wpx-z-overlay:  900;
	--wpx-z-modal:    1000;
}

/*
 * Light scheme. The source site was dark only; this exists so a second site
 * built on the framework does not need a fork.
 */
[data-wpx-scheme="light"] {
	--wpx-bg:            #f5f5f7;
	--wpx-surface-1:     #ffffff;
	--wpx-surface-2:     #f0f0f2;
	--wpx-surface-3:     #e6e6ea;
	--wpx-surface-4:     #dcdce2;
	--wpx-border:        #d8d8de;
	--wpx-border-strong: #c4c4cc;
	--wpx-text:          #16161a;
	--wpx-text-muted:    #4a4a52;
	--wpx-text-dim:      #74747e;
	--wpx-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
	--wpx-shadow:    0 4px 14px rgb(0 0 0 / 0.08);
	--wpx-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
}

/*
 * Motion is a preference, not a decoration. Honoured both when the visitor
 * has asked the OS to reduce motion and when the site owner turns animation
 * off in the Customizer.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--wpx-duration: 1ms;
	}
}

.wpx-motion-off {
	--wpx-duration: 1ms;
}