/**
 * 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 ---------------------------------------------------------- */
	/* Open Sans covers Latin, Cyrillic and Greek but has no Arabic or Urdu
	   glyphs. The Noto faces below are named before the generic fallback so
	   an Urdu or Arabic site lands on a real Nastaliq/Naskh face where one is
	   installed, instead of whatever the OS picks. */
	--wpx-font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Segoe UI Historic", Tahoma, 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;

	/* Cover proportion. Every box that holds cover art reads this, so the
	   shape is set once and the strip, the cards, the sidebar list and the
	   single-page cover all follow. Overridden by the shape body class. */
	--wpx-card-ratio: 2 / 3;
	--wpx-strip-width: 150px;

	/* --- 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;
}