:root {
  /* === COLORS === */
  --color-text-primary: #111111;
  --color-text-secondary: #666666;
  --color-text-muted: #777777;
  --color-surface-primary: #ffffff;
  --color-surface-soft: #fbfafc;
  --color-border-soft: #ececec;
  --color-accent-purple: #7c3aed;
  --color-accent-purple-deep: #6d28d9;
  --color-accent-pink: #ec4899;
  --color-accent-pink-deep: #d946ef;
  --color-accent-orange: #f97316;
  --color-accent-orange-soft: #fb923c;
  --purple: var(--color-accent-purple);
  --purple-light: #a78bfa;
  --pink: var(--color-accent-pink);
  --orange: var(--color-accent-orange);
  --color-eyebrow: #7137ef;
  --color-eyebrow-on-dark: var(--purple-light);
  --color-eyebrow-dot: #db42b9;
  --color-hero-paragraph: #666666;
  --color-subheadline: #111111;
  --color-ghost-button-text: #111111;
  --color-dark-bg: #09070f;
  --color-dark-bg-soft: #100b17;
  --color-dark-text-secondary: rgba(255, 255, 255, 0.72);

  /* === TYPOGRAPHY === */
  --font-family-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-family-body: Inter, "Avenir Next", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-family-display);
  --font-body: var(--font-family-body);

  --font-eyebrow-size: 13px;
  --font-eyebrow-size-mobile: 10px;
  --font-eyebrow-weight: 680;
  --font-eyebrow-letter-spacing: 0.18em;
  --font-eyebrow-letter-spacing-mobile: 0.14em;
  --font-eyebrow-line-height: 1.35;
  --font-eyebrow-transform: uppercase;

  --font-h1-size: clamp(56px, 5.7vw, 82px);
  --font-h1-size-compact: clamp(52px, 5vw, 70px);
  --font-h1-size-mobile: 48px;
  --font-h1-weight: 500;
  --font-h1-line-height: 0.94;
  --font-h1-line-height-mobile: 1.03;
  --font-h1-letter-spacing: -0.045em;
  --font-h1-letter-spacing-mobile: -0.035em;

  --font-h2-size: clamp(44px, 5vw, 72px);
  --font-h2-size-mobile: 40px;
  --font-h2-weight: 500;
  --font-h2-line-height: 0.96;
  --font-h2-letter-spacing: -0.045em;

  --font-subheadline-size: clamp(27px, 2.4vw, 38px);
  --font-subheadline-size-compact: clamp(25px, 2.2vw, 34px);
  --font-subheadline-size-mobile: 27px;
  --font-subheadline-weight: 520;
  --font-subheadline-line-height: 1.08;
  --font-subheadline-letter-spacing: -0.045em;
  --font-subheadline-letter-spacing-mobile: -0.035em;
  --font-section-heading-size: var(--font-subheadline-size);
  --font-section-heading-size-mobile: var(--font-subheadline-size-mobile);
  --font-section-heading-weight: var(--font-subheadline-weight);
  --font-section-heading-line-height: var(--font-subheadline-line-height);
  --font-section-heading-letter-spacing: var(--font-subheadline-letter-spacing);

  --eyebrow-font-size: var(--font-eyebrow-size);
  --eyebrow-font-size-mobile: var(--font-eyebrow-size-mobile);
  --eyebrow-font-weight: var(--font-eyebrow-weight);
  --eyebrow-letter-spacing: var(--font-eyebrow-letter-spacing);
  --eyebrow-letter-spacing-mobile: var(--font-eyebrow-letter-spacing-mobile);
  --eyebrow-text-transform: var(--font-eyebrow-transform);

  --font-body-size: 18px;
  --font-body-size-compact: 16px;
  --font-body-line-height: 1.55;
  --font-body-line-height-compact: 1.48;
  --font-body-color: var(--color-hero-paragraph);

  /* === SPACING === */
  --space-eyebrow-to-headline: 24px;
  --space-eyebrow-to-headline-compact: 16px;
  --space-eyebrow-to-headline-mobile: 18px;
  --space-headline-to-subheadline: 24px;
  --space-headline-to-subheadline-compact: 18px;
  --space-subheadline-to-paragraph: 22px;
  --space-subheadline-to-paragraph-compact: 16px;
  --space-paragraph-to-cta: 24px;
  --space-paragraph-to-cta-compact: 18px;
  --hero-content-max-width: 590px;
  --hero-subheadline-max-width: 560px;
  --space-section-y: 96px;
  --space-card-padding: 24px;
  --space-card-padding-compact: 20px;

  --radius-card: 24px;
  --radius-card-mobile: 22px;
  --radius-button: 999px;
  --radius-media: 24px;
  --border: var(--color-border-soft);
  --surface: var(--color-surface-primary);
  --shadow-card-light: 0 18px 48px rgba(61, 42, 92, 0.07);
  --shadow-card-light-hover: 0 28px 68px rgba(109, 40, 217, 0.12);
  --shadow-card-dark: 0 26px 70px rgba(0, 0, 0, 0.28);
  --card-light-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
  --card-light-border: 1px solid var(--border);
  --card-dark-glass-bg: rgba(255, 255, 255, 0.065);
  --card-dark-glass-border: 1px solid rgba(255, 255, 255, 0.12);
  --card-dark-glass-backdrop: blur(26px) saturate(1.35);

  /* === GRADIENTS === */
  --gradient-accent-text: linear-gradient(110deg, #8b5cf6, #ec4899 55%, #f97316);
  --gradient-cta: linear-gradient(135deg, var(--purple), var(--pink), var(--orange));
  --gradient-cta-on-dark: linear-gradient(105deg, #a78bfa 0%, #f472b6 52%, #fb923c 100%);
  --gradient-cta-button: linear-gradient(100deg, #7c3df1, #d930a9);
  --gradient-cta-button-full: linear-gradient(105deg, #6d28d9, #d946ef 48%, #fb7185 82%, #fb923c);
  --gradient-ghost-button-border: linear-gradient(105deg, #6d28d9, #d946ef 48%, #fb7185 82%, #fb923c);
  --gradient-dark-section: radial-gradient(circle at 16% 18%, rgba(139, 92, 246, 0.22), transparent 28rem),
    radial-gradient(circle at 88% 24%, rgba(251, 146, 60, 0.18), transparent 30rem),
    radial-gradient(circle at 50% 90%, rgba(236, 72, 153, 0.16), transparent 32rem),
    linear-gradient(180deg, var(--color-dark-bg-soft), #07060b 58%, #050407);
  --gradient-light-section: radial-gradient(circle at 6% 2%, rgba(139, 92, 246, 0.14), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(251, 146, 60, 0.12), transparent 32rem),
    radial-gradient(circle at 48% 100%, rgba(236, 72, 153, 0.1), transparent 34rem),
    linear-gradient(180deg, #fbf8fc 0%, #ffffff 42%, #fbf9ff 100%);
  --gradient-light-to-dark-fade: linear-gradient(180deg, rgba(251, 248, 252, 0), var(--color-dark-bg-soft));
  --gradient-dark-to-light-fade: linear-gradient(180deg, var(--color-dark-bg), rgba(251, 248, 252, 0));
}

.btn-primary {
  border-radius: var(--radius-button);
  background: var(--gradient-cta);
}

.btn-secondary {
  border-radius: var(--radius-button);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-ghost-button-border) border-box;
  border: 1px solid transparent;
}

.card-light {
  border-radius: var(--radius-card);
  border: var(--card-light-border);
  background: var(--card-light-bg);
  box-shadow: var(--shadow-card-light);
}

.card-dark-glass {
  border-radius: var(--radius-card);
  border: var(--card-dark-glass-border);
  background: var(--card-dark-glass-bg);
  box-shadow: var(--shadow-card-dark);
  backdrop-filter: var(--card-dark-glass-backdrop);
  -webkit-backdrop-filter: var(--card-dark-glass-backdrop);
}

/*
  Usage notes:
  New premium sections should reuse these tokens instead of hardcoded values.
  Eyebrows use --font-eyebrow-* and --color-eyebrow.
  Main section headlines outside hero should use --font-display
  with --font-h2-size, --font-h2-weight, --font-h2-line-height
  and --font-h2-letter-spacing.
  Body copy should use --font-family-body, --font-body-size,
  --font-body-line-height and --font-body-color.
  CTA buttons and accent words should reuse --gradient-cta-button
  and --gradient-accent-text to keep the Ściankownia visual system consistent.
*/