:root {
  --brand-red: #d71920;
  --brand-red-bright: #e8272e;
  --brand-red-hover: #ff3b42;
  --brand-red-deep: #b6141b;

  --ink-900: #08090b;
  --ink-850: #0e0f11;
  --ink-800: #111214;
  --ink-700: #16181c;

  --text-on-dark: #ffffff;
  --text-on-dark-soft: #b9bcc2;
  --text-primary: #16181b;
  --text-secondary: #55585e;
  --text-muted: #9a9da3;

  --surface: #f7f6f4;
  --border: #e6e4e8;
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --brand-red-tint: rgba(232, 39, 46, 0.14);
  --overlay-dark: rgba(8, 9, 11, 0.72);

  --radius-sm: 2px;
  --radius-input: 10px;
  --radius-icon: 12px;
  --radius-icon-lg: 14px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 34px;
  --space-6: 44px;
  /* Vertikálny „vzduch" sekcií — na mobile pôvodné hodnoty (56/80px),
     na desktope narastú až na 84/128px. */
  --space-7: clamp(56px, 6vw, 84px);
  --space-8: clamp(80px, 9vw, 128px);

  --font-head: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --pad-x: 48px;
  --container-max: 1440px;

  --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.13);

  --gradient-photo-bottom: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 28%,
    rgba(0, 0, 0, 0.65) 48%,
    rgba(0, 0, 0, 0.25) 68%,
    transparent 88%
  );
  --gradient-card-bottom: linear-gradient(
    180deg,
    transparent,
    rgba(14, 15, 17, 0.92) 80%
  );
  --gradient-hero-glow:
    radial-gradient(
      120% 80% at 15% 0%,
      rgba(215, 25, 32, 0.28) 0%,
      transparent 45%
    ),
    radial-gradient(
      100% 90% at 100% 100%,
      rgba(215, 25, 32, 0.16) 0%,
      transparent 50%
    ),
    linear-gradient(155deg, #111214 0%, #0e0f11 100%);
  --gradient-hero-glow-center:
    radial-gradient(
      90% 120% at 50% 0%,
      rgba(215, 25, 32, 0.32) 0%,
      transparent 52%
    ),
    linear-gradient(155deg, #111214 0%, #0e0f11 100%);
  --gradient-hero-shade: linear-gradient(
    155deg,
    rgba(14, 15, 17, 0.5) 0%,
    rgba(0, 0, 0, 0.66) 48%,
    rgba(0, 0, 0, 0.9) 100%
  );
  --mask-photo-fade: linear-gradient(
    90deg,
    transparent 0%,
    #000 55%,
    #000 100%
  );
}

@media (max-width: 1200px) {
  :root {
    --pad-x: 44px;
  }
}

@media (max-width: 768px) {
  :root {
    --pad-x: 22px;
  }
}