/**
 * RiseSelf — zmienne CSS (design tokens) i style bazowe.
 *
 * Wartości odzwierciedlają dokument 02_DESIGN.odt (§4 System kolorów,
 * §6-7 Typografia, §8 Spacing, §10 Zaokrąglenia, §11 Cienie, §22 Animacje).
 *
 * @package RiseSelf
 */

:root {
	/* ---- Kolory: tła ----
	 * Jedno, spójne tło #000000 w całej witrynie (polerowanie finalne —
	 * brak szarych/wtórnych teł; głębia budowana światłem, konturem
	 * i złotem, nie zmianą koloru tła). */
	--rs-bg: var( --wp--preset--color--background, #000000 );
	--rs-bg-secondary: var( --wp--preset--color--background, #000000 );
	--rs-surface: var( --wp--preset--color--surface, #0b0b0b );
	--rs-surface-secondary: var( --wp--preset--color--surface-secondary, #101010 );

	/* ---- Kolory: tekst ---- */
	--rs-text-primary: var( --wp--preset--color--text-primary, #ffffff );
	--rs-text-secondary: var( --wp--preset--color--text-secondary, #b5b5b5 );
	--rs-text-muted: var( --wp--preset--color--text-muted, #858585 );

	/* ---- Kolory: złoty akcent (użycie zgodnie z §5 — nigdy dominująco) ---- */
	--rs-gold: #f2f2f2;
	--rs-gold-highlight: #ffffff;
	--rs-gold-deep: #a8a8a8;
	--rs-gold-rgb: 255, 255, 255;

	/* ---- Obramowania ---- */
	--rs-border: rgba(255, 255, 255, 0.07);
	--rs-border-strong: rgba(255, 255, 255, 0.14);
	--rs-border-gold: rgba(255, 255, 255, 0.22);
	--rs-border-gold-strong: rgba(255, 255, 255, 0.42);

	/* ---- Typografia ---- */
	--rs-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--rs-font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	--rs-size-hero: clamp(2.625rem, 3.4vw + 1.75rem, 6rem);
	--rs-size-section: clamp(2.125rem, 2.1vw + 1.5rem, 3.75rem);
	--rs-size-card-title: clamp(1.375rem, 1vw + 1.125rem, 1.875rem);
	--rs-size-body: 1.0625rem;
	--rs-size-small: 0.875rem;
	--rs-size-label: 0.8125rem;

	--rs-line-height-heading: 1.12;
	--rs-line-height-body: 1.68;
	--rs-letter-spacing-label: 0.16em;

	/* ---- Spacing (§8 — sekcje muszą oddychać) ---- */
	--rs-section-space: clamp(5rem, 7vw + 2rem, 12.5rem);
	--rs-section-space-tight: clamp(3.75rem, 4.5vw + 1.5rem, 7rem);
	--rs-container-max: 1320px;
	--rs-container-padding: 1.5rem;
	--rs-header-height: 96px;

	/* ---- Zaokrąglenia (§10) ---- */
	--rs-radius-sm: 6px;
	--rs-radius-md: 8px;
	--rs-radius-lg: 10px;

	/* ---- Cienie, poświata i światło (§11-12) ----
	 * Niemal niewidoczne w spoczynku, delikatnie ożywają przy hover —
	 * to właśnie one, nie szare tła, budują poczucie głębi i luksusu. */
	--rs-shadow-soft: 0 24px 70px -32px rgba(0, 0, 0, 0.75);
	--rs-shadow-lift: 0 34px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(var(--rs-gold-rgb), 0.16);
	--rs-shadow-gold: 0 22px 65px -30px rgba(255, 255, 255, 0.4);
	--rs-glow-gold: 0 0 0 1px rgba(var(--rs-gold-rgb), 0.14), 0 0 44px rgba(var(--rs-gold-rgb), 0.07);
	--rs-glow-gold-hover: 0 0 0 1px rgba(var(--rs-gold-rgb), 0.32), 0 0 60px rgba(var(--rs-gold-rgb), 0.16);
	--rs-divider-gradient: linear-gradient(90deg, transparent, rgba(var(--rs-gold-rgb), 0.55) 50%, transparent);

	/* ---- Ruch (§22) ---- */
	--rs-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rs-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--rs-duration-fast: 220ms;
	--rs-duration-base: 380ms;
	--rs-duration-reveal: 750ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--rs-font-body);
	font-size: var(--rs-size-body);
	font-weight: 400;
	line-height: var(--rs-line-height-body);
	color: var(--rs-text-secondary);
	background-color: var(--rs-bg);
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--rs-duration-fast) var(--rs-ease-soft);
}

a:hover,
a:focus-visible {
	color: var(--rs-gold-highlight);
}

:focus-visible {
	outline: 2px solid var(--rs-gold);
	outline-offset: 3px;
	border-radius: 2px;
	box-shadow: 0 0 0 6px rgba(var(--rs-gold-rgb), 0.14);
}

::selection {
	background-color: var(--rs-gold);
	color: #000000;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rs-font-heading);
	font-weight: 600;
	line-height: var(--rs-line-height-heading);
	color: var(--rs-text-primary);
	margin-top: 0;
	letter-spacing: -0.01em;
}

p {
	margin-top: 0;
	max-width: 68ch;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background-color: var(--rs-text-primary);
	clip: auto;
	clip-path: none;
	color: var(--rs-bg);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 0.5rem;
	line-height: normal;
	padding: 0.75rem 1rem;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
	border-radius: var(--rs-radius-sm);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100000;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
	width: auto;
	height: auto;
	background-color: var(--rs-text-primary);
	color: var(--rs-bg);
	padding: 0.75rem 1.25rem;
	border-radius: var(--rs-radius-sm);
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Etykieta / eyebrow — zgodnie z §7 Typographic hierarchy */
.rs-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--rs-size-label);
	font-weight: 600;
	letter-spacing: var(--rs-letter-spacing-label);
	text-transform: uppercase;
	color: var(--rs-gold);
	background: linear-gradient(100deg, var(--rs-gold-highlight), var(--rs-gold) 45%, var(--rs-gold-deep) 75%, var(--rs-gold-highlight));
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0 0 1.25rem;
}

.rs-label::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	background: currentColor;
}

.rs-eyebrow-plain {
	color: var(--rs-text-muted);
}

.rs-eyebrow-plain::before {
	background: var(--rs-text-muted);
}

/* Elegancki, złoty akcent pod głównymi nagłówkami sekcji — więcej
   złota w tytułach, w stylistyce cienkiej, metalicznej kreski
   (nigdy pełnego wypełnienia tła). Wyrównanie zgodne z każdą sekcją. */
.section-faq__heading::after,
.section-pillars__heading::after,
.section-transformation__heading::after,
.section-why__heading::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin: 1.1rem auto 0;
	background: linear-gradient(90deg, var(--rs-gold-highlight), var(--rs-gold) 50%, var(--rs-gold-deep));
	border-radius: 2px;
}

.section-build__heading::after,
.section-products__heading::after,
.section-reviews__heading::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin: 1.1rem 0 0;
	background: linear-gradient(90deg, var(--rs-gold-highlight), var(--rs-gold) 50%, var(--rs-gold-deep));
	border-radius: 2px;
}

/* Cienki, świetlisty, złoty przedział między sekcjami — zastępuje szare
   tła głębią budowaną światłem (finalne polerowanie wizualne). */
.rs-divider {
	position: relative;
	height: 1px;
	width: min(340px, 60%);
	margin-inline: auto;
	background: var(--rs-divider-gradient);
	opacity: 0.7;
}

.rs-divider--left {
	margin-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* RiseApex monochrome editorial typography */
h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.025em;}
h1{letter-spacing:-.035em;}
.rs-label{background:none;-webkit-text-fill-color:currentColor;color:#a7a7a7;font-family:var(--rs-font-body);font-size:.72rem;letter-spacing:.2em;}
::selection{background:#fff;color:#000;}
a:hover,a:focus-visible{color:#fff;}