/* Feature-ID: UI-SYSTEM-V1 -- shared design tokens. */
:root {
	--ui-bg: #080808;
	--ui-surface: #151515;
	--ui-surface-hover: #262626;
	--ui-surface-active: #333333;
	--ui-border: #2d2d2d;
	--ui-border-strong: #454545;
	--ui-text: #f5f5f5;
	--ui-text-secondary: #cccccc;
	--ui-text-muted: #999999;
	--ui-text-disabled: #6f6f6f;
	--ui-accent: var(--wpst-main-color, #ef4b88);

	/* Feature-ID: UI-SYSTEM-V2 -- Relative type scale for shared UI surfaces. */
	--ui-font-family-body: Arial, Helvetica, sans-serif;
	--ui-font-size-h1: 1.25rem;
	--ui-font-size-h1-mobile: 1.125rem;
	--ui-font-size-h2: 1.25rem;
	--ui-font-size-h2-mobile: 1.125rem;
	--ui-font-size-h3: 0.9375rem;
	--ui-font-size-body: 0.875rem;
	--ui-font-size-meta: 0.875rem;
	--ui-font-size-button: 0.875rem;
	--ui-font-size-tag: var(--ui-font-size-body);
	--ui-font-size-tab: var(--ui-font-size-body);
	--ui-font-size-caption: 0.75rem;
	--ui-font-size-page-title: 1.75rem;
	--ui-font-size-page-title-mobile: 1.5rem;
	--ui-font-size-section-title: 1.25rem;
	--ui-font-size-section-title-mobile: 1.125rem;
	--ui-font-size-card-title: 0.875rem;
	--ui-font-size-card-title-mobile: 0.875rem;
	--ui-font-size-card-meta: 0.75rem;
	--ui-font-size-filter: 0.875rem;
	/* Feature-ID: UI-TYPOGRAPHY-SCALE-001 -- Semantic aliases for the
	 * shared 12/14/15/18/20/24px scale. */
	--ui-font-size-xs: 0.75rem;
	--ui-font-size-sm: 0.875rem;
	--ui-font-size-md: 0.9375rem;
	--ui-font-size-lg: 1.125rem;
	--ui-font-size-xl: 1.25rem;
	--ui-font-size-2xl: 1.5rem;
	--ui-font-weight-regular: 400;
	--ui-font-weight-medium: 500;
	--ui-font-weight-semibold: 600;
	--ui-font-weight-bold: 700;
	--ui-line-tight: 1.15;
	--ui-line-title: 1.25;
	--ui-line-card: 1.35;
	--ui-line-meta: 1.35;
	--ui-card-title-min-height: 2.7em;

	--ui-space-1: 4px;
	--ui-space-2: 8px;
	--ui-space-3: 12px;
	--ui-space-4: 16px;
	--ui-space-5: 20px;
	--ui-space-6: 24px;
	--ui-space-8: 32px;
	--ui-card-copy-gap: 0.2rem;
	--ui-card-meta-gap: 0.35rem;
	/* Feature-ID: GRAPH-CARD-INSET-001 -- Shared breathing room between
	 * graph-card frames and their media/copy contents. */
	--ui-card-frame-inset: 10px;
	/* Feature-ID: CARD-GRID-SPACING-001 -- One responsive rhythm for all
	 * public card-list rows and columns. */
	--ui-card-grid-gap: clamp(12px, 1.5vw, 20px);
	--ui-section-title-gap: 0.5rem;
	/* Feature-ID: UI-SECTION-SPACING-001 -- Shared first-section, section
	 * rhythm, and heading-to-content spacing for every page surface. */
	--ui-first-section-top-gap: 0;
	--ui-section-upper-gap: var(--ui-space-6);
	--ui-section-content-gap: var(--ui-section-title-gap);
	--ui-tab-content-gap: var(--ui-space-3);
	--ui-section-section-gap: var(--ui-section-content-gap);
	/* Feature-ID: BODY-COPY-SYSTEM-001 -- Shared prose spacing. */
	--ui-body-copy-paragraph-gap: 0.75rem;
	--ui-body-copy-section-gap: 1.25rem;

	--ui-radius-sm: 4px;
	--ui-radius-md: 8px;
	--ui-radius-lg: 12px;
	--ui-radius-pill: 999px;

	--ui-control-height: 44px;
	--ui-icon-box: 24px;
	--ui-icon-size: 20px;
}