/**
 * PS Design System — tokens + base (global).
 * Identity: process inks on paper. Cyan is the only action color;
 * magenta and yellow are punctuation (registration strip, marker,
 * plate chips) — never large fills. Ink chrome, paper surfaces.
 */

:root {
	/* inks */
	--ps-ink: #1b1d21;
	--ps-ink-2: #141519;
	--ps-ink-soft: #26282e;
	--ps-cyan: #00aeef;
	--ps-cyan-deep: #0092cf;
	--ps-cyan-tint: #e8f7fe;
	--ps-magenta: #ec008c;
	--ps-magenta-tint: #fdedf6;
	--ps-yellow: #ffd500;
	--ps-yellow-soft: #ffe566;

	/* rgb triplets — every rgba() wash/shadow reads these, so Customizer
	   colors (Appearance → Customize → 360Print Design System) propagate
	   everywhere; ps-design-css.php re-declares base + triplet together */
	--ps-cyan-rgb: 0, 174, 239;
	--ps-magenta-rgb: 236, 0, 140;
	--ps-yellow-rgb: 255, 213, 0;
	--ps-ink-rgb: 27, 29, 33;
	--ps-paper-rgb: 252, 252, 251;

	/* paper + text */
	--ps-paper: #fcfcfb;
	--ps-surface: #ffffff;
	--ps-heading: #16181d;
	--ps-text: #59616e;
	--ps-text-soft: #7d8492;
	--ps-line: #e8eaee;
	--ps-line-strong: #d8dce2;

	/* on-ink (footer/topbar) */
	--ps-ink-text: #a9b0ba;
	--ps-ink-text-soft: #868d99;

	/* geometry */
	--ps-r-sm: 10px;
	--ps-r-md: 14px;
	--ps-r-lg: 18px;
	--ps-r-pill: 999px;

	/* depth — layered shadows, never hard borders */
	--ps-shadow-card: 0 0 0 1px rgba(var(--ps-ink-rgb), 0.045), 0 1px 2px rgba(var(--ps-ink-rgb), 0.05), 0 10px 28px -14px rgba(var(--ps-ink-rgb), 0.14);
	--ps-shadow-card-hover: 0 0 0 1px rgba(var(--ps-cyan-rgb), 0.25), 0 2px 4px rgba(var(--ps-ink-rgb), 0.04), 0 20px 44px -18px rgba(var(--ps-ink-rgb), 0.24);
	--ps-shadow-btn: 0 10px 22px -10px rgba(var(--ps-cyan-rgb), 0.55);

	/* the signature: a press-sheet registration strip */
	--ps-strip: linear-gradient(
		to right,
		var(--ps-cyan) 0 25%,
		var(--ps-magenta) 25% 50%,
		var(--ps-yellow) 50% 75%,
		var(--ps-ink) 75% 100%
	);

	--ps-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- base ---------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--ps-cyan);
	color: #fff;
}

/* Visible keyboard focus, one system everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ps-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- marketing-scope typography (body.ps-ds only) ------------------ */

body.ps-ds {
	background-color: var(--ps-paper);
	color: var(--ps-text);
}

.ps-ds .haru-heading-title,
.ps-ds .haru-page-title__heading--main {
	color: var(--ps-heading);
	text-wrap: balance;
}

.ps-ds .haru-heading-title--heading-12,
.ps-ds .haru-page-title__heading--main {
	letter-spacing: -0.015em;
}

.ps-ds p {
	text-wrap: pretty;
}

.ps-ds .haru-heading-title--description-3,
.ps-ds .haru-heading-title--description-4 {
	color: var(--ps-text);
}

/* Kill the skin's red link hover in marketing scope — cyan is the action color. */
.ps-ds a:hover {
	color: var(--ps-cyan-deep);
}

/* Buttons and cards opt back out of that generic hover where they set their own. */