:root {
  --fd-color-bg: #fdfef8;
  --fd-color-text: #3e3e3e;
  --fd-color-primary: #fe0086;
  --fd-color-primary-rgb: rgb(249, 0, 133);
  --fd-gap: 1.5rem;
  --fd-border-radius: 24px;

  --fd-gradient-size: 100%;
  --fd-gradient-color-start: #fe0086E6;
  --fd-gradient-color-end: #E8007C00;
  --fd-gradient-stop-vertical: 0.15;
  --fd-gradient-stop-horizontal: 0.45;

  --fd-transition-duration: 0.2s;

  --fd-gradient-btt: linear-gradient(
    0deg,
    var(--fd-gradient-color-start) 0,
    var(--fd-gradient-color-start) calc(var(--fd-gradient-size) * var(--fd-gradient-stop-vertical)),
    var(--fd-gradient-color-end) var(--fd-gradient-size)
  );

  --fd-gradient-ltr: linear-gradient(
    90deg,
    var(--fd-gradient-color-start) 0,
    var(--fd-gradient-color-start) calc(var(--fd-gradient-size) * var(--fd-gradient-stop-horizontal)),
    var(--fd-gradient-color-end) var(--fd-gradient-size)
  );

  --fd-gradient-ttb: linear-gradient(
    180deg,
    var(--fd-gradient-color-start) 0,
    var(--fd-gradient-color-start) calc(var(--fd-gradient-size) * var(--fd-gradient-stop-vertical)),
    var(--fd-gradient-color-end) var(--fd-gradient-size)
  );

  --fd-gradient-rtl: linear-gradient(
    270deg,
    var(--fd-gradient-color-start) 0,
    var(--fd-gradient-color-start) calc(var(--fd-gradient-size) * var(--fd-gradient-stop-horizontal)),
    var(--fd-gradient-color-end) var(--fd-gradient-size)
  );
}