/* Shared CDPLAY primitives. Keep theme.json presets in sync. */
:root {
	/* Neumorphism V2: accents and accessible text have distinct roles. */
	--cd-color-navy: #00132C;
	--cd-color-cyan: #00D0FD;
	--cd-color-link: var(--cd-color-navy);
	--cd-color-link-hover: var(--cd-color-text);
	--cd-color-error-text: #BE173D;
	--cd-color-sale-ink: var(--cd-color-navy);
	--cd-color-sale-badge: var(--cd-color-sale);
	--cd-color-surface-border: transparent;
	--cd-color-inset-border: transparent;
	--cd-color-field-border: transparent;

	--cd-color-background: #FFF9F9;
	--cd-color-surface: #FFF9F9;
	--cd-color-text: #222222;
	--cd-color-muted: #475365;
	--cd-color-accent: #008FEA;
	--cd-color-accent-hover: #008FEA;
	--cd-color-accent-active: #00132C;
	--cd-color-accent-soft: #E6F5F9;
	--cd-color-border: #B8B9C0;
	--cd-color-success: #17613f;
	--cd-color-success-soft: #e4f3eb;
	--cd-color-sale: #FD1843;
	--cd-color-sale-soft: #FFE3E7;
	--cd-color-hit: #80500c;
	--cd-color-hit-soft: #fff1d8;
	--cd-color-digital: #6340a0;
	--cd-color-digital-soft: #efe9fb;
	--cd-radius-sm: 0.75rem;
	--cd-radius-md: 1rem;
	--cd-radius-lg: 1.5rem;
	--cd-radius-pill: 999px;
	--cd-radius-card: var(--cd-radius-lg);
	--cd-radius-inner: max(var(--cd-space-1), calc(var(--cd-radius-card) - var(--cd-space-6)));
	--cd-radius-media: var(--cd-radius-inner);
	--cd-gradient-raised: linear-gradient(145deg, #ffffff 0%, #FFF9F9 65%, color-mix(in srgb, #00132C 4%, #FFF9F9) 100%);
	--cd-gradient-secondary: linear-gradient(145deg, #ffffff, #FFF9F9 55%, color-mix(in srgb, #008FEA 8%, #FFF9F9));
	--cd-gradient-primary: linear-gradient(160deg, color-mix(in srgb, var(--cd-color-navy) 90%, #FFFFFF) 0%, var(--cd-color-navy) 58%, color-mix(in srgb, var(--cd-color-navy) 88%, #000000) 100%);
	--cd-gradient-primary-hover: linear-gradient(160deg, color-mix(in srgb, var(--cd-color-navy) 84%, #FFFFFF) 0%, color-mix(in srgb, var(--cd-color-navy) 96%, #FFFFFF) 58%, var(--cd-color-navy) 100%);
	--cd-gradient-primary-active: linear-gradient(160deg, color-mix(in srgb, var(--cd-color-navy) 90%, #000000) 0%, var(--cd-color-navy) 58%, color-mix(in srgb, var(--cd-color-navy) 96%, #FFFFFF) 100%);
	--cd-gradient-pill-active: linear-gradient(145deg, color-mix(in srgb, #008FEA 10%, #FFF9F9), color-mix(in srgb, #00D0FD 6%, #FFF9F9));
	--cd-color-primary-border: color-mix(in srgb, var(--cd-color-navy) 88%, #000000);
	/* Top-left light; two raised depths, one inset and its selected state.
	 * Legacy component names below are aliases, not extra depth levels. */
	--cd-surface-base: var(--cd-color-background);
	--cd-surface-raised: var(--cd-gradient-raised);
	--cd-surface-inset: var(--cd-color-background);
	--cd-border-soft: color-mix(in srgb, var(--cd-color-border) 55%, var(--cd-color-surface));
	--cd-focus-color: #00132C;
	--cd-shadow-raised-soft: 3px 4px 10px #00132c17, -3px -3px 8px #ffffffd9, inset 0 1px 1px #ffffffcc;
	--cd-shadow-raised: 6px 7px 18px #00132c1c, -5px -5px 14px #fffffff2, inset 0 1px 1px #ffffffcc;
	--cd-shadow-inset: inset 3px 3px 7px #00132c1f, inset -3px -3px 6px #ffffffd9;
	--cd-shadow-pressed: inset 2px 3px 6px #00132c29, inset -2px -2px 4px #ffffffcc;
	--cd-shadow-surface: var(--cd-shadow-raised);
	--cd-shadow-button: var(--cd-shadow-raised-soft);
	--cd-shadow-hover: var(--cd-shadow-raised);
	--cd-shadow-primary: 3px 5px 12px color-mix(in srgb, var(--cd-color-navy) 22%, transparent), -3px -3px 9px #ffffffd9, inset 0 1px 1px #ffffff33;
	--cd-shadow-primary-hover: 4px 7px 16px color-mix(in srgb, var(--cd-color-navy) 27%, transparent), -3px -3px 10px #ffffffd9, inset 0 1px 1px #ffffff40;
	--cd-shadow-primary-inset: inset 2px 3px 7px #00000059, inset -1px -1px 2px #ffffff1f;
	--cd-shadow-icon: var(--cd-shadow-raised-soft);
	--cd-shadow-pill: var(--cd-shadow-raised-soft);
	--cd-shadow-pill-active: var(--cd-shadow-pressed);
	--cd-lift-hover: -1px;
	--cd-press-offset: 2px;
	--cd-container: 1366px;
	--cd-container-narrow: 48rem;
	--cd-gutter: clamp(1rem, 4vw, 2rem);
	--cd-space-1: 0.25rem;
	--cd-space-2: 0.5rem;
	--cd-space-3: 0.75rem;
	--cd-space-4: 1rem;
	--cd-space-6: 1.5rem;
	--cd-space-8: 2rem;
	--cd-space-12: 3rem;
	--cd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cd-font-sm: 0.875rem;
	--cd-font-md: 1rem;
	--cd-font-lg: 1.25rem;
	--cd-font-xl: 2rem;
	--cd-weight-normal: 400;
	--cd-weight-semibold: 600;
	--cd-weight-bold: 700;
	--cd-line-height: 1.6;
	--cd-line-height-heading: 1.2;
	--cd-control-size: 2.75rem;
	--cd-icon-size: 1.25rem;
	--cd-focus-width: 3px;
	--cd-focus-offset: 3px;
	--cd-depth-transition: 160ms ease;
	--cd-transition: var(--cd-depth-transition);
	--cd-transition-search: 240ms ease;
}

/* Recompute media radii at the media element, using its container's inset.
 * A small minimum keeps generously padded media softly rounded. */
.cd-category-card__visual,
.cd-surface > .cd-surface,
.cd-surface > img,
.cd-surface > picture,
.cd-surface > .wp-block-image {
	--cd-radius-inner: max(var(--cd-space-1), calc(var(--cd-radius-card) - var(--cd-media-inset, var(--cd-space-6))));
	--cd-radius-media: var(--cd-radius-inner);
}