:root {
  /* Brand palette */
  --brand-yellow: #ffc725;
  --brand-blue: #25beff;
  --brand-hot-pink: #ff2f80;
  --brand-grey: #d9d9d9;
  --brand-green: #4caf50;
  --brand-red: #f44336;
  --brand-sky: #3498db;
  --brand-green-soft: rgba(76, 175, 80, 0.2);

  /* Legacy aliases */
  --yellow: var(--brand-yellow);
  --pink: var(--brand-blue);
  --grey: var(--brand-grey);

  /* Backgrounds & surfaces */
  --bg: #1e574d;
  --secondary: #ffb9ff40;
  --colorBg: #894580;
  --surface-glass: #0000003a;
  --surface-panel: rgba(13, 15, 32, 0.72);
  --surface-card: rgba(10, 12, 32, 0.9);
  --section: var(--surface-glass);

  /* Shadows & borders */
  --yellowGlow: #ffc7253a;
  --pinkGlow: #d839a27a;
  --shadow-soft: 0 22px 44px rgba(6, 8, 22, 0.45);
  --shadow-focus: 0 0 6px 3px var(--yellowGlow);
  --shadow-focus-strong: 0 0 6px 8px var(--yellowGlow);
  --border-width-thin: 1px;
  --border-width: 2px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Typography */
  --font-body: "Roboto Condensed", sans-serif;
  --font-display: "Bebas Neue", sans-serif;
  --text-on-dark: #f6f8ff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.68);
  --text-on-dark-soft: rgba(255, 255, 255, 0.55);
  --text-on-light: #1f1605;
  --brand-blue-soft: rgba(37, 190, 255, 0.16);
  --brand-yellow-soft: rgba(255, 199, 37, 0.16);

  /* Layout & spacing */
  --layout-inline-max: 90%;
  --layout-max: 1200px;
  --layout-wide: 1400px;
  --space-2xs: clamp(0.35rem, 1vw, 0.55rem);
  --space-xs: clamp(0.5rem, 1.2vw, 0.75rem);
  --space-sm: clamp(0.75rem, 1.8vw, 1.15rem);
  --space-md: clamp(1rem, 2.6vw, 1.6rem);
  --space-lg: clamp(1.5rem, 4vw, 3rem);
  --space-xl: clamp(2.5rem, 5vw, 4rem);
  --space-xxl: clamp(4.5rem, 10vh, 7.5rem);
  --section-padding-block: var(--space-xl);
  --section-padding-inline: clamp(1rem, 4vw, 2rem);
  --section-gap: clamp(1.25rem, 3vw, 2rem);
  --panel-padding: clamp(2rem, 5vw, 3rem);
  --panel-gap: var(--space-lg);
  --card-padding: clamp(1.75rem, 4vw, 2.5rem);
  --card-gap: var(--space-md);
  --section-stack-gap: clamp(3rem, 7vh, 5.25rem);
  --card-padding-compact: clamp(1.25rem, 3.5vw, 1.75rem);
  --button-padding-block: 0.75rem;
  --button-padding-inline: 2rem;
  --button-font-size: 1.15rem;

  /* Motion */
  --transition-base: 0.25s ease;
  --transition-slow: 0.5s ease-in-out;
}

* {
  margin: 0;
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.yellow {
  font-family: var(--font-display) !important;
}

html {
  overflow-x: hidden;
}

body {
  background:
    url("assets/SVG/PrintsCharmingNewBackgroundShape.svg") repeat-y center/cover,
    linear-gradient(45deg, rgba(228, 0, 127, 1) 0%, rgba(126, 0, 67, 1) 100%);
  background-attachment: fixed; /* Keeps the gradient and image stable */
  color: var(--text-on-dark);
  overflow-x: hidden;
  line-height: 1.6;
}

.header-spacer {
  padding: var(--space-xl);
}

.hidden {
  display: none !important;
}

.intro-content {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--text-on-dark);
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.6;
  padding: 0 var(--space-md) var(--space-md);
}

.text-center {
  text-align: center;
}