/* ============================================================================
   CAPTAIN PIPE 2.0 — DESIGN SYSTEM  (FASE 1)
   Premium e-commerce · clean · modern · white · product-first · editorial · fast
   Scope: tokens + global container + typographic base + buttons + a11y utilities.
   No framework. No reset beyond what GeneratePress already provides.
   ========================================================================== */

:root {
	/* ---- Color ------------------------------------------------------------
	   White-dominant. Strong colour is meant to come from product packaging,
	   not from the UI. --cs-accent is a CONTROLLED placeholder = ink; swap for
	   a single hue sampled from the approved Captain Pipe crest/packaging. */
	--cs-bg:            #ffffff;
	--cs-surface:       #f7f7f5;   /* off-white, barely-there */
	--cs-surface-2:     #f1f0ec;
	--cs-ink:           #16150f;   /* deep warm charcoal (primary text)      */
	--cs-ink-soft:      #55534c;   /* secondary text                        */
	--cs-muted:         #8a887f;   /* tertiary / captions                   */
	--cs-line:          #e7e5df;   /* minimal hairline borders              */
	--cs-accent:        #16150f;   /* CTA / hover / small details (controlled) */
	--cs-accent-ink:    #ffffff;
	--cs-focus:         #16150f;

	/* ---- Type ----------------------------------------------------------- */
	--cs-font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
	                 "Book Antiqua", Georgia, "Times New Roman", serif;
	--cs-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                 "Helvetica Neue", Arial, sans-serif;

	--cs-fs-eyebrow: 0.75rem;                                    /* 12px */
	--cs-fs-nav:     0.8125rem;                                  /* 13px */
	--cs-fs-body:    1rem;                                       /* 16px */
	--cs-fs-lede:    clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); /* 17→21 */
	--cs-fs-h2:      clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);   /* 28→44 */
	--cs-fs-hero:    clamp(2.5rem, 1.55rem + 4.1vw, 4.5rem);     /* 40→72 */

	--cs-lh-tight:   1.06;
	--cs-lh-snug:    1.2;
	--cs-lh-body:    1.62;
	--cs-tracking-cap: 0.14em;   /* uppercase eyebrows / nav */

	/* ---- Layout ------------------------------------------------------- */
	--cs-container-max: 1320px;
	--cs-container-pad: clamp(1.125rem, 4vw, 4rem);  /* 18px on mobile → 64px */
	--cs-space-section: clamp(3rem, 7vw, 6rem);

	/* ---- Motion ----------------------------------------------------- */
	--cs-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--cs-dur:  0.18s;
}

/* ---- Global container -------------------------------------------------- */
.cs-container {
	width: 100%;
	max-width: var(--cs-container-max);
	margin-inline: auto;
	padding-inline: var(--cs-container-pad);
}

/* Keep GeneratePress' own container width coherent with the design system
   (width only — WooCommerce/Shop layout is untouched). */
.grid-container {
	max-width: var(--cs-container-max);
}

/* ---- Base type ------------------------------------------------------- */
body {
	background-color: var(--cs-bg);
	font-family: var(--cs-font-sans);
	font-size: var(--cs-fs-body);
	line-height: var(--cs-lh-body);
	color: var(--cs-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--cs-font-serif);
	color: var(--cs-ink);
	line-height: var(--cs-lh-snug);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* ---- Buttons ------------------------------------------------------- */
.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 1.0625rem 2.125rem;
	font-family: var(--cs-font-sans);
	font-size: var(--cs-fs-nav);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cs-accent-ink);
	background: var(--cs-accent);
	border: 1px solid var(--cs-accent);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--cs-dur) var(--cs-ease),
	            color var(--cs-dur) var(--cs-ease),
	            border-color var(--cs-dur) var(--cs-ease);
}
.cs-btn:hover,
.cs-btn:focus-visible {
	background: transparent;
	color: var(--cs-accent);
}

.cs-btn--link {
	padding: 0.5rem 0;
	color: var(--cs-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cs-ink);
	letter-spacing: 0.06em;
}
.cs-btn--link:hover,
.cs-btn--link:focus-visible {
	background: transparent;
	color: var(--cs-ink-soft);
	border-bottom-color: var(--cs-ink-soft);
}

/* ---- Accessibility ------------------------------------------------- */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--cs-focus);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Guest price gate ---------------------------------------------------
   Replaces a price for logged-out visitors. Stays inside WooCommerce's own
   .price class so size/weight/position match the price it replaces exactly;
   only the two links get an explicit colour + underline so they read as
   actionable. */
.cs-price-gate {
	display: inline;
	font-size: 0.875em;
	font-weight: 400;
	color: var(--cs-ink-soft);
}

.cs-price-gate__link {
	color: var(--cs-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cs-price-gate__link:hover,
.cs-price-gate__link:focus-visible {
	color: var(--cs-ink);
}

/* ---- WooCommerce notices ------------------------------------------------
   Site-wide (a notice can follow a redirect to any page, e.g. "account
   created" on the Shop). Replaces WooCommerce's purple/green top bar with
   the site's neutral tokens; WooCommerce's own icon (::before) is kept. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	font-size: 0.9375rem;
	color: var(--cs-ink);
	background-color: var(--cs-surface);
	border-top: 0;
	border-left: 3px solid var(--cs-ink);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--cs-ink);
}
.woocommerce-error {
	color: #6b1f1f;
	background-color: #fbf3f2;
	border-left-color: #c0605c;
}
.woocommerce-error::before {
	color: #c0605c;
}
.woocommerce-error a,
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}